html5，javascript的一系列操作(事件、正则表达式的验证)

最新推荐文章于 2021-08-13 19:20:47 发布

别动我的love

最新推荐文章于 2021-08-13 19:20:47 发布

阅读量1.5k

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果展示：

如何实现：

    <meta charset="utf-8" >  
    <style>  
        h1{  
            font-family: 华文行楷;  
            color: red;  
            background-color: green;  
            box-shadow: 10px 10px 5px #888888;  
            border:2px solid;  
            border-radius:25px;  
            width: 250px;  
            height: 65px;  
            line-height: 65px;  
        }  
        h2{  
            font-family: 隶书;  
            color: green;  
            text-shadow: 2px 2px 2px red;  
        }  
        p{  
            text-shadow: 5px 5px 5px white;  
            height: 55px;  
            line-height: 55px;  
            font-family: 华文行楷;  
            width: 250px;  
            background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */  
            background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */  
            background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */  
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */  
        }  
    </style>  
    <div>  
        <!--点击fun事件弹出你是否准备好了吗，如果准备好了，则跳转否则取消-->  
        <input type="button" value="点击你是否准备好了，如果好了则跳转否则取消" οnclick="fun()"/>  
        <hr />  
        <!--点击myfunction事件会将你所看到的值改成另外一条数据，表现出不同的数据-->  
        <button type="button" οnclick="myFunction()">点击这里改变html里边的数据</button>  
        <hr />  
        <h2 id="demo">  
            临汾是一个山清水秀的好地方。  
        </h2>  
        <input type="text" id="demos">  
        <!--点击check1事件判断你所输入的是不是数字，主要是验证-->  
        <button type="button" οnclick="check1()">点击这个按钮判断是不是数字</button>  
        <hr />  
        <!--判断你所输入的值是不是123456-->  
        <input type="text" placeholder="请输入123456"  id="content" οnblur="fun2()"/>  
        <span id="c_content"></span>  
        <hr />  
        <button οnclick="myFunction1('郝云云','好运集团有限公司')">点击这里欢迎郝云来到好运集团有限公司</button>  
        <hr />      
        <button οnclick="myFunction2()">点击这里查看早上还是晚上</button><p id="demoes"></p>  
        <hr />  
        <button οnclick="myFunction3()">点击查看今天是星期几</button>  
        <p id="demow"></p>  
        <hr />  
    </div>  
    <script src="jq.js"></script>  
    <script type="text/javascript">  
        function fun(){  
                var content=confirm("我问你一句你准备好了吗");  
                if(content)window.location="http://blog.csdn.net/haoyunyun888/";  
        }  
        setTimeout(moveon,60000);  
        function myFunction()  
        {  
            obj=document.getElementById("demo");  // 找到元素  
            obj.innerHTML="说的很好啊，你的意见我赞同!";    // 改变内容  
        }  
        function check1()  
        {  
            var x=document.getElementById("demos").value;  
            if(x==""||isNaN(x))  
                {  
                    alert("您输入的不是数字");  
                }else{  
                    alert("您输入的是数字，可以进行下一步");  
                }  
        }  
        function fun2(){  
            var content=document.getElementById('content').value;  
            if(content=='123456'){  
                document.getElementById('c_content').innerHTML="<font color='red'>您输入的是123456</font>";  
            }else{  
                document.getElementById('c_content').innerHTML="您输入的不是123456";  
            }  
        }  
        function myFunction1(name,job)  
        {  
            alert("欢迎" + name + ", 来到 " + job);  
        }  
        function myFunction2()  
        {  
        var x="";  
        var time=new Date().getHours();  
        if (time<20)  
          {  
          x="早上好";  
          }  
        else  
          {  
          x="晚上好";  
          }  
        document.getElementById("demoes").innerHTML=x;  
        }  
        function myFunction3()  
        {  
            var x;  
            var d=new Date().getDay();  
            switch (d)  
              {  
              case 0:  
                x="今天是星期天";  
                break;  
              case 1:  
                x="今天是星期一";  
                break;  
              case 2:  
                x="今天是星期二";  
                break;  
              case 3:  
                x="今天是星期三";  
                break;  
              case 4:  
                x="今天是星期四";  
                break;  
              case 5:  
                x="今天是星期五";  
                break;  
              case 6:  
                x="今天是星期六";  
                break;  
          }  
        document.getElementById("demow").innerHTML=x;  
        }  
    </script>  
    <script>  
        document.write("<h1>我是郝云云</h1>");  
    </script>

代码实现：

    <meta charset="utf-8" >  
    <div>  
        <input type="text" name="email" id="email" οnblur="fun()"/><span id="c_email"></span>  
        <textarea id="content" οnkeyup="fun1()">  
          
        </textarea>  
        <span id="c_content"></span>  
    </div>  
    <script>  
        //判断是什么邮箱  
        function fun(){  
            var email=document.getElementById('email').value;  
            if(email==""){  
                document.getElementById('c_email').innerHTML="邮箱不能为空";  
                return false;  
            }  
                var a=email.indexOf('@');  
                var b=email.lastIndexOf('.');  
                if(a!=-1 && b!=-1 && b>a){  
                    document.getElementById('c_email').innerHTML="这是一个"+email.substring(a+1,b)+"邮箱";  
                }else{  
                    document.getElementById('c_email').innerHTML="这不是一个正常的邮箱地址";  
                }  
        }  
        //textarea标签的设置  
        function fun1(){  
            var content=document.getElementById("content").value;  
            var len=content.length;  
            if(len<=100){  
                document.getElementById("c_content").innerHTML="你还可以输入"+(100-len)+"个字";  
            }else{  
                document.getElementById("content").innerHTML=content.substr(0,10);  
                document.getElementById("c_content").innerHTML="你不可以输入了";  
            }  
        }  
    </script>

代码实现：

    <html>  
        <meta charset="utf-8" >  
        <form action="table3.php" method="post" >  
            <fieldset>  
                <legend>用户页面</legend>  
                <p>  
                    <label>用户名</label>  
                    <input type="text" name="username" id="username" οnblur="fun(this);">  
                    <span id="s_username"></span>  
                </p>  
                <p>  
                    <label>密码</label>  
                    <input type="password" name="pwd" id="pwd" οnblur="fun2(this);">  
                    <span id="s_pwd"></span>  
                </p>  
                <p>  
                    <label>手机号</label>  
                    <input type="text" name="tel" id="tel" οnblur="fun3(this);">  
                    <span id="s_tel"></span>  
                </p>  
                <p>  
                    <label>邮箱</label>  
                    <input type="text" name="email" id="email" οnblur="fun4(this);">  
                    <span id="s_email"></span>  
                </p>  
                <p>  
                    <input type="submit" value="注册">  
                </p>  
            </fieldset>  
        </form>  
    </html>  
    <script>  
        function fun(obj){  
            var username=obj.value;  
            var reg=/^[a-zA-Z_]\w{5,}$/;  
            if(reg.test(username)){  
                document.getElementById('s_username').innerHTML="<font color='blue'>ok</font>";  
                return true;  
            }else{  
                document.getElementById('s_username').innerHTML="<font color='red'>用户名由6位字母组成不能由数字开头</font>";  
                return false;  
            }  
        }  
        function fun2(obj){  
            var pwd=obj.value;  
            var reg=/^\d{6,}$/;  
            if(reg.test(pwd)){  
                document.getElementById('s_pwd').innerHTML="<font color='blue'>ok</font>";  
                return true;  
            }else{  
                document.getElementById('s_pwd').innerHTML="<font color='red'>密码必须6位数字以上</font>";  
                return false;  
            }  
        }  
        function fun3(obj){  
            var tel=obj.value;  
            var reg=/^\d{11}$/;  
            if(reg.test(tel)){  
                document.getElementById('s_tel').innerHTML="<font color='blue'>ok</font>";  
                return true;  
            }else{  
                document.getElementById('s_tel').innerHTML="<font color='red'>手机号必须为11位数字</font>";  
                return false;  
            }  
        }  
        function fun4(obj){  
            var email=obj.value;  
            var reg= /\w+@\w+\.(com|cn)/;  
            if(reg.test(email)){  
                document.getElementById('s_email').innerHTML="<font color='blue'>ok</font>";  
            }else{  
                document.getElementById('s_email').innerHTML="<font color='red'>邮箱必须包含@和com</font>";  
            }  
        }  
    </script>

代码实现：

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <style type="text/css">  
            body,a{ font-size: 14px; color: #555;;}  
            .wordCount{ position:relative;width: 600px; }  
            .wordCount textarea{ width: 100%; height: 100px;}  
            .wordCount .wordwrap{ position:absolute; right: 6px; bottom: 6px;}  
            .wordCount .word{ color: red; padding: 0 4px;;}  
        </style>  
    </head>  
    <body>  
      
      
    <div class="wordCount" id="wordCount">  
        <textarea placeholder="textarea还剩余字数统计"></textarea>  
        <span class="wordwrap"><var class="word">300</var>/300</span>  
    </div>  
      
      
    <script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>  
    <script>  
        $(function(){  
            //先选出 textarea 和 统计字数 dom 节点  
            var wordCount = $("#wordCount"),  
                textArea = wordCount.find("textarea"),  
                word = wordCount.find(".word");  
            //调用  
            statInputNum(textArea,word);  
      
        });  
        /*  
        * 剩余字数统计  
        * 注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var>  
        */  
        function statInputNum(textArea,numItem) {  
            var max = numItem.text(),  
                curLength;  
            textArea[0].setAttribute("maxlength", max);  
            curLength = textArea.val().length;  
            numItem.text(max - curLength);  
            textArea.on('input propertychange', function () {  
                numItem.text(max - $(this).val().length);  
            });  
        }  
    </script>  
    </div>  
    </body>  
    </html>