欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js+html+css實(shí)現(xiàn)簡(jiǎn)單電子時(shí)鐘

 更新時(shí)間：2022年06月20日 08:40:53   作者：好多bug  
這篇文章主要為大家詳細(xì)介紹了js+html+css實(shí)現(xiàn)簡(jiǎn)單電子時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js+html+css實(shí)現(xiàn)簡(jiǎn)單電子時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下

最終結(jié)果：

HTML部分

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>2.1簡(jiǎn)單電子時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)</title>
?? ??? ?<link rel="stylesheet" type="text/css" href="css/clock.css"/>
?? ?</head>
?? ?<body onload="getCurrentTime()">
?? ??? ?<h3>簡(jiǎn)單電子時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)</h3>
?? ??? ?<hr >
?? ??? ?<!-- 電子時(shí)鐘區(qū)域 -->
?? ??? ?<div id="clock">
?? ??? ??? ?<div class="box1" id="h"></div>
?? ??? ??? ?<div class="box2">:</div>
?? ??? ??? ?<div class="box1" id="m"></div>
?? ??? ??? ?<div class="box2">:</div>
?? ??? ??? ?<div class="box1" id="s"></div>
?? ??? ?</div>
?? ?</body>
</html>

css部分

/* 電子時(shí)鐘的總體樣式設(shè)置 */
#clock{
?? ?width:800px;
?? ?font-size: 80px;
?? ?font-weight: bold;
?? ?color: #008B8B;
?? ?text-align: center;
?? ?margin: 20px;
}
/* 時(shí)分秒數(shù)字區(qū)域的樣式設(shè)置 */
.box1{
?? ?margin-right: 10px;
?? ?width: 100px;
?? ?height: 100px;
?? ?line-height: 100px;
?? ?float: left;
?? ?border: gray 1px solid;
}
/* 冒號(hào)區(qū)域的樣式設(shè)置 */
.box2{
?? ?width: 30px;
?? ?float: left;
?? ?margin-right: 10px;
}

js部分

——使用外鏈時(shí)不需加<script>標(biāo)簽，不使用外鏈則直接寫(xiě)在<body>標(biāo)簽內(nèi)

<script>
?? ??? ??? ?//獲取顯示小時(shí)的區(qū)域框?qū)ο?
?? ??? ??? ?var hour=document.getElementById('h');
?? ??? ??? ?//獲取顯示分鐘的區(qū)域框?qū)ο?
?? ??? ??? ?var minute=document.getElementById('m');
?? ??? ??? ?//獲取顯示秒的區(qū)域框?qū)ο?
?? ??? ??? ?var second=document.getElementById('s');
?? ??? ??? ?
?? ??? ??? ?//獲取當(dāng)前時(shí)間
?? ??? ??? ?function getCurrentTime(){
?? ??? ??? ??? ?var date=new Date();
?? ??? ??? ??? ?var h=date.getHours();
?? ??? ??? ??? ?var m=date.getMinutes();
?? ??? ??? ??? ?var s=date.getSeconds();
?? ??? ??? ??? ?
?? ??? ??? ??? ?if(h<10) h='0'+h;//確保0-9時(shí)也顯示成兩位數(shù)
?? ??? ??? ??? ?if(m<10) m='0'+m;//確保0-9分鐘也顯示成兩位數(shù)
?? ??? ??? ??? ?if(s<10) s='0'+s;//確保0-9秒也顯示成兩位數(shù)
?? ??? ??? ??? ?
?? ??? ??? ??? ?hour.innerHTML=h;
?? ??? ??? ??? ?minute.innerHTML=m;
?? ??? ??? ??? ?second.innerHTML=s;
?? ??? ??? ?}
?? ??? ??? ?//每秒更新一次時(shí)間
?? ??? ??? ?setInterval('getCurrentTime()',1000);
</script>

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

相關(guān)文章

  • TypeScript中的互斥類(lèi)型實(shí)現(xiàn)方法示例

    TypeScript中的互斥類(lèi)型實(shí)現(xiàn)方法示例

    用了一年時(shí)間的TypeScript了,下面這篇文章主要給大家介紹了關(guān)于TypeScript中互斥類(lèi)型實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-04-04
  • 淺談bootstrap源碼分析之scrollspy(滾動(dòng)偵聽(tīng))

    淺談bootstrap源碼分析之scrollspy(滾動(dòng)偵聽(tīng))

    下面小編就為大家?guī)?lái)一篇淺談bootstrap源碼分析之scrollspy(滾動(dòng)偵聽(tīng))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-06
  • Require.js的基本用法詳解

    Require.js的基本用法詳解

    require.js是一個(gè)js腳本加載器，它遵循AMD(Asynchronous Module Definition)規(guī)范，實(shí)現(xiàn)js腳本的異步加載，不阻塞頁(yè)面的渲染和其后的腳本的執(zhí)行，并提供了在加載完成之后的執(zhí)行相應(yīng)回調(diào)函數(shù)的功能
    2017-07-07
  • JS獲取Table中td值的方法

    JS獲取Table中td值的方法

    這篇文章主要介紹了JS獲取Table中td值的方法,實(shí)例分析了javascript操作table中td的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-03-03
  • JavaScript實(shí)現(xiàn)Java中StringBuffer的方法

    JavaScript實(shí)現(xiàn)Java中StringBuffer的方法

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)Java中StringBuffer的方法,實(shí)例分析了StringBuffer類(lèi)的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下
    2015-02-02
  • 很棒的js Tab選項(xiàng)卡切換效果

    很棒的js Tab選項(xiàng)卡切換效果

    這篇文章主要介紹了很棒的js Tab選項(xiàng)卡切換效果，簡(jiǎn)單的選項(xiàng)卡切換特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-08-08
  • 深入理解javascript嚴(yán)格模式(Strict Mode)

    深入理解javascript嚴(yán)格模式(Strict Mode)

    Strict mode是JavaScript1.8.5引進(jìn)的技術(shù)，但還沒(méi)有瀏覽器確實(shí)可靠的實(shí)現(xiàn)了嚴(yán)格模式，所以使用時(shí)要小心并且多測(cè)試。Strict mode可以應(yīng)用于整個(gè)腳本，也可以適合于單個(gè)函數(shù)。
    2014-11-11
  • JavaScript中的class類(lèi)詳解

    JavaScript中的class類(lèi)詳解

    JavaScript?中的類(lèi)（Class）是一種新的語(yǔ)言特性，它讓我們可以使用面向?qū)ο缶幊痰乃枷雭?lái)更加方便地組織和管理代碼。在本文中，我們將詳細(xì)介紹?JavaScript?中的類(lèi)特性，感興趣的同學(xué)可以借鑒閱讀
    2023-05-05
  • BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼

    BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼

    這篇文章主要介紹了 BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2017-02-02
  • 推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11)

    推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11)

    這篇文章主要介紹了推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11),因?yàn)閕e11取消了很多低版本的判斷，很多js都需要修改了，這里簡(jiǎn)單介紹下需要的朋友可以參考下
    2015-12-12

最新評(píng)論