1. 前言

今天看专业书看累了便在源码之家上闲逛了一番，想看看有没有有意思的JS代码，还真发现了一个名叫《JavaScript特效大全》的ebook代码集，打开一看代码，有点年头了，至少距今有十多年的了。刚好作为一名JS初学者正好利用这个特效大全来练一练代码，重新写一下里面的特效，排解一下考研的压力！顺便增长一下Vanilla JavaScript的实力。一箭双雕！

2. 主要思路

HTML结构为一个<div>构成，设置id为clock。并设置简单的CSS样式，在此不详细讲解。

<div id="clock"></div>

JS代码思路如下：

1.创建函数showTime()，核心代码主要在showTime()当中。
2.创建一个Date()实例，并获取年、月、日、星期、小时、分钟、秒
3.采用12小时制表示法 ，设置AM和PM触发条件
4.设置分和秒显示格式为00方法。如，09分或09秒
5.利用switch函数判断星期
6.将获取到的时间存放在变量node中，并将node插入到clock中
7.利用setInterval调用 showTime()函数

3. JS代码

 function showTime() {var digital = new Date(); //创建一个Date()实例var year = digital.getFullYear(); //年var month = digital.getMonth() + 1; //月var day = digital.getDate(); //日  var dayToday = digital.getDay(); //获取星期var hours = digital.getHours(); //小时var minutes = digital.getMinutes(); //分钟var seconds = digital.getSeconds(); //秒var dn = "AM"; //初始化dnif(hours > 12) {dn = "PM";hours -= 12; //十二小时进制}//当hours为0时，转化为12时if(hours == 0) {hours = 12;}//当minutes小于等于9时，显示为09if(minutes <= 9) {minutes = "0" + minutes;}//当seconds小于等于9时，显示为09if(seconds <= 9) {seconds = "0" + seconds;}//利用switch函数进行判断星期switch(dayToday) {case 0:dayToday = "星期日";break;case 1:dayToday = "星期一";break;case 2:dayToday = "星期二";break;case 3:dayToday = "星期三";break;case 4:dayToday = "星期四";break;case 5:dayToday = "星期五";break;case 6:dayToday = "星期六";break;}var node = "<font size='4' face='微软雅黑'><b><font size='3'>当前时间为: </font></br>" +year + "年" + " " +month + "月" +day + "日" + " " +hours + "时" + ":" +minutes + "分" + ":" +seconds + "秒" + " " +dn + " " + dayToday;document.getElementById("clock").innerHTML = node;}//setInterval() 方法会不停地调用函数,达到一个动态的效果setInterval(function() {showTime();}, 1000);

4. 效果展示

▲时钟显示在任意指定位置效果图

5. 总结

通过重写时钟显示在任意指定位置这个“特效”，我在原来代码的基础上新增了年月日和星期，同时复习了Switch函数的使用和将样式简单的插入HTML的方法，以及加深了setInterval方法的使用。

重写JavaScript特效大全 | 时钟显示在任意指定位置---01相关推荐

JavaScript实现动态时钟显示
目录动态时钟显示效果代码实现 1.创建html文件(时钟显示.html) 2.设置html标签 3.设置html标签的CSS样式 4.设置JavaScript 1)创建函数和Date 2)获取da ...
javascript 数组替换删除插入元素到指定位置
Splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组, 并以数组形式返回被修改的内容.此方法会改变原数组. splice(一,二,三) 参数一: 删除指定位置参数二:删除个数 ...
javascript特效模拟marquee
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><script type ...
使用javascript生成的植物显示过程特效
查看效果:http://keleyi.com/keleyi/phtml/html5/33.htm .NET版本:http://keleyi.com/a/bjac/66mql4bc.htm 完整HTML ...
html时显示当前时间的时钟,javascript实现页面的实时时钟显示示例
时钟实现实现这个时钟时间需要解决以下三个问题: 获得当前时间,并格式化如何可以在页面中显示时间让时间动起来 1.获得当前时间,并格式化要获得当前时间,可以使用JavaSctipt的Date对象 ...
个性JavaScript特效页面大全
个性JavaScript特效页面大全 (在展示页面右键--查看源文件即为源码): 1:警报对话框篇 2:菜单导航篇 3:状态栏特效篇 4:浏览器篇 5:页面背景篇 6:页面导航篇 7:页面搜素篇 8: ...
javascript库函数大全
Global(全局对象/属性) Global 全局对象 Infinity 表示无穷大的数字属性 NaN 非数字属性 undefined 未定义值 Global 全局对象可用性 JavaScr ...
谁也别拦我！今天我要曝光JavaScript 资源大全中文版！
JavaScript 资源大全中文版我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 ...
JavaScript面试大全
JavaScript面试大全 1.求y和z的值是多少? var x = 1; var y = 0; var z = 0; function add(n){n=n+1;} y = add(x); fun ...
JavaScript单词大全及部分常用代码
JavaScript单词大全及部分常用代码 0~9var i=0; //声明变量let i=0; //声明变量,块级作用域const PI=3.14; //声明常量console.log(str) / ...

重写JavaScript特效大全 | 时钟显示在任意指定位置---01

文章目录