js傻瓜式制作电子时钟
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傻瓜式制作电子时钟的更多相关文章
- [TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板 一块 2.DS3231 ...
- 3分钟利用TurnipBit制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...
- Micropython TurnipBit 电子时钟 青少年编程入门
电子时钟是一个很常用但是制作非常简单的小玩具了,对于Micropython初学者来说,制作一个电子时钟是非常简单又容易检验自己学习成果的实验了.TurnipBit相比于其他开发板,制作电子时钟就更加简 ...
- JS实现电子时钟
目前有个小项目,在首页头部导航栏里需要一个电子时钟的效果,于是我就采用如下代码实现了一个电子时钟的效果.不过不完美,第一种方式容易导致网页莫名其妙的异常,后来觉得可能是做的操作太多了,然后 ...
- Js电子时钟
简单版电子时钟,需要以下几个步骤 1. 封装一个函数 返回当前的时分秒 2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用 3. 把获取到的时间放到span盒子里,添加样式 效果展示 实现 ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- 在线App开发平台——应用之星傻瓜式开发平台
随着智能手机及APP应用程序的普及,越来越多的企业和个人意识到APP的营销价值,出于对技术的敬畏,很多企业下意识认为开发APP是一个有难度的技术活,所以很多时候有心无力,也担心APP的后续的技术支持. ...
- Webpack 傻瓜式指南(一)
modules with dependencies webpack module bundler static assetss .js .js .png Webpack傻瓜式指南 n ...
- 如何使用win7自带的备份还原以及创建系统镜像------傻瓜式教程
对于经常鼓捣电脑的童鞋来说,装系统是一件极其平常的事情,不过系统装多了之后,我们会感到比较烦躁,因为每一次装系统意味着驱动的重新安装,程序的重新安装,每次这么鼓捣几次,半天时间就花在这上面了,效率是在 ...
随机推荐
- python使用自带模块httplib进行http请求
#-*- encoding:utf-8 -*- import httplib, time class httpRequest(): def __init__(self, headers, reques ...
- zcmu 1540第k大数
1540: 第k大数Time Limit: 10 Sec Memory Limit: 128 MB[Submit][Status][Web Board]Description有两个序列a,b,它们的 ...
- 【代码优化】C#遍历所有控件(Control方法)
直接上代码: /// <summary> /// 判断价格是否可以购买技能的方法 /// </summary> /// <param name="btnBuyA ...
- Mysql慢查询日志以及优化
慢查询日志设置 当语句执行时间较长时,通过日志的方式进行记录,这种方式就是慢查询的日志. 1.临时开启慢查询日志(如果需要长时间开启,则需要更改mysql配置文件) set global slow_q ...
- 供应链管理如何提高效率?APS系统成优化引擎
APS系统,虽然它的起兴只有短短的十几年,但是在这段时间里面,它为很多企业解决了很多人工手动.脑力不可解决的问题. 所以APS被誉为供应链优化引擎,APS常常被称为高级计划与排程,但也有称为高级计划系 ...
- react native 集成react navigation报错
集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:
- AM335X有关MMC的启动参数问题分析
AM335X有关MMC的启动参数问题分析 一. 问题来源 硬件平台:AM335X芯片 SDK版本:ti-processor-sdk-linux-am335x-evm-03.00.00.04-Linux ...
- 常用docker管理UI
1. HumpBacks 特性 Web UI Supporting, Easy to use. Container Grouping and Isolation. Container Upgrades ...
- NGINX状态模块的使用
nginx状态模块可以用来查看当前nginx服务器的并发量和总的请求数 启用nginx的状态模块 状态模块需要在编译安装的时候启用. 1.下载nginx源码包 2.安装nginx并启用模块 3.修改n ...
- spring的@Scheduled定时任务,同一时间段的定时任务只会执行一个,其余的会被阻塞,@Scheduled注解定时任务并发执行解决办法,即多线程运行定时任务
原文:https://blog.csdn.net/qq_35937303/article/details/88851064 现有两个定时任务 @Component("aa") pu ...