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. centos7中mysql的rpm包安装

    解决依赖 yum remove mysql-libs 执行命令:yum -y install autoconf 安装依赖 yum -y install autoconf 安装mysql rpm -iv ...

  2. java.lang.IllegalArgumentException: Invalid character found in method name. HTTP method names must be tokens

    请求的协议不对  解决方案: 把请求的https改成http 

  3. UI单据按钮点击事件校验

    一.按钮点击前事务处理<BeforeEventProcess> public override void BeforeEventProcess(IPart part, string eve ...

  4. 配置linux命令行界面的 文件显示颜色

    在linux命令行界面下使用ls命令时,有时会看见显示的文件会有不同的颜色,因为linux的文件没有后缀名这个概念(Windows系统中的文件会有后缀名,从而可以将文件标识为不同类型),显示不同的颜色 ...

  5. 使用jmeter对dubbo接口进行性能测试教程及常见问题处理

    一.   测试脚本编写 脚本可参考git项目: https://github.com/aland-1415/dubbo-interface-test.git 1. pom依赖 (注意添加的jmeter ...

  6. 浅谈JS中 var let const 变量声明

    浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...

  7. FreeRTOS软件定时器

    API函数 //创建 TimerHandle_t xTimerCreate( const char * const pcTimerName, const TickType_t xTimerPeriod ...

  8. css 和常用快捷键

    一.css概述: 1.规则:CSS 规则由选择器,以及一条或多条声明两个部分构成. 2.选择器:选择器通常是您需要改变样式的 HTML 元素. 3.声明:声明是您要设置的样式(每条声明由一个属性和一个 ...

  9. Linux命令——mknode

    参考:What is the mknod command used for? 前言 Linux下面,一切皆文件,当然也包括设备.Linux通过major.minor号来区分不同设备,如下图

  10. ES6开发环境准备及基础语法

    ES6开发环境准备及基础语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一. 二. 三.