<!DOCTYPE html><html lang="zh"> ???<head> ???????<meta charset="UTF-8" /> ???????<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ???????<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ???????<title>js页面加载</title> ???????<script type="text/javascript"> ???????????function f1() { ???????????????var a = document.getElementById(‘user‘).value; ???????????????alert(a); ???????????} ???????????//页面加载 ???????????window.onload = function() { ???????????????var a = document.getElementById(‘user‘).value; ???????????????alert(a); ???????????} ???????????//多个函数的页面加载 ???????????function f2() { ???????????????alert("f2函数"); ???????????} ???????????function f3() { ???????????????alert("f3函数"); ???????????} ???????????function f4() { ???????????????alert("f4函数"); ???????????} ???????????window.onload = function() { ???????????????f2(), ???????????????????f3(), ???????????????????f4() ???????????} ???????????//实现3秒自动跳转 ???????????function reflush() { ???????????????var s = document.getElementById(‘s‘); ???????????????//如何获取开始标签与结束标签的内容 ???????????????var num = s.innerHTML; //这个是string类型 ???????????????//转换类型 ???????????????num = parseInt(num); ???????????????if(num > 0) { ???????????????????num--; ???????????????????//改变页面中数字的内容 ???????????????????s.innerHTML = num; ???????????????} else { ???????????????????//跳转 ???????????????????location.href = "http://www.baidu.com"; ???????????????????//停止定时器的执行 ???????????????????clearInterval(interval); ???????????????} ???????????} ???????????//系统函数 ???????????//作用：每隔X时间，执行一次（循环执行） ???????????//第一个参数 ?存入要执行的函数 ???????????//第二个参数 ??指定时间（毫秒） ???????????var interval = setInterval(‘reflush()‘, 1000); ???????????//时间定时器 ???????????//作用是在指定时间后执行函数，只执行一次 ???????????function timeo() { ???????????????var now = new Date(); ???????????????var y = now.getFullYear(); ???????????????var m = now.getMonth() + 1; ???????????????var d = now.getDate(); ???????????????var h = now.getHours(); ???????????????var mi = now.getMinutes(); ???????????????if(mi < 10) { ???????????????????mi = "0" + mi; ???????????????} ???????????????var ms = now.getSeconds(); ???????????????//alert(typeof ms);//数字类型 ???????????????if(ms < 10) { ???????????????????ms = "0" + ms; ???????????????} ???????????????var date = document.getElementById(‘dat‘); ???????????????date.innerHTML = y + "年" + m + "月" + d + "日" + h + "时" + mi + "分" + ms + "秒"; ???????????} ???????????//开始 ???????????var interval; ???????????function start() { ???????????????interval = setInterval(‘timeo()‘, 1000); ???????????} ???????????//结束 ???????????function stop() { ???????????????clearInterval(interval); ???????????} ???????????//鼠标移动 ???????????function move() { ???????????????var img1Obj = document.getElementById(‘img1‘); ???????????????img1Obj.style.border = "1px solid red"; ???????????} ???????????//鼠标移除 ???????????function out() { ???????????????var img1Obj = document.getElementById(‘img1‘); ???????????????img1Obj.style.border = "0px"; ???????????} ???????????//鼠标移动 ?传入对象 ???????????function move(img1Obj, img_src) { ???????????????//var img1Obj = document.getElementById(‘img1‘); ???????????????img1Obj.style.border = "11px solid red"; ???????????????var other = document.getElementById(‘other‘); ???????????????other.src = "img/" + img_src; ???????????} ???????????//鼠标移除 ??传入对象 ???????????function out(img1Obj) { ???????????????//var img1Obj = document.getElementById(‘img1‘); ???????????????img1Obj.style.border = "13px solid blue"; ???????????} ???????????//鼠标移动事件 ???????????function imgMove(obj) { ???????????????obj.style.border = "2px solid red"; ???????????????var big = document.getElementById(‘big‘); ???????????????var id = obj.id; ???????????????//alert(typeof id) ???????????????switch(id) { ???????????????????case ‘img1‘: ???????????????????????big.src = "img/show1_big.jpg"; ???????????????????????break; ???????????????????case ‘img2‘: ???????????????????????big.src = "img/show2_big.jpg"; ???????????????????????break; ???????????????????case ‘img3‘: ???????????????????????big.src = "img/show3_big.jpg"; ???????????????????????break; ???????????????????case ‘img4‘: ???????????????????????big.src = "img/show4_big.jpg"; ???????????????????????break; ???????????????????case ‘img5‘: ???????????????????????big.src = "img/show5_big.jpg"; ???????????????????????break; ???????????????????default: ???????????????????????break; ???????????????} ???????????} ???????????//鼠标移除 ???????????function imgOut(obj) { ???????????????obj.style.border = "0px"; ???????????????//document.getElementById(‘o‘).style.display="none"; ???????????} ???????????//键盘事件 ???????????/*document.onkeydown = function(event) { ???????????????//alert(event.keyCode); ???????????????if(event.keyCode == 13) { ???????????????????//提交表单 ???????????????????document.forms[0].submit(); ???????????????} ???????????}*/ ???????????????????????????????????document.onkeydown = function(event){ ???????????????if(event.keyCode == 13) { ???????????????????//提交表单 ???????????????????var flag = validate(); ???????????????????if(flag!=false){ ???????????????????????document.forms[1].submit(); ???????????????????} ??????????????????} ???????????} ???????????//表单的验证 ???????????function validate() { ???????????????//获取用户名 ???????????????var username = document.getElementById(‘username‘); ???????????????//获取密码 ???????????????var pwd = document.getElementById(‘pwd‘); ???????????????//获取确认密码 ???????????????var repwd = document.getElementById(‘repwd‘); ???????????????//获取学历 ???????????????var study = document.getElementById(‘study‘); ???????????????//获取年龄 ???????????????var age = document.getElementById(‘age‘); ???????????????//获取备注 ???????????????var remark = document.getElementById(‘remark‘); ???????????????//验证用户名不能为空 ???????????????if(‘‘ == username.value || null == username.value || ‘‘ == username.value.trim()) { ???????????????????//alert(‘用户名不能为空‘); ???????????????????var info = document.getElementById(‘use‘); ???????????????????info.innerHTML ="<font color=‘#F80851‘>用户名不能为空</font>"; ???????????????????username.focus(); ???????????????????return false; ???????????????} ???????????????????????????????if(‘‘ == pwd.value || null == pwd.value || ‘‘ == pwd.value.trim()) { ???????????????????//alert(‘密码不能为空‘); ???????????????????var p = document.getElementById(‘use1‘); ???????????????????p.innerHTML = "密码不能为空"; ???????????????????pwd.focus(); ???????????????????return false; ???????????????} ???????????????????????????????if(‘‘ == repwd.value || null == repwd.value || ‘‘ == repwd.value.trim()) { ???????????????????//alert(‘确认密码不能为空‘); ???????????????????var p = document.getElementById(‘user‘); ???????????????????p.innerHTML = "确认密码不能为空"; ???????????????????repwd.focus(); ???????????????????return false; ???????????????} ???????????????// ?????????????if(!(pwd.value.trim().equals(repwd.value.trim()))){// ?????????????????alert(‘密码与确认密码不一致‘);// ?????????????????return false;// ?????????????} ???????????????var sex = document.getElementsByName(sex); ???????????????var n = 0; ???????????????for(var i in sex){ ???????????????????if(false == sex[i].checked) { ???????????????????????n++; ???????????????} ???????????????} ???????????????if (n == 2){ ???????????????????alert(‘选择性别‘); ???????????????????????return false; ???????????????} ???????????????????????????????????????????????if(selected.value == 0) { ???????????????????//alert(‘学历不能为空‘); ???????????????????var edu = document.getElementById(‘use3‘); ???????????????????edu.innerHTML = "学历不能为空"; ???????????????????selected.focus(); ???????????????????return false; ???????????????} ???????????????????????????????if(‘‘ == age.value || null == age.value || ‘‘ == age.value.trim()) { ???????????????????alert(‘年龄不能为空‘); ???????????????????age.focus(); ???????????????????return false; ???????????????} ???????????????????????????????if(‘‘ == remark.value || null == remark.value || ‘‘ == remark.value.trim()) { ???????????????????alert(‘备注不能为空‘); ???????????????????remark.focus(); ???????????????????return false; ???????????????} ???????????????????????????} ???????????????????????function n(){ ???????????????var u = document.getElementById(‘usename‘); ???????????????if(u.value !=null){ ???????????????????var c = document.getElementById(‘use‘); ???????????????????c.innerHTML ="aa"; ???????????????} ???????????} ???????</script> ???????<style type="text/css"> ???????????button { ???????????????border: none; ???????????????outline: none; ???????????????font-size: 17px; ???????????????border-radius: 20px; ???????????} ???????????????????????ul li { ???????????????display: inline; ???????????} ???????????????????????input { ???????????????border-radius: 20px; ???????????????outline: none; ???????????????size: 3px; ???????????} ???????</style> ???</head> ???<body> ???????<input type="text" name="user" id="user" value="" /> ???????<br/> ???????<input type="button" name="sub" id="sub" onclick="f1()" value="提交" /> ???????<br/> ???????<span id="s" style="color: red; font-size: 20px;">10000</span>秒后自动跳转 ???????<hr /> ???????<!----> ???????<h2>时间定时器</h2> 当前系统时间： ???????<p id="dat" style="color: red; font-size: 30px;"> ???????????<!--<span id="year"></span>年 ???????<span id="m"></span>月 ???????<span id="d"></span>日 ???????<span id="h"></span>时 ???????<span id="mi"></span>分 ???????<span id="ms"></span>秒--> ???????</p> ???????<button id="start" onclick="start()">开始</button><br /><br /> ???????<button id="stop" onclick="stop()">结束</button> ???????<hr /> ???????<h2>鼠标滑动</h2> ???????<div id=""> ???????????<img src="img/alert_red.png" id="other" /> ???????</div> ???????<div class="img"> ???????????<img src="img/alert_blue.png" onmousemove="move(this,‘alert_red.png‘)" onmouseout="out(this)" /> ???????????<img src="img/alert_green.png" /> ???????</div> ???????<p>结束</p> ???????<hr /> ???????<h2>鼠标放在小图上显示大图片</h2> ???????<div> ???????????<img src="img/show1_big.jpg" id="big" /> ???????</div> ???????<div class="buy"> ???????????<ul> ???????????????<li> ???????????????????<img src="img/show1.jpg" id="img1" onmousemove="imgMove(this)" onmouseout="imgOut(this)" /> ???????????????</li> ???????????????<li> ???????????????????<img src="img/show2.jpg" id="img2" onmousemove="imgMove(this)" onmouseout="imgOut(this)" /> ???????????????</li> ???????????????<li> ???????????????????<img src="img/show3.jpg" id="img3" onmousemove="imgMove(this)" onmouseout="imgOut(this)" /> ???????????????</li> ???????????????<li> ???????????????????<img src="img/show4.jpg" id="img4" onmousemove="imgMove(this)" onmouseout="imgOut(this)" /> ???????????????</li> ???????????????<li> ???????????????????<img src="img/show5.jpg" id="img5" onmousemove="imgMove(this)" onmouseout="imgOut(this)" /> ???????????????</li> ???????????</ul> ???????</div> ???????<hr /> ???????<h2>键盘事件</h2> ???????<div> ???????????<h2>按回车提交表单</h2> ???????????<form action="https://y.qq.com" method="post"> ???????????????用户名：<input type="text" name="uname" id="uname" value="" /> ???????????????<br /> 密 码: ???????????????<input type="password" name="upwd" ??id="upwd" value="" /> ???????????????<br /> ???????????????<input type="submit" id="" name="" value="Submit" /> ???????????????<br /> ???????????????<input type="reset" value="reset" /> ???????????</form> ???????</div> ???????<hr /> ???????<h2>表单验证</h2> ???????<div align="center"> ???????????<h1>用户注册信息</h1> ???????????<form action="https://www.baidu.com" method="get"> ???????????????<table align="center" border="2px" cellspacing="0" cellpadding=""> ???????????????<tr align="center"> ???????????????????<td>用户名</td> ???????????????????<td> ???????????????????????<input type="text" name="username" onblur="n()" id="username" value="" /> ???????????????????</td> ???????????????????<td> ???????????????????????<span id="use"> ????????????????????????</span> ???????????????????</td> ???????????????</tr> ???????????????<tr align="center"> ???????????????????<td>密码</td> ???????????????????<td> ???????????????????????<input type="password" onblur="if(this.value==‘‘){this.value=‘我是默认值‘}" name="pwd" id="pwd" value="" /> ???????????????????</td> ???????????????????<td> ???????????????????????<span id="use1"> ???????????????????????????</span> ???????????????????</td> ???????????????</tr> ???????????????<tr align="center"> ???????????????????<td>确认密码</td> ???????????????????<td><input type="password" name="repwd" id="repwd" value="" /></td> ???????????????????<td><span id="user"> ???????????????????????????????????????????</span></td> ???????????????</tr> ???????????????????????????????<tr align="center"> ???????????????????<td>年龄</td> ???????????????????<td> ???????????????????????<input type="text" name="age" id="age" value="" /> ???????????????????</td> ???????????????????<td> ???????????????????????<span id="use2"> ???????????????????????????</span> ???????????????????</td> ???????????????</tr> ???????????????<tr align="center"> ???????????????????<td>性别</td> ???????????????????<td> ???????????????????????<input type="radio" name="sex" id="sex" value="" />男 ???????????????????????<input type="radio" name="sex" id="sex" value="" />女 ???????????????????</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>学历</td> ???????????????????<td> ???????????????????????<select name="study" id="selected"> ???????????????????????????<option value="0">请选择</option> ???????????????????????????<option value="1">本科</option> ???????????????????????????<option value="2">专科</option> ???????????????????????????<option value="3">初中</option> ???????????????????????</select> ???????????????????</td> ???????????????</tr> ???????????????<tr align="center"> ???????????????????<td >备注</td> ???????????????????<td><textarea name="remark" id="remark" rows="15" cols="30"></textarea></td> ???????????????</tr> ???????????????<tr align="center"> ???????????????????<td colspan="2"><input type="submit" id="submit" name="" value="注册" onclick="return validate()"/> ???????????????????<input type="reset" name="reset" id="" value="取消" /></td> ???????????????<td> ???????????????????????<span id="use3"> ???????????????????????????</span> ???????????????????</td> ???????????????</tr> ???????????????????????????</table> ???????????</form> ???????</div> ?????</body></html>2018.7.6 ?js实现点击事件---点击小图出现大图---时间定时器----注册表单验证
原文地址：https://www.cnblogs.com/qichunlin/p/9275938.html