web前端入门到实战:纯js时钟特效

首页 > 科技 > 正文
2021-05-11

发表自话题:罗盘的使用方法入门

电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。

先准备一个html元素,用来放置时钟。新建一个div元素,它的id命名为clock,如下所示:

本实例电子时钟的格式设定为 (yyyy-MM-dd hh:mm:ss) ,用js来组合一个简单的时钟字符串放到clock元素中。

本实例把时钟功能封装到函数中,所以先创建一个creatClock函数,在creatClock中再来编写具体代码。

建议在完成某一个前端功能时,应先分析功能的具体操作。再根据具体操作把实现功能的方法分成多个步骤,接下来一个步骤一个步骤去完成它。来看一下用js组合这样一串字符,需要哪些步骤:

1 调用date对象,获取计算机的本地时间
  1.1 调用date对象
  1.2 获取当前年份
  1.3 获取当前月份,月份是从0开始计数,所以需要加1才是正确的月份
  1.4 获取当前日期
  1.5 获取当前小时
  1.6 获取分钟
  1.7 获取秒数
2. 格式化获取到的时间数据
  2.1 单数字前添加字符串0,用以符合时钟格式
  2.2 组合时间数据为字符串
3. 在clock元素中实时显示时间
  3.1 获取clock元素
  3.2 修改clock元素中的时间
  3.3 使用定时器实时更新时间

具体代码如下:

function fnCreatClock(){ //声明时间相关变量 var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds; //1 获取计算机本地时间 function fnGetDate(){ //1.1 调用date对象 dLocal = new Date(); //1.2 获取当前年份 nYear = dLocal.getFullYear(); //1.3 获取当前月份,月份是从0开始计数,所以需要加1才是正确的月份 nMonth = dLocal.getMonth() + 1; //1.4 获取当前日期 nDate = dLocal.getDate(); //1.5 获取当前小时 nHours = dLocal.getHours(); //1.6 获取分钟 nMinutes = dLocal.getMinutes(); //1.7 获取秒数 nSeconds = dLocal.getSeconds(); } //2.1 封装一个函数,用于把单数字前添加字符串0,例如1改为01 function fnToDouble(num){ //声明一个返回结果 var sResult = ''; if(num

标签组:[js] [js代码] [web前端

上一篇风水堪与用罗盘的奥秘

下一篇超详细PENTAX Astrotracer 星野摄影入门手册

相关阅读

热门阅读