发表自话题:罗盘的使用方法入门
电子时钟是网上常见的功能,在学习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上一篇:风水堪与用罗盘的奥秘