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("验证失败");

		}

}

巴特西

dom事件操作例题，电子时钟，验证码，随机事件

最新文章

热门文章