快捷導(dǎo)航

JS實(shí)現(xiàn)網(wǎng)頁(yè)時(shí)鐘特效

更新時(shí)間：2020年03月25日 11:08:12 作者：Byte_Dance

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)時(shí)鐘特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)網(wǎng)頁(yè)時(shí)鐘特效的具體代碼，供大家參考，具體內(nèi)容如下

主要邏輯根據(jù)JS 的Date屬性求得當(dāng)前的時(shí) 分秒之后,按照 360/(時(shí)|分|秒) 來對(duì)三個(gè)指針元素進(jìn)行旋轉(zhuǎn)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #box {
  width: 600px;
  height: 600px;
  /*border: 1px solid #000;*/
  background: url("img/bg.png") no-repeat;
  background-size: cover;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
 
 }
 #h{
  width:100%;
  height:100%;
  background: url("img/h.png") no-repeat;
  background-size: cover;
  position: absolute;
 }
 #m{
  width:100%;
  height:100%;
  background: url("img/m.png") no-repeat;
  background-size: cover;
  position: absolute;
 }
 #s{
  width:100%;
  height:100%;
  background: url("img/s.png") no-repeat;
  background-size: cover;
  position: absolute;
 }
 </style>
</head>
<body>
 <div id="box">
 <div id="h"></div>
 <div id="m"></div>
 <div id="s"></div>
 </div>
 
 <script>
 window.onload = function(){
  // 1:找到三個(gè)元素標(biāo)簽
  var h = document.getElementById("h"); //時(shí)
  var m = document.getElementById("m"); //分
  var s = document.getElementById("s"); //秒
 
  setInterval(function(){
  var date = new Date();
  var HH = (date.getHours()%12);
  var MM = date.getMinutes();
  var SS = date.getSeconds();
  h.style.transform = "rotate("+(HH*30)+"deg)";
  m.style.transform = "rotate("+(MM*6)+"deg)";
  s.style.transform = "rotate("+(SS*6)+"deg)";
  },1000)
 }
 </script>
</body>
</html>

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript 題型問答有答案參考
JavaScript 題型問答有答案參考，都是一些開發(fā)中容易碰到的問題。
2010-02-02
圍觀tangram js庫(kù)
Tangram開源將近一周，持續(xù)圍觀了幾天。寫一個(gè)簡(jiǎn)單的圍觀筆記吧。
2010-12-12
select隱藏選中值對(duì)應(yīng)的id,顯示其它id的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猻elect隱藏選中值對(duì)應(yīng)的id,顯示其它id的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript實(shí)現(xiàn)兩個(gè)Table固定表頭根據(jù)頁(yè)面大小自行調(diào)整
正如標(biāo)題所言兩個(gè)Table固定表頭，可根據(jù)頁(yè)面大小自行調(diào)整使用JavaScript實(shí)現(xiàn)，具體的示例如下，感興趣的朋友可以參考下
2014-01-01
javascript實(shí)現(xiàn)數(shù)字倒計(jì)時(shí)特效
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果，是一款非常實(shí)用的javascript倒計(jì)時(shí)特效,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-03-03
關(guān)于獲取DIV內(nèi)部?jī)?nèi)容報(bào)錯(cuò)的原因分析及解決辦法
這篇文章主要介紹了關(guān)于獲取DIV內(nèi)部?jī)?nèi)容報(bào)錯(cuò)的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下
2016-01-01
動(dòng)態(tài)讀取JSON解析鍵值對(duì)的方法
這篇文章主要介紹了動(dòng)態(tài)讀取JSON解析鍵值對(duì)的方法,需要的朋友可以參考下
2014-06-06
IE6,IE7下js動(dòng)態(tài)加載圖片不顯示錯(cuò)誤
ie6,7下js動(dòng)態(tài)加載圖片不顯示錯(cuò)誤，碰到這類問題的朋友可以參考下。
2010-07-07
Javascript之深入淺出prototype
本文將深入淺出的對(duì)Javascript中的prototype進(jìn)行詳細(xì)介紹。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
JavaScript實(shí)現(xiàn)的文本框placeholder提示文字功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的文本框placeholder提示文字功能,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-07-07