位置：首页>> 网络编程>> JavaScript>> 利用JavaScript实现简单的网页时钟

利用JavaScript实现简单的网页时钟

作者：酷尔。　　发布时间：2024-04-23 09:29:39　

标签：JavaScript,实现,网页,时钟

前言：

今天带大家使用JavaScript定制一款网页时钟

一、效果展示

二、使用的技术

主要使用了js的日期对象,实现的时候先创建一个日期对象，并进行网页布局,对时间获取之后将时间填入对应的标签内。然后使用多线程实现时钟的变动。

三、日期对象

1.指定时间

代码如下：

<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日至今的毫秒数
   document.getElementById("demo1").innerHTML=d.getTime();
   // 将当日的日期转换成字符串
   document.getElementById("demo2").innerHTML=d.toUTCString();
   // 获取当前周几
   document.getElementById("demo3").innerHTML=week[d.getDay()-1];
   // 获取具体时间
   document.getElementById("demo4").innerHTML=d;
   x=document.getElementById("demo5");
   }
</script>

2.获取目前时间

代码如下：

<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>

<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页面加载完成后执行startTime函数
<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日至今的毫秒数
document.getElementById("demo1").innerHTML=d.getTime();
// 将当日的日期转换成字符串
document.getElementById("demo2").innerHTML=d.toUTCString();
// 获取当前周几
document.getElementById("demo3").innerHTML=week[d.getDay()-1];
// 获取具体时间
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的数字前加一个‘0'
m=checkTime(m);
s=checkTime(s);
document.getElementById('demo5').innerHTML=h+":"+m+":"+s;
//开启一个多线程,开启后本线程会继续执行。
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="点我">

</body>
</html>

总结：

网页时钟主要考验我们对日期函数,多线程的掌握情况。知识点都在注释内,请大家多多阅读源代码。以求深入理解。

来源：https://blog.csdn.net/apple_51931783/article/details/122773995

投稿