首页 > 软件开发 > JavaScript >

如何用js实现网页时钟效果

来源:互联网 2023-03-16 23:56:23 309

平时我们看的都是实物时钟,或是电脑的自带时钟,但是小伙伴们你们学习了js之后,有没有想过自己写一个时钟呢,这是一件很过瘾的事情。z06办公区 - 实用经验教程分享!

工具/原料

  • 编辑器
  • html文件

方法/步骤

  • 1

    首先写html代码结构,其实就是一个容器而已,后面的基本都是js的事情了。z06办公区 - 实用经验教程分享!

    如何用js实现网页时钟效果z06办公区 - 实用经验教程分享!

  • 2

    样式代码也很简单,也就是居中加字体颜色的设置z06办公区 - 实用经验教程分享!

    如何用js实现网页时钟效果z06办公区 - 实用经验教程分享!

  • 2该信息未经许可获取自百度经验
  • 3

    下面是重头戏咯,就是js代码,首先获取 div 标签返回的对象,然后创建一个定时器,一秒调用一次这个方法,然后我们写一个settime自定义方法,里面是获取时分秒的代码,然后最后拼接并且显示。z06办公区 - 实用经验教程分享!

    如何用js实现网页时钟效果z06办公区 - 实用经验教程分享!

  • 4

    效果如下图z06办公区 - 实用经验教程分享!

    如何用js实现网页时钟效果z06办公区 - 实用经验教程分享!

  • 注意事项

    • 希望大家可以自己手动敲代码,这样更容易记忆

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


    标签: JAVASCRIPTJQUERY

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