dom事件操作例题，电子时钟，验证码，随机事件
dom事件操作
当事件发生时，可以执行js
例子：
当用户点击时，会改变<h1>的内容：
<h1 onClick="this.innerHTML='文本更换'">点击文本!</h1>
HTML事件例如：
onclick=""//点击时 onload=""//页面加载完成时 onchage=""//改变时 onmouseover=""//鼠标移入时 onmouseout=""//鼠标移出时 onmousedown=""//鼠标点下去时 onmouseup=""//鼠标松开时
例子：
1.页面开始打开五个新窗口，点击关闭按钮，关闭这五个窗口
<button onClick="closeAll()">关闭</button>
js代码：
var arr = [];
for (var i = 4; i >= 0; i--) {
arr.push(window.open());//打开新页面6
}
function closeAll(){
for (var i =4; i >= 0; i--) {
arr[i].close();//关闭页面
}
}
2.登陆验证
账号：<input type="text"><br> 密码：<input type="password"><br> <button onclick="denglu()">登录</button>
js代码：
function denglu(){
//获取内容
//找到元素
var input = document.getElementsByTagName("input");//找到input元素，为数组
var uid = input[0];
var pwd = input[1];
//获取元素内容
var uidval = uid.value;
var pwdval = pwd.value;
if(uidval == "" || pwdval == ""){
console.log("账号或密码不能为空！");
return;
}
//验证内容
if(uidval == "admin"){
console.log("登录成功！");
}else{
console.log("账号不正确");
}
}
3.表格添加元素
<button id = "add">添加一行</button> <table id="tab" border="1"> <tr> <td> 123 </td> </tr> </table>
js代码：
var tab1=null;
//点击添加方法
window.onload=function(){
tab1= document.getElementById('tab');//获取表格
var add1btn = document.getElementById('add1');//获取按钮
//点击添加事件
add1btn.onclick = function (){
var trplus = document.createElement('tr');//添加标签，新建一行
for (var i = 3; i >= 0; i--) {
var tdplus = document.createElement('td');//新建一个单元格
tdplus.innerHTML = 123;
trplus.appendChild(tdplus);//将新建的td添加到tr中
}
tab1.appendChild(trplus);//将新建的tr添加到table中
}
}
结果：
JS获取日期当前时间日期及其他操作：
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) myDate.getHours(); //获取当前小时数(0-23) myDate.getMinutes(); //获取当前分钟数(0-59) myDate.getSeconds(); //获取当前秒数(0-59) myDate.getMilliseconds(); //获取当前毫秒数(0-999) myDate.toLocaleDateString(); //获取当前日期 var mytime=myDate.toLocaleTimeString(); //获取当前时间 myDate.toLocaleString( ); //获取日期与时间
电子时钟：
时间：<input id="tt" type="text">//html中建立文本框显示时间
js代码：
window.onload=function(){
setInterval(function(){
dianziTime();
},1000);
}
function dianziTime(){
var t = new Date(),//新建一个时间
y = t.getFullYear(),//获取年
m = (+t.getMonth()+1) >= 10 ? +t.getMonth()+1 : "0" +(+t.getMonth()+1),
//获取月份，月份下标是（0-11），与实际日期差1
//三目运算，如果是1位数，前面加0
d = t.getDate(),//获取日
h = t.getHours(),//获取小时
f = t.getMinutes(),//获取分钟
s = t.getSeconds();//获取秒
var str = y+"-"+m+"-"+d+" "+h+":"+f+":"+s;//显示设置
document.getElementById('tt').value = str;//将时间放在id="tt"中
}
结果：
随机事件：
Math.random()方法返回大于等于 0 小于 1 的一个随机数。
随机点名：
var arr = ["温钊","高志伟","边秀通","李智伟","丁昆","张镇潇","刘庆亮","郭浩","李青","任星旭"];//新建数组 var i = parseInt(Math.random()*10); //Math.random()的返回值是在0-1之间的，因为有10个值，所以*10，并取整数，作为数组arr的下标 console.log(i); console.log(arr[i]);
滚动随机抽：
<body>
<button id="start">开始</button>//建立开始按钮
<button id="end">停止</button>//建立结束按钮
<div id="dd" >
</div>//设置一块区域，中间内容显示名字
</body>
js代码：
var setDom = null;//定时器
var n = 0;//数组下标
var divDom = null, //显示div
startDom = null, //开始按钮
endDom = null;//结束按钮
window.onload = function(){
initDom(); //初始化变量
addEvent();//添加事件
}
var arr = ["温钊","高志伟","边秀通","李智伟","丁昆","张镇潇","刘庆亮","郭浩","李青","任星旭"];//新建数组
function initDom(){
divDom = document.getElementById('dd');//找到区域
startDom = document.getElementById('start');//找到开始按钮
endDom = document.getElementById('end');//找到结束按钮
}
function addEvent(){
//开始事件
startDom.onclick = function(){
//点击运行方法
setDom = setInterval(function(){
//建立一个定时器，每1毫秒显示一次
divDom.innerHTML = arr[n];
//将arr[0]中的内容赋值给div
n++;
if(n >= 10){
n = 0;
}
//当n=10时，运行完一边，设置n=0，再重新循环
},1);
}
//结束事件
endDom.onclick = function(){
clearInterval(setDom);//清除定时器
}
}
验证码获取并验证：
验证码：<input id="yzmVal" type="text">
<span id="yzm">加载中...</span>
<button id="yz" onClick="yanzDom()">验证</button>
js代码
window.onload = function(){
yzmFun();
yanzDom();
var yanzhengm =document.getElementById('yzm').innerHTML;
}
function yzmFun(n=4){
//设置输出4个验证码
var str = "0123456789";//建立字符串0-9
var sjs = "";//设置输出内容
for(var i =0;i<n;++i){
sjs += str.substr(Math.random()*str.length,1);
//建立随机数，提取字符串内容，给sjs，共四次
}
document.getElementById('yzm').innerHTML= sjs;//将内容给<span>
}
function yanzDom(){
if($('#yzmVal').val()==$('#yzm').html()){
alert("验证成功");
}else{
alert("验证失败");
}
}
浙公网安备 33010602011771号