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. Html 对象的常用事件列举

    事件名称 触发时间 对象例举 OnBlur 对象失去输入焦点 窗口和所有的表单对象 OnChange 用户改变对象的值 文本框.文本区域.选择列表等 OnClick 用户鼠标点击 链接.按钮.单选钮. ...

  2. [BZOJ3230]相似子串(后缀数组)

    显然可以通过后缀数组快速找到询问的两个串分别是什么,然后正反各建一个后缀数组来求两个串的LCP和LCS即可. #include<cstdio> #include<cstring> ...

  3. 全栈项目|小书架|服务器端-NodeJS+Koa2 实现评论功能

    评论功能分析 上图可以看出评论功能主要实现了:评论的发布.评论列表的展示. 在不考虑子评论以及图片评论的场景下,评论功能主要有以下两个接口: 发布评论 获取评论列表(考虑分页) 评论 Model 的建 ...

  4. Angular复习笔记5-指令

    Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...

  5. dump net core lldb 分析

    原文https://www.cnblogs.com/calvinK/p/9274239.html centos7 lldb 调试netcore应用的内存泄漏和死循环示例(dump文件调试) 写个dem ...

  6. go install -v github.com/gopherjs/gopherjs报错提示go cannot find package "golang.org/x/crypto/ssh/terminal" 解决方案

    1前言 方法一:go get 方法二: github clone 2 方法方法一:go get go get golang.org/x/crypto/ssh/terminal 但是这种方法容易被墙,出 ...

  7. hadoop细节 -> 持续更新

    Hdfs: hdfs写流程: 客户端通过DistributedFileSystem请求namenode上传文件 Namenode进行检查,比如父路径   文件本身,是否允许上传 Namenode相应信 ...

  8. 【开发工具】- Java开发必知工具

    压力测试工具_JMeter 作用 1.能够对HTTP和FTP服务器进行压力和性能测试, 也可以对任何数据库进行同样的测试(通过JDBC). 2.完全的可移植性和100% 纯java. 3.完全 Swi ...

  9. 车间管理难?APS系统为你智能排程

    对 APS系统不熟或者不了解他的一些运行规则也是在实施项目中导致经常不能正常运行不可忽视的因素,对 APS系统的早期了解是整个项目实施运行的成功至关重要的因素. 如果不了解 APS潜在的因素和运行准则 ...

  10. 介绍一种在ABAP内核态进行内表高效拷贝的方法,和对应的Java和JavaScript版本的伪实现

    内表操作是ABAP开发人员几乎在每个ABAP程序里都会遇到的. 看一个例子:有两个行结构不一样的内表,每个内表的行结构有三列,除了name这一列名字一致外,其他两列的名称都不同,下图用红色和蓝色标注出 ...