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

左手的ㄟ右手 2022-05-25 01:29 194阅读 0赞

初学者练习题:

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

最终的效果如下图:

![20180505165802545][]

如何实现分析:

首先我们需要获取到当前的时间 ---- 其次在拿到我们要在页面显示的字符串 ----通过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>

学习交流..

[20180505165802545]: /images/20220525/7672d4c4195543289c8e270673730b38.png