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
"^[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> 
扫一扫
2481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
