首页 > 软件开发 > JavaScript >

用简单JavaScript代码制作时钟(高级版)

来源:互联网 2023-03-16 23:57:09 94

在网页上显示当前系统时间?两三行JavaScript代码即可搞定?不信,让我们来试一试!这次是高级版本,有很多CSS3的特效哦!fQr办公区 - 实用经验教程分享!

方法/步骤

  • 1

    第一步,构建一个时钟的外观。这里用到了border-radius:50%;来画出一个圆形fQr办公区 - 实用经验教程分享!

    用简单JavaScript代码制作时钟(高级版)fQr办公区 - 实用经验教程分享!

    用简单JavaScript代码制作时钟(高级版)fQr办公区 - 实用经验教程分享!

  • 1本页面未经许可获取自百度经验
  • 2

    第二步,创建成功后我们尝试着打开网页,在浏览器里面F12调出开发者调试工具,修改rotate的角度,可以发现“秒针”动了!划重点!fQr办公区 - 实用经验教程分享!

    用简单JavaScript代码制作时钟(高级版)fQr办公区 - 实用经验教程分享!

    用简单JavaScript代码制作时钟(高级版)fQr办公区 - 实用经验教程分享!

  • 3

    第三步,上次在初级版那篇经验里面,我们创建了一个简单的时钟,这里可以拿来修改一下。获取到当前的系统时间:Thu Dec 07 2017 21:10:05 GMT 0800 (中国标准时间)fQr办公区 - 实用经验教程分享!

    用简单JavaScript代码制作时钟(高级版)fQr办公区 - 实用经验教程分享!

  • 4

    第四步,取得当前时分秒对应在圆圈里面的角度fQr办公区 - 实用经验教程分享!

    用简单JavaScript代码制作时钟(高级版)fQr办公区 - 实用经验教程分享!

  • 5

    第五步,获得对应角度后,把角度赋给对应的秒针、分针、时针fQr办公区 - 实用经验教程分享!

    用简单JavaScript代码制作时钟(高级版)fQr办公区 - 实用经验教程分享!

  • 6

    第六步,将以上代码封装成一个函数,并且每个1秒调用一次函数实时刷新网页中的时间fQr办公区 - 实用经验教程分享!

    用简单JavaScript代码制作时钟(高级版)fQr办公区 - 实用经验教程分享!

  • 7

    最后说两句,可以看到,相比上一次的初级版,高级版无疑变得好玩了一些,有能力的朋友可以尝试着在时钟上面加上数字来优化。这次只是在初级版的基础上增加了一个界面美化来实现如何在网页上显示当前时间,明白原理之后其实很简单。希望能帮到你!如果觉得有用,请点赞投票支持一下,谢谢^_^^_^!!fQr办公区 - 实用经验教程分享!

  • 注意事项

    • CSS3的transform在低版本IE浏览器里面不兼容!!!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!fQr办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码