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. golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

    micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go- ...

  2. 小菜鸡deepin系统手动更新火狐浏览器

    前言 Deepin 是个好系统,让我看到国产系统的希望,也让我看到Linux桌面化和大众化的可能(如果你想抬杠:Deepin只是Linux魔改没什么好显摆的.那--你开心就好 ^ _ ^ ).虽然有一 ...

  3. 打家劫舍II

    题目描述(LeetCode) 你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金.这个地方所有的房屋都围成一圈,这意味着第一个房屋和最后一个房屋是紧挨着的.同时,相邻的房屋装有相互连通的 ...

  4. ubuntu系统下防火墙简单使用

    apt-get install ufw      安装防火墙sudo ufw enable|disable|status         开启/关闭/查看防火墙状态sudo ufw allow 22/ ...

  5. Java之数据类型讲解

    Java数据类型关系图 基本数据类型 从小到大的关系图: 图中从左向右的转换都是隐式转换,无需再代码中进行强制转换 : byte i = 12; System.out.println("by ...

  6. PE系统——安装教程

    本教程使用到的软件我会在本文末给出,若失效了请私信我,重新上传. 1.安装PE系统前,把U盘插在电脑上(如果你需要安装Windows10系统,请插入一个容量至少8G的U盘).当然容量最好是32—64G ...

  7. sdcard不可执行.

    Possibly you placed it on your sdcard -- which is mounted with the noexec flag. You either need to m ...

  8. mybatis 变更xml文件目录

    mybatis的xml默认读取的是resources目录,这个目录是可以变化的.我习惯于将mapper文件和xml放到一起或相邻目录下. 如图: 具体操作: 以mybatis-plus为例 boots ...

  9. JUC - ThreadPoolExecutor

    JUC - ThreadPoolExecutor 创建一个ThreadPoolExecutor ThreadPoolExecutor( int corePoolSize, // 保留在池中的线程数,即 ...

  10. java requestmapping中关于路径的问题

    需要这种url写的方式才能映射