码迷,mamicode.com
首页 > Web开发 > 详细

js关于Time事件的随笔

时间:2016-08-05 15:25:54      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:

在js中我们可以使用时间设定一段时间后才执行代码,而可以不是触发事件后马上调用方法(函数),这是js中的计时事件!

计时事件中的两个重要方法:

     setTimeout(); 未来设定的时间段执行方法

     clearTimeout(); 清除setTimeout()

下面使用计时事件来完成一个时钟和星期的显示:

function showTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var x = null;
    var d = today.getDay();
    switch(d){
    case 0:{
        x = "星期日";
        break;
    }case 1:{
        x = "星期一";
        break;
    }case 2:{
        x = "星期二";
        break;
    }case 3:{
        x = "星期三";
        break;
    }case 4:{
        x = "星期四";
        break;
    }case 5:{
        x = "星期五";
        break;
    }case 6:{
        x = "星期六";
        break;
    }
    }
    
    m = chackTime(m);
    s = chackTime(s);
    document.getElementById("time1").innerHTML=h+":"+m+":"+s+"<span>"+x+"</span>";
    t = setTimeout(‘showTime()‘,500);//设置了在500毫秒后执行showTime()这个函数,setTimeout()是用来设定在未来的一个时间间隔之后执行代码,而不是在函数被调用后就马上执行。
    
}

/*设置时间的格式是00:00:00*/
function chackTime(i) {
    if(i<10){
        i = "0"+i;
    }
    return i;
}

以上是js,只需在htlm的<body>标签中设置<body onload="showTime()">,即可在HTML中显示时间和星期

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>显示时间和星期</title>
</head>
<body onload="showTime()">
<p id="time1"></p>

</body>
<script type="text/javascript" src="js/show.js"></script>
</html>


同时,我们再以计时事件做一个计时器以加深对计时事件的了解:

var t;
var c = 0;
function timeCount() {
    document.getElementById("timetxt").value = c;
    c=c+1;
    t = setTimeout("timeCount()",1000);
}

function stopCount() {
    c=0
    clearTimeout(t);
}

HTML如下:

<button type="button" onclick="timeCount()">开始计时</button>
<input type="text" id="timetxt">
<button type="button" onclick="stopCount()">停止计时</button>


以上为计时事件的一些知识点。

 

js关于Time事件的随笔

标签:

原文地址:http://www.cnblogs.com/huanght/p/5741091.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!