js傻瓜式制作电子时间

使用到的知识点

  • setInterval函数
  • 构建函数new Date
  • if判断

    demo:

//css样式请自行设置

<span id="timer"><span>
<script>
var timer = document.getElementById("timer");
//获取标签
setInterval ( function(){ //setInterval按照指定周期调用函数
var today = new Date(); //声明一个变量用来存储当时时间
var year = today.getFullYear;//声明一个变量year用来存储从当时时间里获取的年份
var month = today.getMonth;
var day = today.getDay;
var hour = today.getHour;
var minutes = today.getMinutes;
var secound = today.getSecound;
if(month<10){
month = "0"+month
//在月份前面加个0,如果是10月以内就价格0
}
if(secound<10){
secound = "0"+secound;
}
//60秒结束后,从0开始个位数加个0
timer.innerHTML = year+"年份"+month+"月"+day+"日"+hour+":"+minutes+":"+secound
把年月日组合在一起的结果输出到timer里面
},1000)//每秒调用一次
//
<script/>

本身这个电子时钟不是很难,但是对知识点的理解很重要.

后面可以加很多css央视

js傻瓜式制作电子时钟的更多相关文章

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

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

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

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

  3. Micropython TurnipBit 电子时钟 青少年编程入门

    电子时钟是一个很常用但是制作非常简单的小玩具了,对于Micropython初学者来说,制作一个电子时钟是非常简单又容易检验自己学习成果的实验了.TurnipBit相比于其他开发板,制作电子时钟就更加简 ...

  4. JS实现电子时钟

          目前有个小项目,在首页头部导航栏里需要一个电子时钟的效果,于是我就采用如下代码实现了一个电子时钟的效果.不过不完美,第一种方式容易导致网页莫名其妙的异常,后来觉得可能是做的操作太多了,然后 ...

  5. Js电子时钟

    简单版电子时钟,需要以下几个步骤 1. 封装一个函数 返回当前的时分秒 2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用 3. 把获取到的时间放到span盒子里,添加样式 效果展示  实现 ...

  6. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  7. 在线App开发平台——应用之星傻瓜式开发平台

    随着智能手机及APP应用程序的普及,越来越多的企业和个人意识到APP的营销价值,出于对技术的敬畏,很多企业下意识认为开发APP是一个有难度的技术活,所以很多时候有心无力,也担心APP的后续的技术支持. ...

  8. Webpack 傻瓜式指南(一)

    modules with dependencies   webpack   module bundler   static  assetss   .js .js .png Webpack傻瓜式指南 n ...

  9. 如何使用win7自带的备份还原以及创建系统镜像------傻瓜式教程

    对于经常鼓捣电脑的童鞋来说,装系统是一件极其平常的事情,不过系统装多了之后,我们会感到比较烦躁,因为每一次装系统意味着驱动的重新安装,程序的重新安装,每次这么鼓捣几次,半天时间就花在这上面了,效率是在 ...

随机推荐

  1. python使用自带模块httplib进行http请求

    #-*- encoding:utf-8 -*- import httplib, time class httpRequest(): def __init__(self, headers, reques ...

  2. zcmu 1540第k大数

    1540: 第k大数Time Limit: 10 Sec  Memory Limit: 128 MB[Submit][Status][Web Board]Description有两个序列a,b,它们的 ...

  3. 【代码优化】C#遍历所有控件(Control方法)

    直接上代码: /// <summary> /// 判断价格是否可以购买技能的方法 /// </summary> /// <param name="btnBuyA ...

  4. Mysql慢查询日志以及优化

    慢查询日志设置 当语句执行时间较长时,通过日志的方式进行记录,这种方式就是慢查询的日志. 1.临时开启慢查询日志(如果需要长时间开启,则需要更改mysql配置文件) set global slow_q ...

  5. 供应链管理如何提高效率?APS系统成优化引擎

    APS系统,虽然它的起兴只有短短的十几年,但是在这段时间里面,它为很多企业解决了很多人工手动.脑力不可解决的问题. 所以APS被誉为供应链优化引擎,APS常常被称为高级计划与排程,但也有称为高级计划系 ...

  6. react native 集成react navigation报错

    集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:

  7. AM335X有关MMC的启动参数问题分析

    AM335X有关MMC的启动参数问题分析 一. 问题来源 硬件平台:AM335X芯片 SDK版本:ti-processor-sdk-linux-am335x-evm-03.00.00.04-Linux ...

  8. 常用docker管理UI

    1. HumpBacks 特性 Web UI Supporting, Easy to use. Container Grouping and Isolation. Container Upgrades ...

  9. NGINX状态模块的使用

    nginx状态模块可以用来查看当前nginx服务器的并发量和总的请求数 启用nginx的状态模块 状态模块需要在编译安装的时候启用. 1.下载nginx源码包 2.安装nginx并启用模块 3.修改n ...

  10. spring的@Scheduled定时任务,同一时间段的定时任务只会执行一个,其余的会被阻塞,@Scheduled注解定时任务并发执行解决办法,即多线程运行定时任务

    原文:https://blog.csdn.net/qq_35937303/article/details/88851064 现有两个定时任务 @Component("aa") pu ...