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中
 
    }
}

　　

结果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAABMCAIAAAAX5Ek1AAAEhklEQVR4nO2dzW7iVhSA7wPlObDBC3Y8C8Fk0h0v4D/MjwCpcZYhgTBRHoCNE2WYkFEWRW2xgAo6mmmrbtuFf7DNvQEq+7pz5nwb379zjzkftlESFPIPAg6S9QkgyYNSAYJSAYJSAUKXOpvNLi8vf/z2sSxrNptxrmnm0KVeXFz8DQXLsjjXNHPoUnu93l9Q6PV6nGuaOUypf0IBpXp0u90/oNDtdjnXNHPoUjudzlcodDodzjXNHKbUL1TuzwmRWq9+k8L5vb/2tSV5S5Pj/lxqvX55bUlv5I2BUj3a7fZnJnfvCHl3F+mHuwGfmoVC8xN7n6P5bxu2223ONc0cptTfD+SlUSg0Xg6ZeWkUQlcWI4jJ3RkhZ3dHhbigVI9Wq7Wh8f6MkLP3fotK3pxuNlMzvzs6NfNu7GYzNfN5c0pNQSVYf2zgZrNptVqca5o5dKnNZnPN4NnMk7z5vO1UR+v1qEqqI8pKd+Gzma+OgkNk6jjcsFGV/nbaPYP1er1eN5tNzjXNHLrURqPx234+GiKRb932rRw0Q9Oi8dFtyLfBITJ1DLcyoQRREkdpNBqca5o5dKmmaa72MJQJEY3JajWUiTxcrVYTQ3QHfCaG6PYnhigPg0N4aigzbuIR5OFqYoiEkOj+wXn4u9IxTZNzTTOHKXXJYlAhFV0XSWWw7Q+2c5GO2/6gi5VBcPBGRP0DMwU154AeFE5PBaV61Ov1BYObCqncLBaLxeJJE0jlZnFTIRVNEwRNqxBBewov9LpeyJMmeJGLJ00ILz0MetD2fBjU63XONc0culTDMBw6j6pweu04juNcnxJBfXSc61Nyev2oCoL66A+Fpx1vRTjUcZczUrCgB3mbszEMg3NNM4cuVdf1OZUHJZdTHtwGKffn8/m8Xyblvt/vl0lOeZjP+2XiTW9jHpRc6EHpbnMMQe69gxF0Xedc08yhS9U07VcatpLLKbbfuyr7fuydZaR8FV9gK7nyFW2fA4kE2dt3iL8pA03TONc0c5hSf4ECSvVQVfVnKKiqyrmmmUOXqijKDAqKonCuaeYwb78/QQFvvx62beu6rnz7aJpm2zbnmmYOXeoP3CmVSpxfOWCYUjmfx8nJCeeMgEGpANkj9SRlJEkKEnF6xd8B+6Wmmp5bou8KlAoQlAoQlAoQlAoQlAqQ46UurSKpjWOD41ro999Fa8mcjEWi1DQ4SmpgJ6ZmXAuJXFrF8IqlVQy3Y8EoNQ0OljquuTqWVnFHaow3loxr0QsZpabB0bdflPr/Jw2pcXNvTKDUNEhcqvvcDKtzR2ifoFBqOiQr1fskxZrGD0p8SEyqfz1S77tbYndglJoGyUj1jL79qKWFo9Q0SELq0iruvUJ98ErlQAJS9zxlQwrxmcqHpKTu4suMTMfdo9Q0wB/oAwSlAgSlAgSlAgSlAmSPVEmSkv6CRRw3EUpNEPwLfYCgVIDQpZZKpaS/YLEfzq8cMPgvTACCUgGCUgGCUgGCUgGCUgGCUgGCUgGCUgGCUgGCUgGCUgGCUgGCUgGCUgGCUgGCUgHyL+K/BXx7AThgAAAAAElFTkSuQmCC" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALsAAABgCAIAAADKC5TRAAAFWUlEQVR4nO2bTVPiSBjH+wP5OXiRAzc+xvIOIdFxD1B+AUQKxzNX39CxPHHyopaTUac8zNbOQAFbsFuzL7XX3UMIhPAEbelkOl3/3yXpdD/5x+ZXoauw2X8A8MB+9AOAkAFjAB8wBvABYwAfMAbwQRhjmmatVjPCT61WM00z+DlVG8KYarX6rypUq9Xg51RtCGN0Xf9HFXRdD35O1YYwplKp/K0KlUol+DlVG9qYv1QBxgiHMEbTtD9VQdO04OdUbWhjvpNc7TCWOHy2Twl2ruyxz4eJ6VBxXO0kDp+/Px8mVuS6gDHCIYwpl8t/eHL5jrF3lwttZ3PG5/ebm+8/e9+Hm7fdsFwuBz+nakMYUyqVfn8lTwebmwdPr+l5Oth0vBM8ijy53GZs+5KrxKJUKgU/p2pDGzOh+LDN2PYH+4wk3nqcTB5b8eWrj624VTuZPLbi8dYjGUEyG89bOJlMYIxwCGOKxeLYg4dWnMVbD/PG1sV4fLHFti6IkdbAh1Z862J2WOjiwyq72KJdXX6C8Xg8HheLxeDnVG0IYwqFwm8v86kZY8a5dX5uzE4d3bHmJ+vEOJ8dFrp4ODcYUUQEL1IoFIKfU7WhjRm9QMdgLNY0R6OOwYzOaDQymzHrgo3ZjFltsxkzOrODs6tjeHy3LWB0RmYzxhhbvP/sOey70sAY4RDG5PP5oRdnOtP392NMP5u3z+Z9Cw3r/ON+TD+bHaZXYvsfPSPIzDO6yBlPks/ng59TtaGNGXhwqjP9dDAYDAb3jSjTTwenOtMbjWi00dBZtHHvHDhtTkvuG9Fp5eC+EXUOfR100fx5PIAxwiGMyeVyfZq7vWjlpN/v9/snFRbdu+v3TyqscnK3F43u3dmXnN396Qhnad8a7hHhBV00vbk3uVwu+DlVG8KYbDbbI7mtRyL1W+uEace9Xq93rDHt2G4fayxSv+31jjU27Z7X3NYjjsWJdRseZtkvXlwgm80GP6dqQxvzjeKmHonUb+zWkWZ/+DdLw5h25B5wU49oR9R9XslC0c1cP/umHsAY4RDGZDKZr6qQyWSCn1O1oY35VRVgjHAIY9Lp9C+qkE6ng59TtaF/u/6iCvjtWjiEMd1uV9O0n8JPuVzudrvBz6naEMb8DMJDKpWSwpiAHwK8mY2NjYATYUy4kcuYDZ9JJBLB/rEKIp0xvmbjZbY+MAbwAWMAHzAG8AFjAB8wBvAhvTHDdpLtXrsuXu86/lkq2R56droqYcz6yGzM7KN3fe7Xuw5Lhu2kc8SwnXSeu4phzPrIasz1rvVZD9vJJWNcrBhyvbv4CoIx6yOrMTYwRjYUMMatxYoOGLM+YTfGWqs4vbCuUEtiGCOCUBszXRp7dWPl6wdhNcZ+k5BfR3NcX0wwZn1CacxUl9XLG6ocxqxPCI0ZtpMvvlts8I4RTviMeWFl4/AD6xg/CKkxy9imLHS7xYIx6yO7MWKBMesDYwAfMAbwAWMAHzAG8CGXMYlEQvSmTzfB/rEKIpcxQH5gDOBDLmNE75p1M9tFi6B1gvwVZAkpVr4IkjZoGRiDID5gDIL4gDEI4gPGIIgPGIMgPqTYRYsgkUE+I8UuWgQJCgoCKXbRIkhAUFBIsYsWQQKD/EaKXbQIEhjkN1LsokWQwCC/kWIXLYIEBvmNFLtoESQwyG+k2EWLIIFBfiPFLloECQzyGyl20SJIYJDfCDFmGb5dtAgSGOQ3+CUSQXzAGATxAWMQxAeMQRAfMAZBfKwyJrBdtAh6c5BcxgD5gTGADymMSaVSGyA8/HhjAFgBjAF8wBjAB4wBfMAYwAeMAXzAGMAHjAF8wBjAx//grwssn4ifPgAAAABJRU5ErkJggg==" alt="" />

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"中
 
}

　　

结果：
aaarticlea/png;base64,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" alt="" />

随机事件：
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("验证失败");
		}
}