極簡翻頁時鐘

簡翻頁時鐘是一個非常好用的時鐘顯示工具，使用它可以讓你的手機屏幕顯示非常好看的翻頁時鐘的效果，并且可以讓手機保持常亮狀態，同時還能設置倒計時和倒數日，將手機打造成一個美觀的時鐘。非常適合將家里的舊手機打造出一個強大的時鐘工具。

軟件特色

翻頁時鐘：顯示當前時間，日期的模擬時鐘。

皮膚：各種精美皮膚，隨意切換，任您選擇。可點擊頁面有下面按鈕查看更多皮膚。

倒計時：可設置固定時間，進行倒計時，同時針對考生我們提供了模擬考試的快捷時間設置。

倒數日：記錄每一個值得紀念的日子。根據用戶指定日期，計算天數后，倒數計時。

手電筒：快捷打開手機攝像頭閃光燈，使手機閃光燈常亮以作為手電筒使用。

來源：http://www.3h3.com/az/203192.html

.less

* {
    margin: 0;
    padding: 0;
    &:hover #wrap {
        background: skyblue;
        color: beige;
    }
    #wrap {
        //absolute: 元素從塊級元素-》轉化為定位元素，可以自定義高寬（一旦浮動，則為浮動元素）
        position: absolute;
        width: 500px;
        height: 500px;
        background: salmon;
        border: 1px solid;
        border-radius: 50%;
        //居中
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /**
                            這里的-50%=》 margin-left: -250px margin-top: -250px
         */
        transition: 2s;
        //陰影:box-shadow:x-px , y-px ,模糊程度？px #color 
        box-shadow: 2px 2px 5px #4682B4;
        //卡尺
        ul {
            //消默認li樣式
            list-style: none;
            li {
                position: absolute;
                width: 6px;
                height: 30px;
                background: beige;
                //總寬度=500px，width=6px,left=247
                left: 247px;
                top: 0;
                //更新基點
                transform-origin: center 250px;
                //分鐘height:每5幀+1，5n+1，原生css變量n
                &:nth-child(5n+1) {
                    height: 40px;
                }
            }
        }
        //rgb(255,255,255) 透明opacity--》rgba(255,255,255,0)
        .logo {
            position: absolute;
            width: 500px;
            height: 500px;
            font: 50px/500px "微軟雅黑";
            text-align: center;
            top: 15%;
        }
        //時針
        .hour {
            position: absolute;
            //位置left=500-10=490/2=245
            left: 245px;
            //關聯height=(500-100)/2=200
            top: 90px;
            width: 10px;
            height: 160px;
            background: steelblue;
            border: 1px solid white;
            transform-origin: center bottom;
        }
        //分針
        .minute {
            position: absolute;
            //位置left=(500-8)/2=246
            left: 246px;
            //關聯height=(500-200)/2=150
            top: 70px;
            width: 8px;
            height: 180px;
            background: yellowgreen;
            border: 1px solid white;
            transform-origin: center bottom;
        }
        //秒針
        .second {
            position: absolute;
            //位置left=(500-6)/2=247
            left: 247px;
            //關聯height=(500-200)/2=150
            top: 80px;
            width: 6px;
            height: 200px;
            background: red;
            border: 1px solid;
            box-shadow: 1px 1px 5px #000000;
            //transform-origin: center bottom;
            //height距離圓心30px，需要減去
            transform-origin: center 170px;
        }
        //鐘座
        .center-top {
            position: absolute;
            //位置left=(500-50)/2=225
            left: 225px;
            //關聯height=(500-50)/2=225
            top: 225px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: salmon;
            //降級div
            z-index: -1;
        }
        .center-top2 {
            position: absolute;
            //位置：(500-30-2*2)/2=233
            left: 233px;
            top: 233px;
            width: 30px;
            height: 30px;
            border: 2px solid white;
            border-radius: 50%;
            background: beige;
        }
    }
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123

2.css

* {
  margin: 0;
  padding: 0;
}
*:hover #wrap {
  background: skyblue;
  color: beige;
}
* #wrap {
  position: absolute;
  width: 500px;
  height: 500px;
  background: salmon;
  border: 1px solid;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /**
                            這里的-50%=》 margin-left: -250px margin-top: -250px
         */
  transition: 2s;
  box-shadow: 2px 2px 5px #4682B4;
}
* #wrap ul {
  list-style: none;
}
* #wrap ul li {
  position: absolute;
  width: 6px;
  height: 30px;
  background: beige;
  left: 247px;
  top: 0;
  transform-origin: center 250px;
}
* #wrap ul li:nth-child(5n+1) {
  height: 40px;
}
* #wrap .logo {
  position: absolute;
  width: 500px;
  height: 500px;
  font: 50px/500px "微軟雅黑";
  text-align: center;
  top: 15%;
}
* #wrap .hour {
  position: absolute;
  left: 245px;
  top: 90px;
  width: 10px;
  height: 160px;
  background: steelblue;
  border: 1px solid white;
  transform-origin: center bottom;
}
* #wrap .minute {
  position: absolute;
  left: 246px;
  top: 70px;
  width: 8px;
  height: 180px;
  background: yellowgreen;
  border: 1px solid white;
  transform-origin: center bottom;
}
* #wrap .second {
  position: absolute;
  left: 247px;
  top: 80px;
  width: 6px;
  height: 200px;
  background: red;
  border: 1px solid;
  box-shadow: 1px 1px 5px #000000;
  transform-origin: center 170px;
}
* #wrap .center-top {
  position: absolute;
  left: 225px;
  top: 225px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: salmon;
  z-index: -1;
}
* #wrap .center-top2 {
  position: absolute;
  left: 233px;
  top: 233px;
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-radius: 50%;
  background: beige;
}

3.js

window.onload=function(){
	var ulNode=document.querySelector("#wrap > ul");
	var liNode="";
	//創建元素-style樣式css
	var liStyleNode=document.createElement("style");
	var liCss="";
	/**
	 * 循環添加li標簽
	 * ul > li :nth-child(i+1){
	 * 	transform: rotate((i*6)deg);
	 * }
	 */
	for(var i=0;i<60;i++){
		liNode+="<li></li>";
		//指定li標簽樣式css
		liCss+="ul > li:nth-child("
		+(i+1)
		+"){transform:rotate("+(i*6)+"deg);}";
	}
	ulNode.innerHTML=liNode;
	liStyleNode.innerHTML+=liCss;
	//加入到document
	document.head.appendChild(liStyleNode);
	
	var hourNode=document.querySelector("#wrap > .hour");
	var minuteNode=document.querySelector("#wrap > .minute");
	var secondNode=document.querySelector("#wrap > .second");
	
	//計時器啟動前，move執行時間變換
	move();
	//second-轉動
	setInterval(move,1000);
	function move(){
		//獲取內置date
		var date=new Date();
		//注意時間計算順序，優先計算秒
		var second=date.getSeconds();
		var minute=date.getMinutes()+second/60;
		var hour=date.getHours()+minute/60;
		
		//秒：360/60=6
		secondNode.style.transform="rotate("+(6*second)+"deg)";
		//分鐘：360/60=6
		minuteNode.style.transform="rotate("+(6*minute)+"deg)";
		//小時：360/12=30
		hourNode.style.transform="rotate("+(30*hour)+"deg)";
	}
}

4.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>時鐘表clock</title>
	</head>

	<body>
		<div id="wrap">
			<div class="logo">cevent</div>
			<ul>
				<!--啟用js腳本-->
				<!--<li></li>-->
			</ul>
			<div class="hour"></div>
			<div class="minute"></div>
			<div class="second"></div>
			<div class="center-top"></div>
			<div class="center-top2"></div>
		</div>

	</body>
	<link rel="stylesheet" href="css/less025-clock-module.css" />
	<script type="text/javascript" src="js/less025-clock-module.js"></script>

</html>
123456789101112131415161718192021222324252627

5.效果圖

.css樣式代碼編寫。

2.設置時鐘走動時間，設置為1秒。

3.div塊代碼，設置id.

4.完整代碼。

5.把代碼拖進瀏覽器測試。

6.測試成功則顯示當前電腦系統時間。

在線咨詢

上一篇：記錄：學習html(二)：標簽
下一篇：在線Markdown文檔轉pdf工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商