HTML——jshtml学习笔记+实例+正则表达式+简单轮播+表格增删改查
来源：互联网 发布：新业软件试用版 编辑：程序博客网 时间：2024/05/19 03:25
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
"^[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> 3 0
- HTML——jshtml学习笔记+实例+正则表达式+简单轮播+表格增删改查
- HTML——jshtml学习笔记+实例+正则表达式+简单轮播+表格增删改查
- JDBC学习笔记—增删改查
- ibatis学习笔记——增删查改技术
- EF学习笔记——通用增删改查方案
- EF学习笔记——通用增删改查方案
- EF学习笔记——通用增删改查方案
- GreenDao学习笔记——初始化和增删改查
- JDBC学习笔记——增删改查
- 表格增删查改
- 增删改查表格
- MVC学习笔记二：实现简单的增删改查
- Python学习笔记-Django实现简单增删改查
- Hibernate 简单 的 增删改查 实例
- 用Javascript实现对HTML表格简单的增删查改
- Spring MVC 学习笔记5 —— 实现简单的用户管理,增删改查（1）建立user model
- javascript 表格 增删改查
- 表格 增删改查排序
- Spark的stage & job & task 到底是什么 ,以及划分原理
- Spark常用函数讲解之键值RDD转换
- 常用到的导入导出oracle
- Spark常用函数讲解之Action操作
- html5 新的选择器
- HTML——jshtml学习笔记+实例+正则表达式+简单轮播+表格增删改查
- springmvc+mybatis显示正确的日期时间的方法
- 【Codeforces Round #376 (Div. 2)】 Codeforces 731A Night at the Museum
- [51Nod 1185 威佐夫游戏 V2]Wythoff Game+乘法模拟
- Spark的 DAGschedule & task schedule 区别以及相互联系
- dagger2 让你爱不释手：重点概念讲解、融合篇
- 如何成功激活win10专业版
- APIStudio中如何导入已有项目？
- 51nod 1284 2 3 5 7的倍数（容斥定理）
