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

利用JavaScript實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁(yè)時(shí)鐘

 更新時(shí)間：2022年02月25日 08:51:28   作者：酷爾。  
這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁(yè)時(shí)鐘，主要使用了js的日期對(duì)象,實(shí)現(xiàn)的時(shí)候先創(chuàng)建一個(gè)日期對(duì)象，并進(jìn)行網(wǎng)頁(yè)布局,對(duì)時(shí)間獲取之后將時(shí)間填入對(duì)應(yīng)的標(biāo)簽內(nèi)。然后使用多線程實(shí)現(xiàn)時(shí)鐘的變動(dòng),需要的朋友可以參考一下

前言：

今天帶大家使用JavaScript定制一款網(wǎng)頁(yè)時(shí)鐘

一、效果展示

二、使用的技術(shù)

主要使用了js的日期對(duì)象,實(shí)現(xiàn)的時(shí)候先創(chuàng)建一個(gè)日期對(duì)象，并進(jìn)行網(wǎng)頁(yè)布局,對(duì)時(shí)間獲取之后將時(shí)間填入對(duì)應(yīng)的標(biāo)簽內(nèi)。然后使用多線程實(shí)現(xiàn)時(shí)鐘的變動(dòng)。

三、日期對(duì)象

1.指定時(shí)間

代碼如下：

<script>
?? ? ?//創(chuàng)建日期對(duì)象
??? ? ?d=new Date();
??? ? ?//設(shè)置年月日
?? ? ?d.setFullYear(1982,03,28);
?? ? ?//創(chuàng)建一個(gè)數(shù)組
?? ? ?var week=new Array(7);
?? ? ?week[0]="周一";
?? ? ?week[1]="周二";
?? ? ?week[2]="周三";
?? ? ?week[3]="周四";
?? ? ?week[4]="周五";
?? ? ?week[5]="周六";
?? ? ?week[6]="周天";
?? ? ?//將日期插入標(biāo)簽內(nèi)
?? ? ?function data(){
?? ? ? ? ?// 獲取年份
?? ? ? ? ?document.getElementById("demo").innerHTML=d.getFullYear();
?? ? ? ? ?// 獲取從1970年1月1日至今的毫秒數(shù)
?? ? ? ? ?document.getElementById("demo1").innerHTML=d.getTime();
?? ? ? ? ?// 將當(dāng)日的日期轉(zhuǎn)換成字符串
?? ? ? ? ?document.getElementById("demo2").innerHTML=d.toUTCString();
?? ? ? ? ?// 獲取當(dāng)前周幾
?? ? ? ? ?document.getElementById("demo3").innerHTML=week[d.getDay()-1];
?? ? ? ? ?// 獲取具體時(shí)間
?? ? ? ? ?document.getElementById("demo4").innerHTML=d;
?? ? ? ? ?x=document.getElementById("demo5");?
?? ? ?}
</script>

2.獲取目前時(shí)間

代碼如下：

<script>
? ?var today=new Date();
? ?var h=today.getHours();
? ?var m=today.getMinutes();
? ?var s=today.getSeconds();
</script>

三、源代碼

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <!--?
? ? ? ? 如何使用 Date() 方法獲得當(dāng)日的日期。
? ? ? ? getFullYear()
? ? ? ? 使用 getFullYear() 獲取年份。

? ? ? ? getTime()
? ? ? ? getTime() 返回從 1970 年 1 月 1 日至今的毫秒數(shù)。

? ? ? ? setFullYear()
? ? ? ? 如何使用 setFullYear() 設(shè)置具體的日期。

? ? ? ? toUTCString()
? ? ? ? 如何使用 toUTCString() 將當(dāng)日的日期（根據(jù) UTC）轉(zhuǎn)換為字符串。

? ? ? ? getDay()
? ? ? ? 如何使用 getDay() 和數(shù)組來(lái)顯示星期，而不僅僅是數(shù)字。

? ? ? ? Display a clock
? ? ? ? 如何在網(wǎng)頁(yè)上顯示一個(gè)鐘表。
? ? ?-->
? ? ?<style>
? ? ? ? ?.nav{
? ? ? ? ? ? ?display: inline-block;
? ? ? ? ? ? ?width: 100%;
? ? ? ? ? ? ?height: 900px;
? ? ? ? ? ? ?background-color: aqua;
? ? ? ? ? ? ?color: brown;
? ? ? ? ? ? ?font-size: 400px;
? ? ? ? ? ? ?font-weight: 700;
? ? ? ? ? ? ?line-height: 900px;
? ? ? ? ? ? ?text-align: center;
? ? ? ? ?}
? ? ?</style>
</head>
//οnlοad=startTime()是body頁(yè)面加載完成后執(zhí)行startTime函數(shù)
<body onload="startTime()">
? ? <script>
? ? ? ? d=new Date();
? ? ? ? d.setFullYear(1982,03,28);
? ? ? ? var week=new Array(7);
? ? ? ? week[0]="周一";
? ? ? ? week[1]="周二";
? ? ? ? week[2]="周三";
? ? ? ? week[3]="周四";
? ? ? ? week[4]="周五";
? ? ? ? week[5]="周六";
? ? ? ? week[6]="周天";
? ? ? ? function data(){
? ? ? ? ? ? // 獲取年份
? ? ? ? ? ? document.getElementById("demo").innerHTML=d.getFullYear();
? ? ? ? ? ? // 獲取從1970年1月1日至今的毫秒數(shù)
? ? ? ? ? ? document.getElementById("demo1").innerHTML=d.getTime();
? ? ? ? ? ? // 將當(dāng)日的日期轉(zhuǎn)換成字符串
? ? ? ? ? ? document.getElementById("demo2").innerHTML=d.toUTCString();
? ? ? ? ? ? // 獲取當(dāng)前周幾
? ? ? ? ? ? document.getElementById("demo3").innerHTML=week[d.getDay()-1];
? ? ? ? ? ? // 獲取具體時(shí)間
? ? ? ? ? ? document.getElementById("demo4").innerHTML=d;
? ? ? ? ? ? x=document.getElementById("demo5");?
? ? ? ? }
? ? ? ? function startTime(){
? ? ? ? ? ? var today=new Date();
? ? ? ? ? ? var h=today.getHours();
? ? ? ? ? ? var m=today.getMinutes();
? ? ? ? ? ? var s=today.getSeconds();
? ? ? ? ? ? // 在小于10的數(shù)字前加一個(gè)‘0'
? ? ? ? ? ? m=checkTime(m);
? ? ? ? ? ? s=checkTime(s);
? ? ? ? ? ? document.getElementById('demo5').innerHTML=h+":"+m+":"+s;
? ? ? ? ? ? //開(kāi)啟一個(gè)多線程,開(kāi)啟后本線程會(huì)繼續(xù)執(zhí)行。
? ? ? ? ? ? t=setTimeout(function(){startTime()},500);
? ? ? ? ? ? console.log("hello")
? ? ? ? ? ? console.log(s)
? ? ? ? ? ? return ? ?
? ? ? ? }
? ? ? ? function checkTime(i){
? ? ? ? ? ? if (i<10){
? ? ? ? ? ? ? ? i="0" + i;
? ? ? ? ? ? }
? ? ? ? ? ? return i;
? ? ? ? }
? ? </script>

? ? <div class="nav" id="demo5"></div><br> ? ?
? ? <div id="demo">1</div>
? ? <div id="demo1">2</div>
? ? <div id="demo2">3</div>
? ? <div id="demo3">4</div>
? ? <div id="demo4">5</div>
? ? <input type="button" onclick="data()" value="點(diǎn)我">
? ??
</body>
</html>

總結(jié)：

網(wǎng)頁(yè)時(shí)鐘主要考驗(yàn)我們對(duì)日期函數(shù),多線程的掌握情況。知識(shí)點(diǎn)都在注釋內(nèi),請(qǐng)大家多多閱讀源代碼。以求深入理解。

到此這篇關(guān)于利用JavaScript實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁(yè)時(shí)鐘的文章就介紹到這了,更多相關(guān)JavaScript網(wǎng)頁(yè)時(shí)鐘內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論