网赚妈妈

 找回密码
 立即注册
搜索
查看: 202|回复: 8

[互粉微信群] web前端:教你撸一个这样的时钟

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-10-21 21:56:19 | 显示全部楼层 |阅读模式
    前段时间看到网上也有人做时钟案例,于是决定利用周末也做一下。虽然是一个小的案例,功能实现起来也不难,但是为了把界面做得精美一些,还是花了我差不多一下午的时间。我之前看到的网上的外观比较好看,就照着它的样子做了,先来看一下效果图:
    SMM8rRB8OXMOPomu.jpg 动态图

    主要代码:
    xAF2YilbO6oGRgCn.jpg html代码

    J313vYiGyiymIvHZ.jpg css代码

    这里的css代码主要贴出来的是表盘上数字排列的代码,1-12这12个数字360°均匀分布还是有点麻烦的,其他的样式实现起来比较简单。
    gaD6hH5h2TEEd5TE.jpg js代码

    js的代码全部贴出,表盘上的60个格子是js中动态创建,创建比较容易,主要就是排版稍微费点功夫。
    做的时间比较短,未全部测试,如果发现有什么bug,还请评论区告知,谢谢!
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-21 21:57:19 | 显示全部楼层
    难点在与刻度表的刻画,不知canvas可不可以搞出来,因为还不会[捂脸]
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-21 22:05:55 | 显示全部楼层
    都是用canvas撸的[泪奔]
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-21 22:14:37 | 显示全部楼层
    能给个github链接就好了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-21 22:22:55 | 显示全部楼层
    求源码
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-21 22:31:14 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-21 22:39:43 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-21 22:48:57 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-21 22:56:43 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-24 06:54 , Processed in 0.151404 second(s), 14 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表