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

最新推荐文章于 2024-01-05 14:05:41 发布

原创最新推荐文章于 2024-01-05 14:05:41 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#android #博客 #html #webview #时代

HTML 同时被 2 个专栏收录

30 篇文章

订阅专栏

HTML 学习专栏

7 篇文章

订阅专栏

本文介绍了一系列使用JavaScript与HTML实现的功能，包括用户验证、DOM操作、简单的轮播图制作及表格的增删改查等，提供了丰富的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML——jshtml学习笔记+实例

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

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

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

<!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 onload="test1()"  >
<!--onmousemove="getXY1(event)"-->
<!--onload="load()"-->
<h1 onclick="load(10,'我是H1标签')">点我</h1>
<h1 ondblclick="load(10,'我是H1标签')">点我</h1>
<input type="text" onfocus="cleanValue(this)"id="time" onblur="getValue(this)" value="我是输入框">

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

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

<div id="div1" style="width: 500px;height: 200px; background-color: #3db54e" oncl  ick="getXY(event)"
onmouseover="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;"onchange="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 onclick="geto1()" >填写信息</li>
    <ol id="o1" style="display: none">
        <li>填写信息</li>
        <li>收到邮件</li>
        <li>注册成功</li>
        <li>哈哈哈</li>
    </ol >
    <li onclick="geto2()">收到邮件</li>
    <ol id="o2"style="display: none">
        <li>填写信息</li>
        <li>收到邮件</li>
        <li>注册成功</li>
        <li>哈哈哈</li>
    </ol >
    <li onclick="geto3()">注册成功</li>
    <ol id="o3"style="display: none">
        <li>填写信息</li>
        <li>收到邮件</li>
        <li>注册成功</li>
        <li>哈哈哈</li>
    </ol>

</ul>



</html>

正则表达式

"^\\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"  onblur="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="提交信息" onclick="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 onload="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" onclick="get1()">
       <input  type="button" value="2" onclick="get2()">
       <input  type="button" value="3" onclick="get3()">
       <input  type="button" value="4" onclick="get4()">  </div>
</div>

<select style="width: 500px;height: 50px;position:relative;margin: auto;"onchange="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+"'onchange='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="新增" onclick="addRow()">
<input  type="button" value="删除" onclick="del()">
<input  type="button" value="修改" onclick="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" onclick="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>