魔幻计时器

最新推荐文章于 2024-06-05 23:47:03 发布

个案命题

最新推荐文章于 2024-06-05 23:47:03 发布

阅读量465

点赞数

本文链接：https://blog.csdn.net/jzf2003428036/article/details/9471003

版权

对于FF、Chrome、IE的js时间的年份，用date.getFullYear()即可。

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
	<title>
	进度条
	</title>
	<script type="text/javascript">
	var dateNow;
	var dateStart = new Date();
	var dateEnd = new Date();
	var table;
	var div;
	var sumTime;
	var pos = 0;
	var timer, timer1;
	var wi;
	window.onload = function() {
	timer = document.getElementById("timer");
	timer1 = document.getElementById("timer1");
	//获取表格对象
	table = document.getElementById("table");
	div = document.getElementById("div");

	//给开始时间赋值
	dateStart.setFullYear(dateStart.getFullYear(), dateStart.getMonth(), dateStart.getDate());
	dateStart.setHours(9, 0, 0, 0);

	//给结束时间赋值
	dateEnd.setFullYear(dateStart.getFullYear(), dateStart.getMonth(), dateStart.getDate());
	dateEnd.setHours(17, 30, 0, 0);
	//给总时间赋值
	sumTime = dateEnd.getTime() - dateStart.getTime();
	window.setInterval(timerer,10);
	wi = window.setInterval(callMe, 10);

	};
	function callMe() {
	dateNow = new Date();
	var nowTime = dateNow.getTime() - dateStart.getTime();
	//alert(sumTime + "\n" + nowTime);
	pos = parseInt(div.style.width) * (nowTime / sumTime);

	table.style.width = pos + "px";

	var temp = parseInt((sumTime - nowTime)/1000);
	if(temp > 0) {
	timer1.innerHTML = "亲，只剩 " + temp + " 秒工作时间了哦";
	} else {
	timer1.innerHTML = "亲，回家吧，貌似已经下班了啊";
	window.clearInterval(wi);
	}

	}

	function timerer() {
	var timerers = new Date();
	var year = timerers.getFullYear();
	var month = timerers.getMonth() + 1;
	var day = timerers.getDate();
	var hour = timerers.getHours();
	var minute = timerers.getMinutes();
	var second = timerers.getSeconds();

	timer.innerHTML ="当前时间：" + formatter(year) + "-" + formatter(month) + "-" + formatter(day)
	+ " " + formatter(hour) + ":" + formatter(minute) + ":"
	+ formatter(second);
	}

	function formatter(num) {
	var numbers = "";
	if (num > 9) {
	numbers = num;
	} else {
	numbers = "0" + num;
	}
	return numbers;
	}
	</script>
	</head>
	<body style="text-align:center">
	<p style="font-size:50px; font-family:'微软雅黑'">魔法时间计量器</p><br /><br /><br />
	<div style="width:1001px; height:140px; margin:auto; background-color:#eeeeee">
	<font color="blue" id="timer1"style="font-size:60px;"></font><br />
	<font color="blue" id="timer"style="font-size:20px;"></font>
	<div id="div" style="width:1000px; border:2px solid yellow; margin:auto; text-align:left; background-color:red">
	<table id="table" bgcolor="green"cellspacing="0"style="width:0px; height:20px">
	<tr>
	<td>
	</td>
	</tr>
	</table>
	</div>
	</div>
	<br /><br />
	<font color="red">红色部分代表剩余的上班时间</font><br /><br />
	<font color="green">绿色代表已经过去的时间</font>
	</body>
	</html>

个案命题

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
魔幻计时器

对于FF、Chrome、IE的js时间的年份，用date.getFullYear()即可。 http-equiv="Content-Type" content="text/html;charset=gb2312" /> 进度条 type="text/javascrip
复制链接

扫一扫