初學者練習題:
使用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>
學習交流..