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

　　案例分析：

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

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

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

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

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

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

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

　　代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             width: 500px;
  11.             line-height: 100px;
  12.             margin: 100px auto;
  13.             background-color: black;
  14.             color: #fff;
  15.             text-align: center;
  16.             font-size: 50px;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="box">123</div>
  22.     <script>
  23.         // 1.获取元素
  24.         var box = document.querySelector('.box');
  25.         //2.使用定时器每隔一秒更新一次
  26.         setInterval(getTime, 1000);
  27.         function getTime() {
  28.             //3.利用时间函数获取系统时间
  29.             var time = new Date();
  30.             var year = time.getFullYear();//年
  31.             year = year < 10 ? '0' + year : year;
  32.             var mon = time.getMonth() + 1;//月
  33.             mon = mon < 10 ? '0' + mon : mon;
  34.             var date = time.getDate();//日
  35.             date = date < 10 ? '0' + date : date;
  36.             var h = time.getHours();//小时
  37.             h = h < 10 ? '0' + h : h;
  38.             var m = time.getMinutes();//分钟
  39.             m = m < 10 ? '0' + m : m;
  40.             var s = time.getSeconds();//秒
  41.             s = s < 10 ? '0' + s : s;
  42.             box.innerHTML = year + '年' + mon + '月' + date + '日' + '' + h + ':' + m + ':' + s;
  43.         }
  44.     </script>
  45. </body>
  46. </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. 如何在 Docker 之上使用 Elastic Stack 和 Kafka 可视化公共交通

    文章转载自:https://blog.csdn.net/UbuntuTouch/article/details/106498568 需要掌握的知识点: 1.使用docker-compose方式部署一套 ...

  2. 迁移一个仓库到新的Gitlab

    一般这种迁移,要注意旧仓库的提交历史等信息也要同步到新的仓库. 先使用如下命令克隆老的: git clone --bare git@gitlab.test1.com:f2e/test.git 新仓库创 ...

  3. 05_Java基础知识

    Java基础知识 一. Java的语言特点 面向对象(贴近人类思维模式,模拟现实世界,解决现实问题) 简单性(自动内存管理机制,不易造成内存溢出:简化流程处理.语义清晰) 跨平台(操作系统.服务器.数 ...

  4. C#-10 事件

    一 发布者和订阅者 很多时候都有这种需求,当一个特定的程序事件发生时,程序的其他部分可以得到该事件已经发生的通知. 发布者/订阅者模式可以满足这种需求. 发布者:发布某个事件的类或结构,其他类可以在该 ...

  5. Redis核心设计原理（深入底层C源码）

    Redis 基本特性 1. 非关系型的键值对数据库,可以根据键以O(1) 的时间复杂度取出或插入关联值 2. Redis 的数据是存在内存中的 3. 键值对中键的类型可以是字符串,整型,浮点型等,且键 ...

  6. 微信小程序分享好友，朋友圈

    <template> <view> <button open-type="share">发送给好友</button> </vi ...

  7. 洛谷 P5607 [Ynoi2013] 无力回天 NOI2017

    人生第一道Ynoi,开心 Description https://www.luogu.com.cn/problem/P5607 Solution 拿到这个题,看了一下,发现询问要求最大异或和,怎么办? ...

  8. 11.-ORM-基本操作-创建数据

    一.ORM-操作 基本操作包括增删改查,即(CRUD)操作 CRUD是指在做计算处理时增加(create).读取查询(read).更新(update).删除(delete) ORM CRUD 核心 - ...

  9. 数组还是HashSet？

    我记得大约在半年前,有个朋友问我一个问题,现在有一个选型: 一个性能敏感场景,有一个集合,需要确定某一个元素在不在这个集合中,我是用数组直接Contains还是使用HashSet<T>.C ...

  10. CC3

    cc_link_three 0x00前言 这里要单独学cc链子三是因为它的调用方式不是执行命令而是代码执行,是一种动态类加载机制来执行代码,然后类加载的时候要用类加载器 0x01开整 首先明白调用机制 ...