题目：做一个电子时钟，显示当前的年月日，时分秒，要求自动变化。

　　案例分析：

　　　　1.使用一个div盒子来展示时钟的内容；

　　　　2.将盒子在JavaScrip里面获取div盒子；

　　　　3.我们需要一个定时器setInterval每隔一秒使时钟变化一次；

　　　　4.利用时间函数Date()获取系统时间，并分别获取年月日，时分秒；

　　　　5.当获取过来的数小于10，利用三元运算符字符串拼接的方式让它显示成 2022年05月01日 00：00：00的样子

　　　　6.利用innerHTML将获得结果写进div盒子里面。

　　要注意的是：getMonth()返回的月份比当前月份小一个月，因此我们需要在后边加一。

　　代码：

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

        .box{

            width: 500px;

            line-height: 100px;

            margin: 100px auto;

            background-color: black;

            color: #fff;

            text-align: center;

            font-size: 50px;

        }

    </style>

</head>

<body>

    <div class="box">123</div>

    <script>

        // 1.获取元素

        var box = document.querySelector('.box');

        //2.使用定时器每隔一秒更新一次

        setInterval(getTime, 1000);

        function getTime() {

            //3.利用时间函数获取系统时间

            var time = new Date();

            var year = time.getFullYear();//年

            year = year < 10 ? '0' + year : year;

            var mon = time.getMonth() + 1;//月

            mon = mon < 10 ? '0' + mon : mon;

            var date = time.getDate();//日

            date = date < 10 ? '0' + date : date;

            var h = time.getHours();//小时

            h = h < 10 ? '0' + h : h;

            var m = time.getMinutes();//分钟

            m = m < 10 ? '0' + m : m;

            var s = time.getSeconds();//秒

            s = s < 10 ? '0' + s : s;

            box.innerHTML = year + '年' + mon + '月' + date + '日' + '' + h + ':' + m + ':' + s;

        }

    </script>

</body>

</html>

　　运行结果：

使用JavaScript制作一个页面的电子时钟的更多相关文章

  1. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  2. VC++ 制作一个简易的控制台时钟应用

    1.下载EasyX Library for C++ (http://www.easyx.cn/) 直接下载:EasyX_20151015(beta) EasyX 绘图库目前支持 Visual C++ ...

  3. 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  4. [前端随笔][JavaScript] 制作一个富文本编辑器

    写在前面 现在网上有很多现成的富文本编辑器,比如百度家的UEditor,kindeditor,niceditor等等,功能特别的多,API也很多,要去熟悉他的规则也很麻烦,所以想自己了解一下原理,做一 ...

  5. HTML-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  6. Canvas 绘制一个像素风电子时钟

    想法是在 Canvas 上绘制由小方块组成的数字. 第一步是实现绘制小方块的方法,先画出一个边长为 5 的 10x10 个方块,使用两个 for 循环很简单就能完成. for (let i = 0; ...

  7. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  8. JavaScript电子时钟+倒计时

    JavaScript时间类      获取时分秒:          getHours()          getMinutes();          getSeconds();       获取 ...

  9. [TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板  一块 2.DS3231 ...

  10. 3分钟利用TurnipBit制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...

随机推荐

  1. Grafana配置Alert监控告警

    1.添加告警途径 这里以slack为例 测试是否可用 在slack上收到告警通知了 安装插件 # grafana-cli plugins install grafana-image-renderer ...

  2. 复现禅道V16.5的SQL注入（CNVD-2022-42853）

    漏洞详情 禅道V16.5未对输入的account参数内容作过滤校验,导致攻击者拼接恶意SQL语句执行. 环境搭建 环境下载:禅道V16.5 下载后双击运行,进入目录运行start.exe 直接访问即可 ...

  3. Docker搭建kafka及监控

    环境安装 docker安装 yum update yum install docker # 启动 systemctl start docker # 加入开机启动 systemctl enable do ...

  4. 为什么数字化转型离不开 MES 系统？

    确切的说应该是制造业企业的数字化转型离不开MES系统,原因很简单,制造业企业的核心工作是生产制造,做数字化转型就是对生产制造各个环节进行数字化改造,提质增效降成本,而MES系统是制造执行系统,是生产制 ...

  5. 220722 T3 石子染色 （背包）

    序列s中的数就是要选的堆的编号,假设要选的有i个石子,这i个染为红色,剩下j个染为蓝色,i+j=x,i=x-j,那么对答案的贡献是|x-2j|.那么只要我们选的有i个石子,贡献就是这么多,所以我们可以 ...

  6. python2与python区别汇总

    目录 输入与输出 range使用区别 字符编码区别 输入与输出 python2与python3中两个关键字的区别 python2中 input方法需要用户自己提前指定数据类型 写什么类型就是什么类型 ...

  7. day49-JDBC和连接池05

    JDBC和连接池05 11.BasicDAO 先来分析一个问题 前面我们使用了Apache-DBUtils和Druid简化了JDBC开发,但仍存在以下不足: SQL语句是固定的,不能通过参数传入,通用 ...

  8. uoj221【NOI2016】循环之美

    前面部分比较简单,就是无脑化式子,简单点讲好了. 首先肯定在\((x,y)=1\)时才考虑这个分数,要求纯循环的话,不妨猜猜结论,就是y必须和K互质.所以答案是\(\sum_{i=1}^n \sum_ ...

  9. 1NF | 2NF | 3NF的区分以及什么是函数依赖、部分函数依赖、值传递依赖（最详细的讲解1NF、2NF、3NF的关系）

    1NF | 2NF | 3NF的区分以及什么是函数依赖.部分函数依赖.值传递依赖 符合3NF一定符合2NF.一定符合1IF 简单区分.2NF不存在部分函数依赖,3NF不存在传递函数依赖 第一范式1NF ...

  10. 在Centos7上安装JDK1.8和tomcat8.5的步骤和过程（亲测可用）

    文章目录 1.在阿里云(Linux)Centos7上安装JDK1.8步骤过程 2.阿里云(Linux)centos7上安装Tomcat8.5步骤过程记录: 卸载JDK Centos7一般都会带有自己的 ...