jQuery顯示動態時間

一、實例效果圖

二、實例代碼說明
該實例依賴於jQuery
1、試用前引入jQuery.js核心庫；

2、在body內編寫前端html代碼；代碼如下：

實例1
<div class="clock">
    <div class="time">
        <span class="time_hours"></span>
        <span class="time_min"></span>
        <span class="time_sec"></span>
    </div>
</div>
實例2
<div class="time2">
    <span id="dayTime"></span>
</div>

3、編寫依賴控制的js代碼；代碼如下：

$(document).ready(function() {
    if ($(".clock")[0]) {
        var a = new Date;
        a.setDate(a.getDate()),
        setInterval(function() {
            var a = (new Date).getSeconds();
            $(".time_sec").html((a < 10 ? "0": "") + a)
        },
        1e3),
        setInterval(function() {
            var a = (new Date).getMinutes();
            $(".time_min").html((a < 10 ? "0": "") + a)
        },
        1e3),
        setInterval(function() {
            var a = (new Date).getHours();
            $(".time_hours").html((a < 10 ? "0": "") + a)
        },
        1e3)
    }
}),
$(document).ready(function(){

	function addZero(value) {
		if(value < 10) {
			return "0" + value;
		} else {
			return value;
		}

	}
	function current(){ 
		var d=new Date(),str=''; 
		str +=addZero(d.getHours())+':';
		str +=addZero(d.getMinutes())+':';
		str +=addZero(d.getSeconds());
		return str; } 
	setInterval(function(){$("#dayTime").html(current)},1000); 
}); 

4、編寫用於美化的css代碼

.clock,.time2{
    background: rgba(255,255,255,.08);
    line-height: 100%;
    padding: .7rem 1rem;
    font-size: 1.5rem;
    margin-left: 1rem;
}

由於近期開發項目中遇到了；故做筆記記錄在此；分享給需要的人；

更多分享關注微信公衆平臺