js电子时钟_仿真电子钟 js-CSDN博客

本文链接：https://blog.csdn.net/weixin_45934659/article/details/106125038

今天给大家看一下一个电子时钟，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery电子时钟-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
body {
	background:#202020;
	font:bold 12px 'Microsoft Yahei',Helvetica,sans-serif;
	margin:0;
	padding:0;
	color:#bbbbbb;
}
a {
	text-decoration:none;
	color:#00c6ff;
}
/* clock */
.clock {
	width:800px;
	margin:0 auto;
	padding:30px;
	border:1px solid #333;
	color:#fff;
	margin-top:50px;
}
.clock #Date {
	font-family:'Microsoft Yahei',Arial,Helvetica,sans-serif;
	font-size:36px;
	text-align:center;
	text-shadow:0 0 5px #00c6ff;
}
.clock ul {
	width:800px;
	margin:0 auto;
	padding:0px;
	list-style:none;
	text-align:center;
}
.clock ul li {
	display:inline;
	font-size:10em;
	text-align:center;
	font-family:'Microsoft Yahei',Arial,Helvetica,sans-serif;
	text-shadow:0 0 5px #00c6ff;
}
#point {
	position:relative;
	-moz-animation:mymove 1s ease infinite;
	-webkit-animation:mymove 1s ease infinite;
	padding-left:10px;
	padding-right:10px;
}
@-webkit-keyframes mymove {
	0% {
	opacity:1.0;
	text-shadow:0 0 20px #00c6ff;
}
50% {
	opacity:0;
	text-shadow:none;
}
100% {
	opacity:1.0;
	text-shadow:0 0 20px #00c6ff;
}
}@-moz-keyframes mymove {
	0% {
	opacity:1.0;
	text-shadow:0 0 20px #00c6ff;
}
50% {
	opacity:0;
	text-shadow:none;
}
100% {
	opacity:1.0;
	text-shadow:0 0 20px #00c6ff;
}
}</style>
</head>
<body>
<div class="clock">
    <div id="Date"></div>
    <ul>
        <li id="hours"></li>
        <li id="point">:</li>
        <li id="min"></li>
        <li id="point">:</li>
        <li id="sec"></li>
    </ul>
</div>

<script>
$(document).ready(function() {

	// 创建两个变量，一个数组中的月和日的名称
	var monthNames = [ "1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月" ]; 
	var dayNames= ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]

	// 创建一个对象newDate（）
	var newDate = new Date();
	// 提取当前的日期从日期对象
	newDate.setDate(newDate.getDate());
	//输出的日子，日期，月和年
	$('#Date').html(newDate.getFullYear() + " 年 " + monthNames[newDate.getMonth()] + ' ' + newDate.getDate() + ' 日 ' + dayNames[newDate.getDay()]);

	setInterval( function() {
		// 创建一个对象，并提取newDate（）在访问者的当前时间的秒
		var seconds = new Date().getSeconds();
		//添加前导零秒值
		$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
	},1000);
	
	setInterval( function() {
		// 创建一个对象，并提取newDate（）在访问者的当前时间的分钟
		var minutes = new Date().getMinutes();
		// 添加前导零的分钟值
		$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
	
	setInterval( function() {
		// 创建一个对象，并提取newDate（）在访问者的当前时间的小时
		var hours = new Date().getHours();
		// 添加前导零的小时值
		$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
	
}); 
</script>

</body>
</html>