8.11、8.12 js提示框和计时器

最新推荐文章于 2019-04-20 17:25:03 发布

RookieRocket

最新推荐文章于 2019-04-20 17:25:03 发布

阅读量701

点赞数 1

本文链接：https://blog.csdn.net/RookieRocket/article/details/38496201

版权

今天开始做一些实践练习，主要还是js方面的内容：

1、js的消息框的使用：

警告框 alert("文本")

确认框 confirm("文本")

提示框 prompt("文本","默认值")

2、练习了一些时间日期有关的内容

3、完成一个时钟的小DEMO，代码如下

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
	function startTime() {
		var today = new Date();
		var month = today.getMonth()+1;
		var year = today.getFullYear();
		var date = today.getDate();
		var d = today.getDay();
		var h = today.getHours();
		var m = today.getMinutes();
		var s = today.getSeconds();  
		var weekday=new Array(7);
		weekday[0]="星期日";
		weekday[1]="星期一";
		weekday[2]="星期二";
		weekday[3]="星期三";
		weekday[4]="星期四";
		weekday[5]="星期五";
		weekday[6]="星期六";
		m=checkTime(m);
		s=checkTime(s);
		document.getElementById('clock').innerHTML= year+'年'+month+'月'+date+'日'+' '+weekday[d]+'</br>'+
			h+':'+m+':'+s;
		t=setTimeout('startTime()',500);
	}
	function checkTime(i){
		if (i<10) 
	  	{i="0" + i}
	  	return i
	}
	</script>
</head>

<body onload = "startTime()">
	<div id = "clock"> </div>
</body>

</html></span></span>

4、编写了一个计时器，但是还不完善，暂停再开始时，计时会有问题。

-----------------------------------------------12号更新-----------------------------------------------------------

今天继续完善计时器，内容如下：

1、修改代码，排除按下暂停键计时不停止的bug

2、原来做的是按时分秒计时，又在下方增加了一个百秒计时器，用延时函数实现的，代码如下

<span style="font-family:SimHei;font-size:14px;">	//100秒的计时器，通过延时函数实现
	var T2;//延时函数id
	var s1=0,s2=0,s3=0;//秒数第一、二、三位
	var j=0;
	function timerStart2 () {
		s1+=1;
		//进位
		if (s1==10) {
			s2+=1
			s1=0;
			if (s2==10) {
				s3+=1;
				s2=0;
				if (s3==10) {
					timerStop2();
				};
			};
		}
		document.getElementById('text2').value =s3.toString()+s2.toString()+s1.toString();
		T2=setTimeout('timerStart2()',1000)
	}
	
	function timerStop2 () {
		clearTimeout(T2);
		s1=0;
		s2=0;
		s3=0;
		j=0;
		document.getElementById('text2').value = "000";
	}
	function timerPause2 () {
		clearTimeout(T2);
	}</span><span style="color:#6666cc;font-weight: bold; font-family: 'Microsoft YaHei'; font-size: 18px;">
</span>

3、为每个计时器分别添加一个框和标题

4、添加了按钮按下后禁止的功能防止非法操作。最初状态是开始可按，暂停、停止不可按下，按下开始后，开始键不可按下，暂停、停止变为可按状态。之后若再按下暂停键，开始键、停止键会变到可按状态，暂停键不可按；若按下停止键，则回复最初的状态。如下图

初始状态

按下开始键后

若按下暂停键

若按下停止键

5、完整代码

<span style="font-family:SimHei;font-size:14px;"><!DOCTYPE html>
<html>
<head>

	<style type="text/css">

div
{
	width:65%;
	margin:0 auto;

}
#clock {
	color:#8bb544;
	text-transform:uppercase;
	letter-spacing:-.05em;
	position:relative;	
    font-size: 30px;
  }
#timer
{
	border-style: solid;
	border-color: pink;
	padding:0px 0px 10px 10px;
}
#timer100
{
	border-style: solid;
	border-color: pink;
	padding:0px 0px 10px 10px;
}
</style>

	<script type="text/javascript">

	function forbid(obj)
   {  
   
   	switch (obj){
   		case 'initial':  btnStop.disabled=true;
   						btnPause.disabled=true;
   						btnStop2.disabled=true;
   						btnPause2.disabled=true;
   						break;
   		case 'btnStart':  btnStart.disabled=true;
   						btnPause.disabled=false;
   						btnStop.disabled=false;
   						break;
   		case 'btnPause':  btnStart.disabled=false;
   						btnPause.disabled=true;
   						break;
   		case 'btnStop':   btnStart.disabled=false;
   						btnPause.disabled=true;
   						btnStop.disabled=true;
   						break;
   		case 'btnStart2':  btnStart2.disabled=true;
   						btnPause2.disabled=false;
   						btnStop2.disabled=false;
   						break;
   		case 'btnPause2':  btnStart2.disabled=false;
   						btnPause2.disabled=true;
   						break;
   		case 'btnStop2':  btnStart2.disabled=false;
   						btnPause2.disabled=true;
   						btnStop2.disabled=true;
   						break;
   		
   	}
   
   }

	//显示系统当前日期时间
	function startTime() {
		var today = new Date();
		var month = today.getMonth()+1;
		var year = today.getFullYear();
		var date = today.getDate();
		var d = today.getDay();
		var h = today.getHours();
		var m = today.getMinutes();
		var s = today.getSeconds();  
		var weekday=new Array(7);
		weekday[0]="星期日";
		weekday[1]="星期一";
		weekday[2]="星期二";
		weekday[3]="星期三";
		weekday[4]="星期四";
		weekday[5]="星期五";
		weekday[6]="星期六";
		m=checkTime(m);
		s=checkTime(s);
		document.getElementById('clock').innerHTML= year+'年'+month+'月'+date+'日'+' '+weekday[d]+'</br>'+
			h+':'+m+':'+s;
		t=setTimeout('startTime()',500);
	}
	function checkTime(i){
		if (i<10) 
	  	{i="0" + i}
	  	return i
	}

	//计时器，通过调用系统时间实现
	var t0,t1,t2,T;
	var start = 0,pause = 0;    //开始、结束标志
	var totalSecs = 0;     //总时间
	var	pauseSecs = 0;      //暂停时间

	function timerStop () {
		clearTimeout(T);
		start=0;
		pauseSecs=0;
		document.getElementById('text').value = "00:00:00";
	}
	function timerPause () {
		t1 = new Date();   //记录暂停前的时间
		clearTimeout(T);
		pause = 1;
	}

	function timerStart () {
		//如果刚刚开始计时，则记录开始前的时间
		if (!start) {t0 = new Date();}
		//如果刚刚经过暂停，则累计暂停时长
		if (pause) {
			pauseSecs += (new Date()-t1)/1000;
			pause = 0;
		}
		totalSecs = (new Date()-t0)/1000-pauseSecs;
		var days=Math.floor(totalSecs/3600/24);
 		var hours=Math.floor((totalSecs-days*24*3600)/3600);
 		var mins=Math.floor((totalSecs-days*24*3600-hours*3600)/60);
 		var secs=Math.floor((totalSecs-days*24*3600-hours*3600-mins*60));
 		hours=checkTime(hours);
		secs=checkTime(secs);
		mins=checkTime(mins);
 		document.getElementById('text').value = hours+":"+mins+":"+secs;
 		start = 1;
 		T=setTimeout('timerStart()',500);	
	}

	//100秒的计时器，通过延时函数实现
	var T2;//延时函数id
	var s1=0,s2=0,s3=0;//秒数第一、二、三位
	var j=0;
	function timerStart2 () {
		s1+=1;
		//进位
		if (s1==10) {
			s2+=1
			s1=0;
			if (s2==10) {
				s3+=1;
				s2=0;
				if (s3==10) {
					timerStop2();
				};
			};
		}
		document.getElementById('text2').value =s3.toString()+s2.toString()+s1.toString();
		T2=setTimeout('timerStart2()',1000)
	}
	
	function timerStop2 () {
		clearTimeout(T2);
		s1=0;
		s2=0;
		s3=0;
		j=0;
		document.getElementById('text2').value = "000";
	}
	function timerPause2 () {
		clearTimeout(T2);
	}
	</script>
</head>

<body onload = "startTime();forbid('initial')">
	<div id="Container">
		<div id="content">
			<div id = "clock"> </div>
			<div id = "timer">
				<h1>时分秒计时器</h1>
				<input type="text" id="text" value="00:00:00" readonly></input>
				<input type="button" id="btnStart" value="开始" οnclick="forbid(id);timerStart()" ></input>
				<input type="button" id="btnPause" value="暂停" οnclick="forbid(id);timerPause()" ></input>
				<input type="button" id="btnStop" value="停止" οnclick="forbid(id);timerStop()" ></input>
			</div>
			<div id = "timer100">
				<h1>百秒计时器</h1>
				<input type="text" id="text2" value="000" readonly></input>
				<input type="button" id="btnStart2" value="开始" οnclick="forbid(id);timerStart2()" ></input>
				<input type="button" id="btnPause2" value="暂停" οnclick="forbid(id);timerPause2()" ></input>
				<input type="button" id="btnStop2" value="停止" οnclick="forbid(id);timerStop2()" ></input>
			</div>
		</div>
	</div>
</body>

</html></span><span style="color:#6666cc;font-family: 'Microsoft YaHei'; font-weight: bold; font-size: 18px;">
</span>

心得：

计时器一开始就选择了一个比较复杂的方案：按下开始时，记录当前的的系统时间作为一个基准时间，然后随着计时的进行，不断调用系统时间，再减去基准时间获得的就是计时数。其实，只是正计时的话，用延时函数，设置成每1000ms记1就可以了。于是后果就是，使用时间函数的时候不断出现问题，用getHours()这类函数运算总是NaN，最后查到new Date()也可以运算，与除以1000可以得到分钟数，用这种方法解决了问题。
唉，日期时间函数远没有看起来那么简单啊~自己的理解也会跟实际有出入的，正所谓纸上得来终觉浅，绝知此事要躬行啊！