htmlcssjs時鐘計時器-創(chuàng)新互聯(lián)

時鐘

站在用戶的角度思考問題，與客戶深入溝通，找到蜀山網(wǎng)站設(shè)計與蜀山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋蜀山地區(qū)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
   <script>
     var _hmt = _hmt || [];
     (function() {
      var hm = document.createElement("script");
      hm.src = "http://#/hm.js?8e2a116daf0104a78d601f40a45c75b4";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
     })();
     </script>
   <script>

var H='....';
var H=H.split('');
var M='.....';
var M=M.split('');
var S='......';
var S=S.split('');
var Ypos=0;
var Xpos=0;
var Ybase=8;
var Xbase=8;
var dots=12;

function clock(){
var time=new Date ();
var secs=time.getSeconds();
var sec=-1.57 + Math.PI * secs/30;
var mins=time.getMinutes();
var min=-1.57 + Math.PI * mins/30;
var hr=time.getHours();
var hrs=-1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
for (i=0; i < dots; ++i){
document.getElementById("dig" + (i+1)).style.top=0-15+40*Math.sin(-0.49+dots+i/1.9).toString() + "px";
document.getElementById("dig" + (i+1)).style.left=0-14+40*Math.cos(-0.49+dots+i/1.9).toString() + "px";
}
for (i=0; i < S.length; i++){
document.getElementById("sec" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(sec).toString() + "px";
document.getElementById("sec" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(sec).toString() + "px";
}
for (i=0; i < M.length; i++){
document.getElementById("min" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(min).toString() + "px";
document.getElementById("min" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(min).toString() + "px";
}
for (i=0; i < H.length; i++){
document.getElementById("hour" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(hrs).toString() + "px";
document.getElementById("hour" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(hrs).toString() + "px";
}
setTimeout('clock()',50);
}
window.onload=clock;

</script>
   <style type="text/css">
   div.dig, div.hour, div.min, div.sec
   {
   position:absolute;
   }
   div.hour, div.min, div.sec
   {
   width:2px;
   height:2px;
   font-size:2px;
   }
   div.dig
   {
   width:30px;
   height:30px;
   font-family:arial,verdana,sans-serif;
   font-size:10px;
   color:#000000;
   text-align:center;
   padding-top:10px
   }
   div.min
   {
   background:#0000FF;
   }
   div.hour
   {
   background:#000000;
   }
   div.sec
   {
   background:#FF0000;
   }
</style>

</head>
<body>
   <div class="example">
      <table >
         <tbody>
         <tr>
         <td>
            <div >
         <div id="dig1" class="dig" >1</div>
         <div id="dig2" class="dig" >2</div>
         <div id="dig3" class="dig" >3</div>
         <div id="dig4" class="dig" >4</div>
         <div id="dig5" class="dig" >5</div>
         <div id="dig6" class="dig" >6</div>
         <div id="dig7" class="dig" >7</div>
         <div id="dig8" class="dig" >8</div>
         <div id="dig9" class="dig" >9</div>
         <div id="dig10" class="dig" >10</div>
         <div id="dig11" class="dig" >11</div>
         <div id="dig12" class="dig" >12</div>

         <div id="hour1" class="hour" ></div>
         <div id="hour2" class="hour" ></div>
         <div id="hour3" class="hour" ></div>
         <div id="hour4" class="hour" ></div>

         <div id="min1" class="min" ></div>
         <div id="min2" class="min" ></div>
         <div id="min3" class="min" ></div>
         <div id="min4" class="min" ></div>
         <div id="min5" class="min" ></div>

         <div id="sec1" class="sec" ></div>
         <div id="sec2" class="sec" ></div>
         <div id="sec3" class="sec" ></div>
         <div id="sec4" class="sec" ></div>
         <div id="sec5" class="sec" ></div>
         <div id="sec6" class="sec" ></div>
         </div>
         </td>

         </tr>
         </tbody>
      </table>
   </div>

</body>
</html>

計時器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script>
var c1 = 0;
var t=0;
var timer_is_on1= 0 ;
function myTimer(){
   t=t+1;
   document.getElementById("txt").value=t;
}
function doTimer1(){
   if (!timer_is_on1) {
      timer_is_on1 = 1;
      myt = setInterval(function () {
         myTimer()
      },1000);
   }

}
function stopCount1(){
   clearInterval(myt);
   timer_is_on1=0;
}

</script>
</head>
<body>


<br>
<form>
<input type="button" value="開始計數(shù)!" onclick="doTimer1()" />
<input type="text" id="txt" />
<input type="button" value="停止計數(shù)!" onclick="stopCount1()" />
</form>
</body>

</html>

計時器2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
   document.getElementById('txt').value=c;
   c=c+1;
   t=setTimeout(function(){timedCount()},1000);
}
function doTimer(){
   if (!timer_is_on){
      timer_is_on=1;
      timedCount();
   }
}
function stopCount(){
   clearTimeout(t);
   timer_is_on=0;
}
</script>
</head>
<body>

<form>
<input type="button" value="開始計數(shù)!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="停止計數(shù)!" onclick="stopCount()" />
</form>
<p>
單擊開始計數(shù)按鈕，按下時開始計數(shù)，輸入框?qū)?開始一直計數(shù)。單擊停止計數(shù)按鈕，按下時停止計數(shù)，再次點(diǎn)擊開始計數(shù)按鈕，又再次開始計數(shù)。
</p>
</body>

</html>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：htmlcssjs時鐘計時器-創(chuàng)新互聯(lián)
分享路徑：http://muchs.cn/article16/dppsgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、搜索引擎優(yōu)化、用戶體驗(yàn)、定制網(wǎng)站、網(wǎng)站內(nèi)鏈、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)