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. 【华为敏捷/DevOps实践】7. 敏捷,DevOps,傻傻不分清楚【华为云技术分享】

    文:姚冬(华为云DevCloud首席技术布道师,资深DevOps与精益/敏捷专家,金融解决方案技术Leader,中国DevOpsDays社区核心组织者) 前言 敏捷是什么?DevOps是什么?两者有什 ...

  2. 四种方法获取可执行程序的文件路径(.NET Core / .NET Framework)

    原文:四种方法获取可执行程序的文件路径(.NET Core / .NET Framework) 本文介绍四种不同的获取可执行程序文件路径的方法.适用于 .NET Core 以及 .NET Framew ...

  3. 【imx6ul应用开发】如何修改串口?

    4.1如何修改串口?答:开发板已经调好了串口驱动,调试串口,只需要修改dts文件即可,客户可以根据实际需要,确定硬件管脚具体用哪一个. 打开内核源代码/arch/arm/boot/dts/myb-y6 ...

  4. linux技能点 二

    三.  文件操作:新增,删除,修改,查找,文件属性,文件内容查看,文件辅助命令,打包(解压缩),文件名注意事项.          新增:单文件,目录                         ...

  5. 个人项目—WC

     一,Github地址:https://github.com/mushan520/WC.git 二.PSP表格: PSP2.1 Personal Software Process Stages 预估耗 ...

  6. vue echarts中绑定的click函数无法引用vue实例data里面的数据

    在使用echarts的时候,需要在触发click事件之后去修改实例data里面的数据,可是发现用this引用后总是出现undefined, 解决办法: myChart.on('click', (par ...

  7. day 04 预科

    目录 变量 什么是变量 变量的组成 变量名的命名规范 注释 单行注释 多行注释 turtle库的使用 今日内容 数据类型基础 变量 具体的值 存不是目的,取才是目的 为了描述世界万物的状态,因此有了数 ...

  8. AXURE RP EXTENSION For Chrome----解决办法

    出现这个问题是因为chrome://extensions/中没有安装扩展程序 解决办法: 步骤一:情景再现,打开某个html会出现如下页面,不停地提示你安装插件 步骤二:如果点击安装扩展程序,能够成功 ...

  9. Oid 类

    参考地址:https://docs.microsoft.com/zh-cn/dotnet/api/system.security.cryptography.oid?redirectedfrom=MSD ...

  10. Flooded! UVA - 815 (sort排序)

    错了好多遍,不知道为啥出错,如果有大神发现,请求指点!!! 附错误代码(错的不知道怎么回事): #include<iostream> #include<cstdio> #inc ...