HTML——jshtml学习笔记+实例+正则表达式+简单轮播+表格增删改查

HTML——jshtml学习笔记+实例+正则表达式+简单轮播+表格增删改查

HTML——jshtml学习笔记+实例

 <span style="font-size:14px;"> 用户名:<input type="text" id="name">
  密码:<input type="password" id="pwd">
<input  type="button" value="测试" οnclick="checkUser()">
<input  type="button" value="JSON" οnclick="getJson()">
<input  type="button" value="获取日期" οnclick="getData()">
<input  type="button" value="删除" οnclick="del()">
<input  type="button" value="打开新窗口" οnclick="openWin()">
<input  type="button" value="关闭新窗口" οnclick="closeWin()">
<input  type="button" value="窗口高度" οnclick="getwh()">
<br>
<input  type="button" value="设置cookie" οnclick="setCookie()">
<input  type="button" value="读取cookie" οnclick="getCookie()">
<input  type="button" value="div显示" οnclick="changeColor()">
<input  type="button" value="增加表格行" οnclick="addRow()">
<input  type="button" value="删除Table" οnclick="delElement()">

<input  type="button" value="跳转" οnclick="go()">

<div id="div1" style="width: 500px;height: 200px; background-color: #3db54e" oncl  ick="getXY(event)"
οnmοuseοver="getXY(event)"

</span>





   <span style="font-size:14px;"> <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Title</title>  
      
        <script src="../js/OutSidejs.js"></script>  
        <style>  
            .myStyle{  
                background-color: #1f84e6;  
                width: 600px;  
                height: 600px;  
                border: 5px red;  
            }  
        </style>  
      
        <script>  
      
           var height=200;  
            function  test() {  
                alert(width);  
            }  
         function test1() {  
             alert(height);  
         }  
    function  load( count,str ) {  
        for (var i=0;i<count;i++){  
            document.write("<h1>"+str+"heloworld"+"</h1>")  
      
        }  
        var  s=prompt("提示信息","输入框的默认消息")  
        document.write("<h1>"+s+"</h1>")  
    }  
      
    function  cleanValue(obj) {  
        obj.value="";  
    }  
           function  getValue(obj) {  
             var s= obj.value;  
               if (s!=""){  
    //               alert(s.length);  
    //              alert( s.substring(0,2));  
      
    //               try{  
    //  
    //               }catch (e){  
    //  
    //               }finally {  
    //  
    //               }  
      
                   var strs=s.split(",")  
                   for (var  i=0;i<strs.length;i++){  
                       alert(strs[i]);  
                   }  
               }  
           }  
      
       function checkUser(){  
           var  name=document.getElementById("name");  
           var  pwd=document.getElementById("pwd");  
           alert("用户名:"+name.value+"密码:"+pwd.value)  
      
       }  
           var text = '{"employees":[' +  
                   '{"firstName":"John","lastName":"Doe" },' +  
                   '{"firstName":"Anna","lastName":"Smith" },' +  
                   '{"firstName":"Peter","lastName":"Jones" }]}';  
    function  getJson() {  
        var obj=JSON.parse(text);  
        alert(obj.employees[0].firstName+"-"+obj.employees[0].lastName);  
    }  
      
    function getData() {  
        var data=new Date();  
        alert(data);  
    }  
    function del() {  
       var s=confirm("您确定要删除吗?");  
        if (s){  
            alert("删除成功")  
        }else{  
            alert("已取消")  
        }  
    }  
      
      var id=window.setInterval(function () {  
        var obj=document.getElementById("time");  
        obj.value=new  Date().getMinutes()+":"+new  Date().getSeconds();  
    },1000)  
    window.setTimeout(function () {  
        window.clearInterval(id)  
        window.close();  
    },5000)  
            function  openWin() {  
                window.open("http://www.baidu.com","我的百度")  
            }  
    function closeWin() {  
        window.close()  
    }  
    function getwh() {  
        alert(screen.availHeight);  
        alert(screen.availWidth)  
        alert(screen.height);  
        alert(screen.width)  
    }  
    function  setCookie() {  
        var data=new Date();  
        document.cookie="zhang"+":"+data.getDay();  
    }  
           function  getCookie() {  
    var  str=document.cookie;  
               alert(str);  
           }  
      
           function  changeColor() {  
              var div1=document.getElementById("div1")  
               div1.style.backgroundColor="#E6DE1F"  
    //          div1.className="myStyle"  
    //           div1.innerText="插入文本"  
               div1.innerHTML="<h1> 插入HTML</h1>";  
           }  
    function  addRow() {  
        var tab1=document.getElementById("tb1")  
        var  row=tab1.insertRow();  
        var c1=row.insertCell(0);  
        var c2=row.insertCell(1);  
        var c3=row.insertCell(2);  
        c1.innerText="a";  
        c2.innerText="a";  
        c3.innerText="a";  
    }  
    function getXY(event) {  
        alert(event.clientX+":"+event.clientY)  
    }  
    function delElement() {  
        var tab1=document.getElementById("tb1")  
        document.body.removeChild(tab1);  
    }  
      
      
           function getItem(obj) {  
               alert(obj.value)  
      
           }  
           function getXY1(event) {  
      
               var obj=document.getElementById("xy");  
                 obj.value = event.clientX + ":" + event.clientY;  
                 obj.style.top=event.clientY+5+"px";  
                 obj.style.left=event.clientX+5+"px";  
      
           }  
      
      
           function geto1() {  
               var obj1=document.getElementById("o1");  
               if(obj1.style.display == "none"){  
                   obj1.style.display = "block"  
               }else{  
                   obj1.style.display = "none"  
               }  
           }  
           function geto2() {  
               var obj1=document.getElementById("o1");  
               var obj2=document.getElementById("o2");  
               var obj3=document.getElementById("o3");  
               obj1.style.display="none";  
               obj2.style.display="block";  
               obj3.style.display="none"  
           }  
           function geto3() {  
               var obj1=document.getElementById("o1");  
               var obj2=document.getElementById("o2");  
               var obj3=document.getElementById("o3");  
               obj1.style.display="none";  
               obj2.style.display="none";  
               obj3.style.display="block"  
           }  
      
           function go() {  
    //           window.location.href="../html/边走边乔.html"  
          window.open("../html/边走边乔.html",0,500,400);  
      
           }  
        </script>  
      
      
    </head>  
    <body οnlοad="test1()"  >  
    <!--οnmοusemοve="getXY1(event)"-->  
    <!--οnlοad="load()"-->  
    <h1 οnclick="load(10,'我是H1标签')">点我</h1>  
    <h1 οndblclick="load(10,'我是H1标签')">点我</h1>  
    <input type="text" οnfοcus="cleanValue(this)"id="time" οnblur="getValue(this)" value="我是输入框">  
      
      用户名:<input type="text" id="name">  
      密码:<input type="password" id="pwd">  
    <input  type="button" value="测试" οnclick="checkUser()">  
    <input  type="button" value="JSON" οnclick="getJson()">  
    <input  type="button" value="获取日期" οnclick="getData()">  
    <input  type="button" value="删除" οnclick="del()">  
    <input  type="button" value="打开新窗口" οnclick="openWin()">  
    <input  type="button" value="关闭新窗口" οnclick="closeWin()">  
    <input  type="button" value="窗口高度" οnclick="getwh()">  
    <br>  
    <input  type="button" value="设置cookie" οnclick="setCookie()">  
    <input  type="button" value="读取cookie" οnclick="getCookie()">  
    <input  type="button" value="div显示" οnclick="changeColor()">  
    <input  type="button" value="增加表格行" οnclick="addRow()">  
    <input  type="button" value="删除Table" οnclick="delElement()">  
      
    <input  type="button" value="跳转" οnclick="go()">  
      
    <div id="div1" style="width: 500px;height: 200px; background-color: #3db54e" oncl  ick="getXY(event)"  
    οnmοuseοver="getXY(event)"  
      
    >  
    </div>  
      
    <table  id="tb1" style="border: 2px solid red" width="300px">  
        <tr  >  
            <td  style="border: 2px solid red" width="100px">1</td>  
            <td width="100px">2</td>  
            <td width="100px">3</td>  
        </tr>  
        <tr>  
            <td width="100px">1</td>  
            <td width="100px">2</td>  
            <td width="100px">3</td>  
        </tr>  
    </table>  
      
    <select style="width: 500px;height: 50px;position:relative;margin: auto;"οnchange="getItem(this)">  
        <option value="0">请选择</option>  
        <option value="2">烟台</option>  
        <option value="3">北京</option>  
        <option value="4">上海</option>  
    </select>  
      
    <input type="text" id="xy" style="position: absolute ">  
      
    </body>  
    <ul style="background-color: #2e67c7;width: 200px;">  
        <li οnclick="geto1()" >填写信息</li>  
        <ol id="o1" style="display: none">  
            <li>填写信息</li>  
            <li>收到邮件</li>  
            <li>注册成功</li>  
            <li>哈哈哈</li>  
        </ol >  
        <li οnclick="geto2()">收到邮件</li>  
        <ol id="o2"style="display: none">  
            <li>填写信息</li>  
            <li>收到邮件</li>  
            <li>注册成功</li>  
            <li>哈哈哈</li>  
        </ol >  
        <li οnclick="geto3()">注册成功</li>  
        <ol id="o3"style="display: none">  
            <li>填写信息</li>  
            <li>收到邮件</li>  
            <li>注册成功</li>  
            <li>哈哈哈</li>  
        </ol>  
      
    </ul>  
      
      
      
    </html>  </span>

正则表达式

常用格式的正则表达式:

"^\\d+$"  //非负整数(正整数 + 0) 
"^[0-9]*[1-9][0-9]*$"  //正整数 
"^((-\\d+)|(0+))$"  //非正整数(负整数 + 0) 
"^-[0-9]*[1-9][0-9]*$"  //负整数 
"^-?\\d+$"    //整数 
"^\\d+(\\.\\d+)?$"  //非负浮点数(正浮点数 + 0) 
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"  //正浮点数 
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"  //非正浮点数(负浮点数 + 0) 
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"  //负浮点数 
"^(-?\\d+)(\\.\\d+)?$"  //浮点数 
"^[A-Za-z]+$"  //由26个英文字母组成的字符串 
"^[A-Z]+$"  //由26个英文字母的大写组成的字符串 
"^[a-z]+$"  //由26个英文字母的小写组成的字符串 
"^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串 
"^\\w+$"  //由数字、26个英文字母或者下划线组成的字符串 
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"    //email地址 
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"  //url 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        function checkAZ(obj) {
//            var reg= /^([A-z0-9]){8,}$/;
            //手机号码
//            var reg= /^([0-9]){11}$/;

           var reg= /^(?!(?:\d+|[a-zA-Z]+|[\da-z]+|[\dA-Z]+)$)[\da-zA-Z]{6,}$/;

            if(!reg.test(obj.value)){
                alert("格式错误");
            }
        }
    </script>
</head>
<body>
  <input  type="text"  οnblur="checkAZ(this)">
</body>
</html>





    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Title</title>  
      
        <script>  
    function checkFrom() {  
        var name=document.getElementById("name");  
        if (name.value.trim().length<8){  
            alert("登录名长度必须大于8位");  
            name.value="";  
            name.focus();  
            return;  
        }  
        var pwd=document.getElementById("pwd");  
        var a=false;  
        var b=false;  
        if (pwd.value.length<10){  
            alert("密码  长度必须大于10位");  
            pwd.value="";  
            pwd.focus();  
            return;  
        }  
       for (var i=0;i<pwd.value.length;i++){  
           var ch=pwd.value.charCodeAt(i)  
           if (ch>=48&&ch<=57){  
               a=true;  
           }else if (ch>=57&&ch<=122){  
               b=true;  
           }else {  
               alert("密码必须包含数字和字母");  
               pwd.value="";  
               pwd.focus();  
               return;  
           }  
       }  
        if (!b){  
            alert("密码必须包含字母");  
            pwd.value="";  
            pwd.focus();  
            return;  
        }  
        if (!a){  
            alert("密码必须包含数字");  
            pwd.value="";  
            pwd.focus();  
            return;  
        }  
        var pwd2=document.getElementById("pwd2");  
        if (pwd.value!=pwd2.value){  
            alert("两次密码密码必须");  
            pwd2.value="";  
            pwd2.focus();  
            return;  
        }  
        var sfz=document.getElementById("sfz");  
        if (sfz.value.length=15){  
            alert("身份证长度必须等于15位");  
            sfz.value="";  
            sfz.focus();  
            return;  
        }  
        for (var i=0;i<sfz.value.length-1;i++) {  
            var ch1 = sfz.value.charCodeAt(i);  
            if (ch1 >= 48 && ch1 <= 57) {  
            }else {  
                alert("身份证号必须为数字或最后一位X");  
                sfz.value="";  
                sfz.focus();  
                return;  
            }  
            if (sfz.value.charCodeAt(value.length)>=48&&sfz.value.charCodeAt(value.length)<=57){  
                return;  
            }else if (sfz.value.substring(0,14)=="X"){  
                return;  
            }else {  
                alert("身份证号最后一位有问题");  
                sfz.value="";  
                sfz.focus();  
                return;  
            }  
      
        }  
        function checkphone(obj) {  
            var reg=/^\d{4}=\d{7}$/;  
            if(!reg.test(obj.value)){  
                alert("格式错误");  
            }  
        }  
    }  
      
        </script>  
    </head>  
    <body>  
    <form >  
    <table border="2px" style="border: 2px solid red" width="600px">  
        <tr>  
            <td>登录名:</td>  
            <td><input id="name" type="text" style="width: 96%" ></td>  
            <td>长度必须大于8位</td>  
        </tr>  
        <tr>  
            <td>登录密码:</td>  
            <td><input id="pwd" type="password" style="width: 96%" ></td>  
            <td>长度必须大于10位,必须包含数字和字母</td>  
        </tr>  
        <tr>  
            <td>确认密码:</td>  
            <td><input  id="pwd2" type="password" style="width: 96%" ></td>  
            <td>两次密码必须相同</td>  
        </tr>  
        <tr>  
            <td>身份证号码:</td>  
            <td><input id="sfz" type="text"style="width: 96%"  ></td>  
            <td>15位并且最后一位可以是X</td>  
        </tr>  
        <tr>  
            <td>固定电话:</td>  
            <td><input type="text"style="width: 96%"  ></td>  
            <td>格式XXXX-XXXXXXX</td>  
        </tr>  
        <tr>  
            <td>手机号码:</td>  
            <td><input type="text" style="width: 96%" ></td>  
            <td>11位整数</td>  
        </tr>  
        <tr>  
            <td>电子邮件:</td>  
            <td><input type="text" style="width: 96%" ></td>  
            <td>XXXX@XXX.XXX或XXXX@XXX.XXX.XX</td>  
        </tr>  
        <tr>  
            <td>现住地:</td>  
            <td><select>  
                <option value="0"  >-请选择省份</option>  
                <option value="2">山东</option>  
                <option value="3">北京</option>  
                <option value="4">上海</option>  
            </select>  
      
            </td>  
            <td> <select  >  
            <option value="0">-请选择城市</option>  
            <option value="2">烟台</option>  
            <option value="3">北京</option>  
            <option value="4">上海</option>  
        </select></td>  
      
      
      
        </tr>  
        <tr>  
            <td></td>  
            <td><input style="color: #fa2721" type="button" value="提交信息" οnclick="checkFrom()">  
                <input style="color: #fa2721" type="reset" value="重置信息">  
            </td>  
        </tr>  
    </table>  
    </form>  
      
    </body>  
    </html>  


简单轮播:




    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Title</title>  
       <script>  
           var i=1;  
           var imgs=['../img/a.jpg','../img/b.jpg','../img/c.jpg','../img/d.jpg']  
    function imgimg() {  
        var id=window.setInterval(function () {  
            var img11=document.getElementById("img1");  
            if (i==1){  
                img11.src=imgs[0];  
                i++;  
            }  
            else if (i==2){  
                img11.src=imgs[1];  
                i++;  
            }  
            else if (i==3){  
                img11.src=imgs[2];  
                i++;  
            }  
            else if (i==4){  
                img11.src=imgs[3];  
                i=1;  
            }  
        },2000)  
    }  
           function  get1() {  
               var img11=document.getElementById("img1")  
             img11.src="../img/a.jpg"  
           }  
           function  get2() {  
               var img11=document.getElementById("img1")  
               img11.src="../img/b.jpg"  
           }  
           function  get3() {  
               var img11=document.getElementById("img1")  
               img11.src="../img/c.jpg"  
           }  
           function  get4() {  
               var img11=document.getElementById("img1")  
               img11.src="../img/d.jpg"  
           }  
      
           function getItem(obj) {  
       alert(obj.value)  
      
           }  
          </script>  
      
    </head>  
    <body οnlοad="imgimg()">  
      
      
    <div  id="div1" style="width: 300px;height: 500px;background-color: #61ff3d" >  
        <img  id="img1" src="../img/a.jpg" height="100%" width="100%"/>  
       <div style="position: absolute;top:40px;left: 30px"> <input  type="button" value="1" οnclick="get1()">  
           <input  type="button" value="2" οnclick="get2()">  
           <input  type="button" value="3" οnclick="get3()">  
           <input  type="button" value="4" οnclick="get4()">  </div>  
    </div>  
      
    <select style="width: 500px;height: 50px;position:relative;margin: auto;"οnchange="getItem(this)">  
        <option value="0">请选择</option>  
        <option value="2">烟台</option>  
        <option value="3">北京</option>  
        <option value="4">上海</option>  
    </select>  
      
      
    </body>  
    </html>  
表格增删改查



    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Title</title>  
      
        <script>  
      
            function $(name) {  
                return document.getElementById(name);  
            }  
            function $v(name) {  
              var  obj=document.getElementById(name);  
                return obj.value;  
            }  
      
            function  addRow() {  
      
                var tab1=document.getElementById("tb1");  
                var name=document.getElementById("name");  
                var age=document.getElementById("age");  
                var city=document.getElementById("city");  
                var  row=tab1.insertRow();  
                var c1=row.insertCell(0);  
                var c2=row.insertCell(1);  
                var c3=row.insertCell(2);  
                var c4=row.insertCell(3);  
             var rows=tab1.rows.length-2;  
      
                c1.innerHTML="<input type='checkbox' value='"+rows+"' id='ch"+rows+"'οnchange='show("+(rows+1)+")'>"  
                c2.innerText=name.value;  
                c3.innerText=age.value;  
                c4.innerText=city.value;  
                name.value="";  
                age.value="";  
                city.value="-请选择城市";  
      
      
            }  
      
            function delRow() {  
                var tab1=document.getElementById("tb1");  
                var sum=tab1.rows.length - 2;  
      
                for (var i = sum; i >0; i--) {  
                    var chw =document.getElementById("ch" + i);  
                    if ( chw.checked == true) {  
                        tab1.deleteRow(i+1);  
                    }  
                }  
            }  
      
            function del() {  
                var tab=$("tb1");  
                for (var i= tab.rows.length - 1; i>=0;i--) {  
                    if(tab.rows[i].cells[0].getElementsByTagName("input")[0].checked){  
                        tab.deleteRow(i);  
                    }  
                }  
            }  
            function show(sh) {  
                var tab = $("tb1");  
                var name = $v("name");  
                var age = $v("age");  
                var city = $v("city");  
                var row1 = tab.rows[sh].cells[1];  
                var row2 = tab.rows[sh].cells[2];  
                var row3 = tab.rows[sh].cells[3];  
                $("name").value = row1.innerText;  
                $("age").value = row2.innerText;  
                $("city").value = row3.innerText;  
            }  
    function chageRow() {  
        var tab=$("tb1");  
        var name = $("name");  
        var age = $("age");  
        var dress = $("city");  
        for (var i= tab.rows.length - 1; i>0;i--) {  
            if(tab.rows[i].cells[0].getElementsByTagName("input")[0].checked){  
                var c2 = tab.rows[i].cells[1];  
                var c3 = tab.rows[i].cells[2];  
                var c4 = tab.rows[i].cells[3];  
                c2.value="";  
                c3.value="";  
                c4.value="";  
                c2.innerHTML = name.value;  
                c3.innerHTML = age.value;  
                c4.innerHTML = dress.options[dress.selectedIndex].text;  
            }  
        }  
      
      
      
    }  
      
            function quanxuan() {  
                var tab1 = document.getElementById("tb1");  
                var quan = document.getElementById("quan");  
                var qqq = document.getElementById("rows");  
                for (var i = 1; i <= tab1.rows.length - 2; i++) {  
                    var chw = $("ch" + i);  
      
                    if (quan.checked == true) {  
                         chw.checked = true;  
                    }else {  
                        chw.checked =false;  
                    }  
                }  
            }  
        </script>  
      
    </head>  
    <body>  
    <input  type="button" value="新增" οnclick="addRow()">  
    <input  type="button" value="删除" οnclick="del()">  
    <input  type="button" value="修改" οnclick="chageRow()">  
    <table id="tb1" border="2px" style="border: 2px solid red" width="600px">  
        <tr style="background-color: #23fe14">  
            <td> <input id="quan" type="checkbox" name="chb" οnclick="quanxuan()"></td>  
            <td>姓名</td>  
            <td>年龄</td>  
            <td>家庭住址</td>  
        </tr>  
        <tr style="background-color: #23fe14">  
            <td> </td>  
            <td><input  id="name" type="text" style="width: 96%" ></td>  
            <td><input  id="age" type="text" style="width: 96%" ></td>  
            <td><select  id="city" >  
                <option >-请选择城市</option>  
                <option >烟台</option>  
                <option >北京</option>  
                <option >上海</option>  
            </select></td>  
        </tr>  
      
      
        </table>  
      
    </body>  
    </html>  


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值