Java學習總計（二十六）——JavaScript正則表達式，Js表單驗證,原生js+css頁面時鐘

阿新 • • 發佈：2018-06-28

text 先來 helloword 郵箱用戶名就是 lac round 外部

一．JavaScript正則表達式
1.exec檢索字符串中指定的值，返回找到的值，並確定其位置
2.test檢索字符串中指定的值，返回true或false
3.正則表達式對象的創建：
（1）方式一：
Var rgex=new RegExp(“[0-9]”,”模式”);
（2）方式二：簡便寫法，用雙斜杠//把正則表達式的內容括起來
例1（正則創建，使用test()方法）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正則驗證01</title>
        <script type="text/javascript">
            var str="helloword";
            var regx=/^[A-Z0-9]+$/i;//i用於忽略大小寫
            var falg=regx.test(str);
            alert(falg);
        </script>
    </head>
    <body>
    </body>
</html>

運行結果：
技術分享圖片
二．javaScript完成表單驗證
1.先來了解幾個相關事件：
（1）onsubmit 表單的提交事件值是return true 表單能提交到後臺
（2）onblur 表單失去焦點
2.代碼舉例說明表單驗證：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
        input{
            margin-top: 10px;
        }
        font{
            font-size: 11px;
        }
    </style>
    </head>
    <body style="text-align: center;">
        <div style="width: 300px;height: 400px; border: 1px solid black;margin-left: 500px; background-color: ivory;">
            <h3> 註冊界面</h3>
            <form method="post" action="https://www.2345.com/?38264-0010" onsubmit="return checkAll()">
                用戶名：<input type="text" id="uname" value="" placeholder="用戶名是6-12字母" name="username" onblur="checkUsername()" /><br />
                <span id="us"></span><br>
                密&nbsp;&nbsp;&nbsp;&nbsp;碼：<input type="password" id="upwd" value="" placeholder="密碼是6-12數字" name="pwd" onblur="checkPwd()"/><br />
                <span id="up"></span><br>
                郵&nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="text" id="Email" value="" placeholder="郵箱按正確格式填寫" name="Email" onblur="checkEmail()"/><br />
                <span id="em"></span><br>
                <div style="margin-top: 15px;"><a href="regular01.html">註意事項</a></div>
                <input id="ra" type="radio" name="xieyi" value="xieyi" onclick="checkRedio()"> 我已閱讀並同意網絡協議<br />
                <input type="submit" value="註冊" />
                <input style="margin-left: 15px" type="reset" value="重置" onclick="checkClear()"/>
            </form>
        </div>
        <script type="text/javascript">
        //驗證用戶名
            function checkUsername(){
                var v = document.getElementById("uname").value;
                var regx = /^[a-z]{6,12}$/i;
                var falg=regx.test(v);
                var us=document.getElementById("us");
                if(falg){
                    us.innerHTML="<font color=‘green‘>用戶名規則正確..</font>"
                }else{
                    us.innerHTML="<font color=‘red‘>用戶名規則錯誤!!</font>"
                }
                return falg;
            }
            //驗證密碼
            function checkPwd(){
                var pwd=document.getElementById("upwd").value;
                var regx = /^[0-9]{6,12}$/;
                var falg1=regx.test(pwd);
                var up=document.getElementById("up");
                if(falg1){
                    up.innerHTML="<font color=‘green‘>密碼規則正確..</font>"
                }else{
                    up.innerHTML="<font color=‘red‘>密碼規則錯誤！！</font>"
                }
                return falg1;
            }
            //驗證郵箱
            function checkEmail(){
                var email=document.getElementById("Email").value;
                //郵箱正則
                var regx=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                var falg2=regx.test(email);
                var em=document.getElementById("em");
                if(falg2){
                    em.innerHTML="<font color=‘green‘>郵箱規則正確..</font>"
                }else{
                    em.innerHTML="<font color=‘red‘>郵箱規則錯誤!!</font>"
                }
                return falg2;
            }
            //重置功能擴展
            function checkClear(){
                var us=document.getElementById("us");
                var up=document.getElementById("up");
                var em=document.getElementById("em");
                up.innerHTML=null;
                us.innerHTML=null;
                em.innerHTML=null;
            }
            //驗證單選框
            function checkRedio(){
                var cho=document.getElementById("ra");
                var flag3=true;
                if(cho.checked==true){
                    return flag3;
                }else{
                    alert("sorry,請先閱讀網絡協....")
                    flag3 =false;
                    return flag3;
                }
            }
            //驗證所有，都正確就提交
            function checkAll(){
                return checkUsername() && checkPwd() && checkEmail() && checkRedio();
            }
        </script>
    </body>
</html>

運行結果展示：
1.初始界面：
技術分享圖片
2.表單驗證（錯誤輸入）：

3.重置展示：

4.表單驗證正確輸入（單選框未選中點擊註冊）：

5.單驗證正確輸入（單選框選中點擊註冊）：

跳轉：

三．頁面時鐘的展示
1.基本思路就是讓每隔一秒更新一次當前時間
2.簡易代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>頁面時鐘</title>
    </head>
    <body>
        <div id="mytime">haha</div>
    </body>
    <script type="text/javascript">
        function showTime(){
            var ti=document.getElementById("mytime");
            var nowTime=new Date().toLocaleString();
            ti.innerHTML=nowTime;
        }
        //手動調用
        showTime();
        //設置定時器
        window.setInterval(‘showTime()‘,1000)
    </script>
</html>

運行結果：
技術分享圖片
第二次截圖：

3.引用代碼：
地址鏈接：https://www.cnblogs.com/syp172654682/p/7588104.html
寫的很好，特借鑒過來
引用代碼復制：
外部CSS代碼：

 /* 全局 */

 * {
    margin: 0;
    padding: 0;
 }

 .clock {
    width: 400px;
    height: 400px;
    border: 10px solid #333;
    box-shadow: 0px 0px 20px 3px #444 inset;
    border-radius: 210px;
    position: relative;
    margin: 5px auto;
    z-index: 10;
    background-color: #f6f6f6;
 }
 /* 時鐘數字 */

 .clock-num {
    width: 40px;
    height: 40px;
    font-size: 22px;
    text-align: center;
    line-height: 40px;
    position: absolute;
    z-index: 8;
    color: #555;
    font-family: fantasy, ‘Trebuchet MS‘;
 }

 .em_num {
    font-size: 28px;
 }
 /* 指針 */

 .clock-line {
    position: absolute;
    z-index: 20;
 }

 .hour-line {
    width: 100px;
    height: 4px;
    top: 198px;
    left: 200px;
    background-color: #000;
    border-radius: 2px;
    transform-origin: 0 50%;
    box-shadow: 1px -3px 8px 3px #aaa;
 }

 .minute-line {
    width: 130px;
    height: 2px;
    top: 199px;
    left: 190px;
    background-color: #000;
    transform-origin: 7.692% 50%;
    box-shadow: 1px -3px 8px 1px #aaa;
 }

 .second-line {
    width: 170px;
    height: 1px;
    top: 199.5px;
    left: 180px;
    background-color: #f60;
    transform-origin: 11.765% 50%;
    box-shadow: 1px -3px 7px 1px #bbb;
 }
 /* 原點 */

 .origin {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #000;
    position: absolute;
    top: 190px;
    left: 190px;
    z-index: 14;
 }
 /* 日期 時間 */

 .date-info {
    width: 160px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    position: absolute;
    top: 230px;
    left: 120px;
    z-index: 11;
    color: #555;
    font-weight: bold;
    font-family: ‘微軟雅黑‘;
 }

 .time-info {
    width: 92px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 270px;
    left: 154px;
    z-index: 11;
    background-color: #555;
    padding: 0;
    box-shadow: 0px 0px 9px 2px #222 inset;
 }

 .time {
    width: 30px;
    height: 30px;
    text-align: center;
    float: left;
    color: #fff;
    font-weight: bold;
 }

 #minute-time {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
 }
 /* 刻度 */

 .clock-scale {
    width: 195px;
    height: 2px;
    transform-origin: 0% 50%;
    z-index: 7;
    position: absolute;
    top: 199px;
    left: 200px;
 }

 .scale-show {
    width: 12px;
    height: 2px;
    background-color: #555;
    float: left;
 }

 .scale-hidden {
    width: 183px;
    height: 2px;
    float: left;
 }

外部js代碼：

(function() {
    window.onload = initNumXY(200, 160, 40, 40);
    var hour_line = document.getElementById("hour-line");
    var minute_line = document.getElementById("minute-line");
    var second_line = document.getElementById("second-line");
    var date_info = document.getElementById("date-info");
    var week_day = [
        ‘星期日‘, ‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘星期六‘
    ];
    var hour_time = document.getElementById("hour-time");
    var minute_time = document.getElementById("minute-time");
    var second_time = document.getElementById("second-time");

    function setTime() {
        var this_day = new Date();
        var hour = (this_day.getHours() >= 12) ?
            (this_day.getHours() - 12) : this_day.getHours();
        var minute = this_day.getMinutes();
        var second = this_day.getSeconds();
        var hour_rotate = (hour * 30 - 90) + (Math.floor(minute / 12) * 6);
        var year = this_day.getFullYear();
        var month = ((this_day.getMonth() + 1) < 10) ?
            "0" + (this_day.getMonth() + 1) : (this_day.getMonth() + 1);
        var date = (this_day.getDate() < 10) ?
            "0" + this_day.getDate() : this_day.getDate();
        var day = this_day.getDay();
        hour_line.style.transform = ‘rotate(‘ + hour_rotate + ‘deg)‘;
        minute_line.style.transform = ‘rotate(‘ + (minute * 6 - 90) + ‘deg)‘;
        second_line.style.transform = ‘rotate(‘ + (second * 6 - 90) + ‘deg)‘;
        date_info.innerHTML =
            year + "-" + month + "-" + date + " " + week_day[day];
        hour_time.innerHTML = (this_day.getHours() < 10) ?
            "0" + this_day.getHours() : this_day.getHours();
        minute_time.innerHTML = (this_day.getMinutes() < 10) ?
            "0" + this_day.getMinutes() : this_day.getMinutes();
        second_time.innerHTML = (this_day.getSeconds() < 10) ?
            "0" + this_day.getSeconds() : this_day.getSeconds();
    }
    setInterval(setTime, 1000);

    function initNumXY(R, r, w, h) {
        var numXY = [{
            "left": R + 0.5 * r - 0.5 * w,
            "top": R - 0.5 * r * 1.73205 - 0.5 * h
        }, {
            "left": R + 0.5 * r * 1.73205 - 0.5 * w,
            "top": R - 0.5 * r - 0.5 * h
        }, {
            "left": R + r - 0.5 * w,
            "top": R - 0.5 * h
        }, {
            "left": R + 0.5 * r * 1.73205 - 0.5 * w,
            "top": R + 0.5 * r - 0.5 * h
        }, {
            "left": R + 0.5 * r - 0.5 * w,
            "top": R + 0.5 * r * 1.732 - 0.5 * h
        }, {
            "left": R - 0.5 * w,
            "top": R + r - 0.5 * h
        }, {
            "left": R - 0.5 * r - 0.5 * w,
            "top": R + 0.5 * r * 1.732 - 0.5 * h
        }, {
            "left": R - 0.5 * r * 1.73205 - 0.5 * w,
            "top": R + 0.5 * r - 0.5 * h
        }, {
            "left": R - r - 0.5 * w,
            "top": R - 0.5 * h
        }, {
            "left": R - 0.5 * r * 1.73205 - 0.5 * w,
            "top": R - 0.5 * r - 0.5 * h
        }, {
            "left": R - 0.5 * r - 0.5 * w,
            "top": R - 0.5 * r * 1.73205 - 0.5 * h
        }, {
            "left": R - 0.5 * w,
            "top": R - r - 0.5 * h
        }];
        var clock = document.getElementById("clock");
        for (var i = 1; i <= 12; i++) {
            if (i % 3 == 0) {
                clock.innerHTML += "<div class=‘clock-num em_num‘>" + i + "</div>";
            } else {
                clock.innerHTML += "<div class=‘clock-num‘>" + i + "</div>";
            }
        }
        var clock_num = document.getElementsByClassName("clock-num");
        for (var i = 0; i < clock_num.length; i++) {
            clock_num[i].style.left = numXY[i].left + ‘px‘;
            clock_num[i].style.top = numXY[i].top + ‘px‘;
        }
        for (var i = 0; i < 60; i++) {
            clock.innerHTML += "<div class=‘clock-scale‘> " +
                "<div class=‘scale-hidden‘></div>" +
                "<div class=‘scale-show‘></div>" +
                "</div>";
        }
        var scale = document.getElementsByClassName("clock-scale");
        for (var i = 0; i < scale.length; i++) {
            scale[i].style.transform = "rotate(" + (i * 6 - 90) + "deg)";
        }
    }
})();

Html代碼：

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel=‘stylesheet‘ type="text/css" href="css/頁面時鐘.css" />
        <title>時鐘</title>
    </head>
    <body style="text-align: center;">
        <h3>頁面時鐘展示</h3>
        <div class="clock" id="clock">
            <!-- 原點 -->
            <div class="origin"></div>

            <!-- 時分秒針 -->
            <div class="clock-line hour-line" id="hour-line"></div>
            <div class="clock-line minute-line" id="minute-line"></div>
            <div class="clock-line second-line" id="second-line"></div>

            <!-- 日期 -->
            <div class="date-info" id="date-info"></div>
            <!-- 時間 -->
            <div class="time-info">
                <div class="time" id="hour-time"></div>
                <div class="time" id="minute-time"></div>
                <div class="time" id="second-time"></div>
            </div>
        </div>
        <script type=‘text/javascript‘ src="js/頁面時鐘.js"></script>
    </body>

</html>

運行結果：

技術分享圖片

        【總結完畢】

Java學習總計（二十六）——JavaScript正則表達式，Js表單驗證,原生js+css頁面時鐘

text 先來 helloword 郵箱用戶名就是 lac round 外部一．JavaScript正則表達式1.exec檢索字符串中指定的值，返回找到的值，並確定其位置2.test檢索字符串中指定的值，返回true或false3.正則表達式對象的創建：（1）方式一：

Java學習總計（二十六）——JavaScript正則表達式，Js表單驗證,原生js+css頁面時鐘

Java學習總計（二十六）——JavaScript正則表達式，Js表單驗證,原生js+css頁面時鐘

Effective_STL 學習筆記（二十六）儘量使用 iterator 代替 const_iterator，reverse_iterator和const_reverse_iterator

Java學習筆記（二十一）：類型轉換和instanceof關鍵字

Linux學習筆記（二十六）grep

Linux學習總結（二十六）防火墻規則之firewalld

Java學習總結（二十四）——前端：CSS樣式設計（CSS引入，選擇器，盒子模型，浮動元素）

Java開發筆記（二十六）方法的輸出引數

Java開發筆記（二十六）方法的輸出參數

Django學習筆記（二十六）:閱讀計數和優化計數（防重新整理）

小白的資料結構與演算法學習筆記（二十六）----廣義表

OpenCV學習筆記（二十六）——小試SVM演算法ml OpenCV學習筆記（二十七）——基於級聯分類器的目標檢測objdect OpenCV學習筆記（二十八）——光流法對運動目標跟蹤Video Ope

OpenCV學習筆記（二十六）——小試SVM演算法ml

tensorflow學習筆記（二十六）：構建TF程式碼

C++學習總結（二十六）——RTTI型別檢查，類指標型別轉換

Java開發筆記（三十七）利用正則串分割字串

Java開發筆記（三十八）利用正則表示式校驗字串

PHP系統（六）PHP正則表達式

每日代碼（2019-01-25）：正則表達式

Java學習筆記（二十二）：打包程序

菜鳥好文推薦（二十六）——避免Java堆空間錯誤的5個步驟

Java學習總計（二十六）——JavaScript正則表達式，Js表單驗證,原生js+css頁面時鐘

相關推薦