使用jQuery在浏览器右上角显示时钟

初学者练习题:

使用jQuery在浏览器右上角显示时钟.

最终的效果如下图:

如何实现分析:

首先我们需要获取到当前的时间 ---- 其次在拿到我们要在页面显示的字符串 ----通过jQuery的事件绑定实现最终的效果.

实现效果的代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				width:960px;
				height: 600px;
				margin: 30px auto;
			}
			#timer{
				width: 400px;
				height: 40px;
				font: 20px/40px arial ,"微软雅黑";
				float: right;
				color: white;
				text-align: center;
				background-color: coral;
			}
			#button{
				clear: both;
				float: right;
			}
			#ok{	
				width: 60px;
				height: 30px;
				font: 14px/30px arial ,"微软雅黑";	
			}
		</style>
	</head>
	<body>
		<div id="timer"></div>
		<div id="button">
			<button id="ok">暂停</button>
		</div>
		<script src='js/jquery.min.js'></script>
		<script>
			//定义显示时间样的是函数
			function showTime(){
					var date = new Date();
					var timeStr = date.getFullYear() +'年';
					var month = date.getMonth() + 1;
					timeStr += month < 10 ? '0':'' ;  //判断获得的月份时候是两位数不是在前面补零.三元条件运算符 - 问号前面的条件如果成立取冒号前面的值否则取冒号后面的值
					timeStr += month +'月';
					var day = date.getDate();
					timeStr += day < 10 ? '0': '';
					timeStr += day + '日  ';
					var weekdays = ['日','一','二','三','四','五','六'];
					timeStr += '星期'+ weekdays[date.getDay()] + '  ';
					var hour = date.getHours();
					timeStr += hour <10 ? '0':'';
					timeStr += hour + ':';
					var minute = date.getMinutes();
					timeStr +=minute < 10 ? '0':'';
					timeStr +=minute + ':'
					var second = date.getSeconds();
					timeStr += second < 10 ? '0': '';
					timeStr += second ;
					$('#timer').text(timeStr);//修改类名为timer的文本内容
				}
			
			$(function(){
				//向执行以下封装好的函数,避免显示有1s的空白;
				showTime();
				var timer = 0
				timer = window.setInterval(showTime,200);
				$('#ok').on('click',function(){
					if(timer != 0){
						window.clearInterval(timer);
						timer = 0;
						$('#ok').text('继续');
					}else{
						timer = window.setInterval(showTime,200);
						$('#ok').text('暂停');
					}
				});
			});
		</script>
	</body>
</html>

学习交流..

使用jQuery在浏览器右上角显示时钟

猜你喜欢