基于JavaScript的电子时钟效果实现

来源:用户上传      作者:周芷仪 陈婷 袁莹静

　　摘  要： Web网站为了给客户端用户提供更好的操作体验和更多的便捷服务，将很多原来属于服务器端的功能通过Java Script功能在Web客户端实现，例如，对表单内容和格式即时的验证、页面内容的美化等。在现如今Web页面的各种效果中，JavaScript与HTML5的结合更加增添了网页的良好视觉效果。在网页中实现时钟的效果有很多种，有刻度表盘时钟的效果以及电子数字时钟的样式等。本文所提到的电子数字时钟以数字跳动变化的形式显示当前时间，从而达到目标效果。
　　关键词： JavaScript;HTML5;电子时钟;Web页面
　　中图分类号： TP311.1    文献标识码： A    DOI：10.3969/j.issn.1003-6970.2019.03.013
　　【Abstract】： In order to provide a better operating experience and more convenient services for client users， Web sites implement many functions that are originally server-side through the Java Script function in the Web client， for example， instant verification of form content and format， page content. Beautification and so on. In the various effects of today's Web pages， the combination of JavaScript and HTML5 adds a good visual effect to the web page. There are many effects of implementing a clock in a web page， including the effect of a scale dial clock and the style of an electronic digital clock. The electronic digital clock mentioned in this paper displays the current time in the form of digital jitter changes to achieve the desired effect.
　　【Key words】： JavaScript; HTML5; Electronic clock; Web page
　　0  引言
　　随着互联网的逐步发展和网络用户人数的指数型暴增，各种基于Web的网络应用和服务也在海量增长。Web网站为了给客户端用户提供更好的操作体验和更多的便捷服务，将很多原来属于服务器端的功能通过Java Script功能在Web客户端实现，例如，对表单内容和格式即时的验证、页面内容的美化等。随着Web技术的不断进步和网页技术普及，各式各样的Web设计将受到越来越多的Web设计师的青睐。在现如今Web页面的各种效果中，JavaScript与HTML5的结合更加增添了网页的良好视觉效果。在网页中实现时钟的效果有很多种，有刻度表盘时钟的效果以及电子数字时钟的样式等。本文所提到的电子数字时钟以数字跳动变化的形式显示当前时间，从而达到目标效果。另外设定增加特定时间的计划事件功能，将时间显示与计划添加放在同一个页面中，充实了网页的内容，原本单一的时间显示效果增加了更多的用户交互功能。该功能的实现是在HTML、CSS、JavaScript三大语言支柱的基础之上，增加使用HTML5中的<canvas>元素，完成整个数字时钟从布局到运行的总体实现。其中HTML搭建总体框架，CSS用来控制网页外观的规则，增加网页的多种外观效果，包括透明、阴影等，吸引更多體验用户进行访问，JavaScript 则是可以辅助用户得到更好的画面效果，同时保证代码和内容的分离。HTML5添加了许多新的语法特征，其中包括<video>、<audio>和<canvas>元素等，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。有了多种技术相辅相成的支持，数字时钟以及计划事件添加得以实现。
　　1  数字时钟实现原理
　　准备好0至9十张等大的数字图片，将十张图片的相对存放路径以元素的形式存放到一个数组中。设置函数获取当前时间，并得到时间的时、分和秒的数字，根据获取到的时间数字指向对应的数组元素，将数组中的数字图片正确地显示在指定位置。利用定时器实现每个一秒执行一次函数，即实现数字时钟以秒为单位持续显示当前时间。在数字时钟后的添加事件计划则是通过文本框输入事件内容以及时间的设置，用onclick事件触发函数，获取文本框和设置时间的value值，并将所得到的值作为内容以列表项的形式添加到<div>容器中，形成列表序列。
　　2  数字时钟效果概述
　　时钟获取到当前时间后，以时、分和秒的顺序从左向右以此显示，数字为两位数，则正常显示，数字为十以内的数字时，则十位数显示0，个位数显示从当前时间获取到的数字。增加定时器，设置每隔一秒调用一次函数，保证每一秒钟都能获取到新的时间，从而不断的呈现出正确时间。小时数与分钟数之间，以及分钟数与秒数之间有上下两个圆点，以呈现完整的数字时钟视觉效果。时钟下方的文本框中可输入计划事项，利用数字空间设定时间，点击按钮后可将设定的事件内容及发生时间加入到列表中，使得计划在列表中依次显示。 　　3  编程语言介绍
　　3.1  HTML以及HTML5
　　HTML为超文本标记语言（Hyper Text Markup Language）。是一种用于创建网页的标准标记语言。HTML作为一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。
　　HTML5是HTML最新的修订版本，由万维网联盟（W3C）完成标准制定。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务，并且提供更多能有效加强网络应用的标准集。本文中所采用的是HTML5中的canvas画布技术，canvas由HTML代码中定义的可绘制区域组成，具有高度和宽度属性。JavaScript代码可以通过与其他常见2D API类似的全套绘图功能访问该区域，从而允许动态生成的图形。画布的一些预期用途包括构建图形，动画，游戏和图像合成。
　　3.2  CSS技术
　　CSS为层叠样式表（Cascading Style Sheets）。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
　　3.3  JavaScript技术
　　JavaScript，通常缩写为JS，是一种高级的，解释执行的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支。JavaScript还是一种轻量级的编程语言，可插入HTML页面的编程代码，并且插入 HTML 页面后。JavaScript还可作为一种直译式脚本语言，是动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML网页增加动态功能。JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。本文所用到的JavaScript脚本是通过嵌入在HTML中来实现自身的功能。
　　4  数字时钟具体实现
　　4.1  HTML布局
　　5  结语
　　本文在HTML与CSS的基础上，利用JavaScript脚本语言实现动态的数字时钟效果。添加HTML5中的canvas画布元素，在界面中增加绘图效果。使用JavaScript中的定时器方法来控制数字时钟的变化，定时器中的函数用来设置动态获取当前时间，保证了时钟的实时更新。
　　从面向对象的角度来看，JavaScript是一种纯面向对象的语言，甚至函数本身也是对象;但同时又具有一些其特有的语言特性，如动态类型、无类动态对象、原型继承、闭包、函数式编程等。作为脚本语言广泛应用于web开发，JavaScript在网页中添各式各样的动态效果，从而在用户体验度的舒适性和流畅度方面进行很大的提升，并且在访问交互性中有更多动态效果。
　　各大网站以及基于B/S模式的浏览器窗口的前端实现都少不了HTML、CSS以及JavaScript这三大件的支持。HTML搭建前端骨架，CSS用于页面的初步渲染，而JavaScript则实现用户的动态交互与效果实现。在JavaScript多年发展的状态下，近年来有越来越多的前端技术层出不穷，如YUI3、Kissy以及Frozen UI等众多UI框架，react、vue、Angular等技术框架以及库等。迭代更新的技术能满足和提升越来越多用户的需求，前端发展也在此过程中不断壮大。
　　参考文献
　　[1] 马洪亮， 王伟， 韩臻. 混淆恶意JavaScript代码的检测与反混淆方法研究[J]. 计算机学报， 2017， 40（07）： 1699-1713.
　　[2] 臧进进， 鄂海红. 基于响应式Web设计的网页生成系统研究与实现[J]. 软件， 2015， 36（6）： 37-41.
　　[3] 周芷仪， 陈婷. 浅谈网页中实现图片轮播图效果的方法[J].软件， 2018， 39（10）： 187-191.
　　[4] 荣艳冬. 以岗位需求为导向的Javascript课程构建[J]. 软件， 2015， 36（06）： 18-20.
　　[5] 李轶. 基于JavaScript的面向对象程序设计研究[J].江汉大学学报（自然科學版）， 2010， 38（03）： 52-56.
　　[6] 郑俊生， 姜敏. 一种基于Div+CSS+JavaScript的网页布局特效研究[J]. 电脑知识与技术， 2008（17）： 1556-1558.
　　[7] 闫志英. 浅析Web前端开发技术[J]. 无线互联科技， 2016（02）： 47-48.
　　[8] 陈月， 秦福建. Web前端开发技术以及优化方向探究[J]. 信息与电脑（理论版）， 2016（04）： 35+37.
　　[9] Jeremy Keith， Jeffrey Sambells. JavaScript DOM编程艺术[M]. 北京： 人民邮电出版社， 2011： 1-3.
转载注明来源:https://www.xzbu.com/8/view-15016152.htm