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

2024-09-28 10:18:39

一、效果展示

二、使用的技术

主要使用了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>
    <!-- 
        如何使用 Date() 方法获得当日的日期。
        getFullYear()
        使用 getFullYear() 获取年份。

        getTime()
        getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

        setFullYear()
        如何使用 setFullYear() 设置具体的日期。

        toUTCString()
        如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

        getDay()
        如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

        Display a clock
        如何在网页上显示一个钟表。
     -->
     <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>

总结：

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

到此这篇关于利用JavaScript实现简单的网页时钟的文章就介绍到这了,更多相关JavaScript网页时钟内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS实现的网页倒计时数字时钟效果

本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
js+html5实现canvas绘制网页时钟的方法

本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex
JS实现网页时钟特效

本文实例为大家分享了JS实现网页时钟特效的具体代码,供大家参考,具体内容如下主要逻辑根据JS 的Date属性求得当前的时分秒之后,按照 360/(时|分|秒) 来对三个指针元素进行旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
用JavaScript实现简单网页时钟

利用JavaScript实现网页时钟,效果如下图所示: 首先在body中完成表盘.指针的资源载入: <div><img src="../../image/clockface.jpg" alt=""></div> <hr id="hour" > <hr id="min"> <hr id="second"> 设置CSS样式: <sty
利用JavaScript实现简单的网页时钟

目录一.效果展示二.使用的技术三.日期对象 1.指定时间 2.获取目前时间三.源代码前言: 今天带大家使用JavaScript定制一款网页时钟一.效果展示二.使用的技术主要使用了js的日期对象,实现的时候先创建一个日期对象,并进行网页布局,对时间获取之后将时间填入对应的标签内.然后使用多线程实现时钟的变动. 三.日期对象 1.指定时间代码如下: <script> //创建日期对象 d=new Date(); //设置年月日
Node.js 利用cheerio制作简单的网页爬虫示例

本文介绍了Node.js 利用cheerio制作简单的网页爬虫示例,分享给大家,具有如下: 1. 目标完成对网站的标题信息获取将获取到的信息输出在一个新文件工具: cheerio,使用npm下载npm install cheerio cheerio的API使用方法和jQuery的使用方法基本一致如果熟练使用jQuery,那么cheerio将会很快上手 2. 代码部分介绍: 获取segment fault页面的列表标题,将获取到的标题列表编号,最终输出到pageTitle.txt文件里
如何利用javascript做简单的算法

目录 1 问题 2 方法 3 实验结果与讨论 1 问题众所周知,无论是Pycharm或是IDLE.java都可以计算简单的算法,比如加减乘除.然而在Hbuilder中,javascript也可以用来计算数值的加减乘除. 比如,我们计算:假设 y=5,计算 x=y+2,并显示结果. 2 方法首先利用<p></p>标签写算法题题目.然后利用<button></button>标签创造一个事件,其中标签里面onclick后面的命名一定要加().再然后写一个<
利用Javascript实现简单的转盘抽奖

首先来看看接口说明: var _rotate = new iRotate('#div',{ start : 0, //开始角度,可不写,默认0 end :45, //结束角度 time :5000, //持续时间,可不写,默认1000 easing : 'easeOut', //动画形式,目前只有'linear'和'easeOut'两种,可不写,默认'easeOut' callback : function(){ //回调函数 //this为当前对象 } }); _rotate.stop(fu
JavaScript Canvas编写炫彩的网页时钟

本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码,供大家参考,具体内容如下只是利用了Canvas制作的. 示意图如下: <!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" /> <title> 网
JavaScript制作简单网页计算器

本文实例为大家分享了JavaScript制作简单网页计算器的具体代码,供大家参考,具体内容如下一.题目利用JavaScript中的函数,完成数字加.减.乘.除的运算,实现一个简单的计算器. 二.代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网页计算器</title> </head> <body> <
利用JavaScript在网页实现八数码启发式A*算法动画效果

最近人工智能课老师布置了一个八数码实验,网上看到很多八数码的启发式A*算法,但是大多数都是利用C或者C++在控制台实现的,于是我用js在网页中做了一个类似的. 首先八数码就是一个九宫格,其中有一个空格,其他八个对应数字1-8, 移动空格,使得最后状态为有序,如下图启发式算法是指在求解时,利用启发函数将不符合规则的解节点去掉,从而缩小问题的解空间. A*算法是利用评价函数的启发式算法,在本例中,利用当前节点状态与最终节点状态所不同的格子数来评估节点的优劣,将优越节点储存并在之后展开,将劣质节点抛
javascript实现简单的可随机变色网页计算器示例

本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META
JavaScript实现简单获取当前网页网址的方法

本文实例讲述了JavaScript实现简单获取当前网页网址的方法.分享给大家供大家参考,具体如下: 这里演示使用JavaScript取得当前网页的网址,是一个比较有用的功能,点击"运行"查看效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-show-nav-url-codes/ 具体代码如下: <html> <head> <title>取得目前页面页的网址</title> &