等待下班JS倒计时

发表日期：2017-05-24 文章编辑：南昌开优网络浏览次数：4589 标签：JS应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时显示-细数即将逝去的过往</title>

<style type="text/css">
#clock {
font: bold 24pt sans;
background-color: #f5f5f5;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
#todaydatetime {
font: bold 24pt sans;
background-color: #f5f5f5;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.demo 
{
margin:0,auto;
}
div.example{width:8%;margin:0 auto;padding:5px;border:1px solid #d4d4d4;}
</style>

</head>
<body>

<div class="demo">
<center>
<h1>下班倒计时显示</h1>
</center>

<center>
<span id="todaydatetime"></span>
<br>
<br>
<span id="clock"></span>
</center>
</div>
<br>
<br>
<div >
	<script>
		var H='....';
		var H=H.split('');
		var M='.....';
		var M=M.split('');
		var S='......';
		var S=S.split('');
		var Ypos=0;
		var Xpos=0;
		var Ybase=8;
		var Xbase=8;
		var dots=12;

		function clock(){
		var time=new Date ();
		var secs=time.getSeconds();
		var sec=-1.57 + Math.PI * secs/30;
		var mins=time.getMinutes();
		var min=-1.57 + Math.PI * mins/30;
		var hr=time.getHours();
		var hrs=-1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
		for (i=0; i < dots; ++i){
		document.getElementById("dig" + (i+1)).style.top=0-15+40*Math.sin(-0.49+dots+i/1.9).toString() + "px";
		document.getElementById("dig" + (i+1)).style.left=0-14+40*Math.cos(-0.49+dots+i/1.9).toString() + "px";
		}
		for (i=0; i < S.length; i++){
		document.getElementById("sec" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(sec).toString() + "px";
		document.getElementById("sec" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(sec).toString() + "px";
		}
		for (i=0; i < M.length; i++){
		document.getElementById("min" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(min).toString() + "px";
		document.getElementById("min" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(min).toString() + "px";
		}
		for (i=0; i < H.length; i++){
		document.getElementById("hour" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(hrs).toString() + "px";
		document.getElementById("hour" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(hrs).toString() + "px";
		} 
		setTimeout('clock()',50);
		}
		window.onload=clock;
</script>
	<style type="text/css">
		div.dig, div.hour, div.min, div.sec
		{
		position:absolute;
		}
		div.hour, div.min, div.sec
		{
		width:2px;
		height:2px;
		font-size:2px;
		}
		div.dig
		{
		width:30px;
		height:30px;
		font-family:arial,verdana,sans-serif;
		font-size:10px;
		color:#000000;
		text-align:center;
		padding-top:10px
		}
		div.min
		{
		background:#0000FF;
		}
		div.hour
		{
		background:#000000;
		}
		div.sec
		{
		background:#FF0000;
		}
	</style>
	<div class="example" >
		<div style="width:100px;height:100px;position:relative;left:58px;top:50px;">
			<div id="dig1" class="dig" style="top: -49.823px; left: 5.6814px;">1</div>
			<div id="dig2" class="dig" style="top: -35.2232px; left: 20.5112px;">2</div>
			<div id="dig3" class="dig" style="top: -15.1496px; left: 25.9997px;">3</div>
			<div id="dig4" class="dig" style="top: 4.96459px; left: 20.6614px;">4</div>
			<div id="dig5" class="dig" style="top: 19.6749px; left: 5.94126px;">5</div>
			<div id="dig6" class="dig" style="top: 24.9996px; left: -14.1765px;">6</div>
			<div id="dig7" class="dig" style="top: 19.4976px; left: -34.2464px;">7</div>
			<div id="dig8" class="dig" style="top: 4.65796px; left: -48.8363px;">8</div>
			<div id="dig9" class="dig" style="top: -15.5025px; left: -53.9968px;">9</div>
			<div id="dig10" class="dig" style="top: -35.527px; left: -48.3314px;">10</div>
			<div id="dig11" class="dig" style="top: -49.9953px; left: -33.3734px;">11</div>
			<div id="dig12" class="dig" style="top: -54.9914px; left: -13.1715px;">12</div>

			<div id="hour1" class="hour" style="top: 0px; left: 0px;"></div>
			<div id="hour2" class="hour" style="top: -7.51972px; left: -2.73017px;"></div>
			<div id="hour3" class="hour" style="top: -15.0394px; left: -5.46035px;"></div>
			<div id="hour4" class="hour" style="top: -22.5592px; left: -8.19052px;"></div>

			<div id="min1" class="min" style="top: 0px; left: 0px;"></div>
			<div id="min2" class="min" style="top: 4.00552px; left: 6.92502px;"></div>
			<div id="min3" class="min" style="top: 8.01103px; left: 13.85px;"></div>
			<div id="min4" class="min" style="top: 12.0165px; left: 20.775px;"></div>
			<div id="min5" class="min" style="top: 16.0221px; left: 27.7001px;"></div>

			<div id="sec1" class="sec" style="top: 0px; left: 0px;"></div>
			<div id="sec2" class="sec" style="top: -6.92502px; left: 4.00552px;"></div>
			<div id="sec3" class="sec" style="top: -13.85px; left: 8.01103px;"></div>
			<div id="sec4" class="sec" style="top: -20.775px; left: 12.0165px;"></div>
			<div id="sec5" class="sec" style="top: -27.7001px; left: 16.0221px;"></div>
			<div id="sec6" class="sec" style="top: -34.6251px; left: 20.0276px;"></div>
		</div>		
	</div>
</div>
<script>
var hourtime=prompt("输入下班时间，如下： ","17:30:00");
function displayTime() {
var elt = document.getElementById("clock");
var elt2 = document.getElementById("todaydatetime");
if(leftTime < 0) 
{
elt.innerHTML = "Over";
}
 else 
{
//var endTime = new Date("2016/12/30 17:30:00");
var endTime =new Date(new Date().toLocaleDateString()+" "+hourtime);
var now = new Date();

var nowYear=now.getFullYear();
var nowMonth=now.getMonth()+1;
var nowDay=now.getDate();

var leftTime = endTime.getTime() - now.getTime();
var ms = parseInt(leftTime % 1000).toString();
leftTime = parseInt(leftTime / 1000);
var o = Math.floor(leftTime / 3600);
var d = Math.floor(o / 24);
var m = Math.floor(leftTime / 60 % 60);
var s = leftTime % 60;

elt2.innerHTML = nowYear + " 年 " + nowMonth + " 月 " + nowDay + " 日 ";
//elt.innerHTML = nowYear + " 年 " + nowMonth + " 月 " + nowDay + " 日 " + o + "小时:" + m + "分:" + s + "秒:" + ms.charAt(0);
elt.innerHTML =o + "小时:" + m + "分:" + s + "秒:" + ms.charAt(0);
setTimeout(displayTime, 100);
}
}
displayTime();
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.kaiu.net/" target="_blank">开优网络</a></p>
</div>
</body>
</html>
返回列表
上一篇：如何在手机浏览器网页中点击链接跳转到QQ... 下一篇：JS浏览器屏蔽右键操作