抖音罗盘时钟

最新推荐文章于 2023-05-29 22:02:43 发布
最新推荐文章于 2023-05-29 22:02:43 发布
阅读量6.4k 收藏 45
点赞数 21
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LIAOJIASONG1024/article/details/102370406
版权

***其实很早以前就想发了，很多东西其实并不难，只要多动手动脑就行了，下面直接上代码，其他的自己下去慢慢研究吧！

HTML部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js仿抖罗盘时钟</title>

<link rel="stylesheet" href="css/demo.css">

</head>
<body>

<div id="clock"></div>

<script src="js/demo.js"></script>

</body>
</html>

css部分代码：

*{
   
    margin:0;
    padding:0
}
html,body{
   
    width:100%;
    height:100%;
    background-color:#000;
    overflow:hidden
}
#clock{
   
    position:relative;
    width:100%;
    height:100%;
    background:#000
}
.label{
   
    display:inline-block;
    color:#4d4d4d;
    text-align:center;
    padding:0 5px;
    font-size:19px;
    transition:left 1s,top 1s;
    transform-origin:0% 0%
}

JavaScript部分代码：

var monthText=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
var dayText=["零一号","零二号","零三号","零四号","零五号","零六号","零七号","零八号","零九号","十号","十一号","十二号","十三号","十四号","十五号","十六号","十七号","十八号","十九号","二十号","二十一号","二十二号","二十三号","二十四号","二十五号","二十六号","二十七号",
最低0.47元/天 解锁文章
搞开发的小哥哥
关注
  • 21
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
用JavaScript写抖音很火的罗盘时钟，附源码
编程界明世隐的博客
03-25 9553
原生js制作在抖音上很火的罗盘布局时钟代码。带日期、月份、星期、时分秒圆盘时钟。 效果图： 3个构造函数 文本构造函数 //文字的构造函数 function Text(o){ this.x=0,//x坐标 this.y=0,//y坐标 this.disX=0,//x坐标偏移量 this.disY=0,//y坐标偏移量 this.text='',//内容 this.font=null;//字体 this.textAlign=null;//对齐方式 this
【罗盘时钟（星空版）---使用html,js,css编写。（附全部源代码+效果）】| 面试题：什么是性能优化？列举一些常见的前端性能优化策略；CDN加速，缓存，HTTP请求次数，懒加载
热门推荐
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
07-26 5万+
效果 换个背景： 源代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSDN---追梦者</title> <link rel="stylesheet" href="css/clock.css"> </head> <body> <ul class="clock" id="
八卦时钟html代码_自制酷酷罗盘时钟（附代码）
weixin_39569894的博客
12-08 1万+
复制以下代码，到txt文档，保存，后缀改为html。即可。罗盘时钟* {margin:0;padding:0;}#wrap {position:fixed;left:0;top:300px;width:800px;height:800px;border:1px solid #000;position:fixed;left:0;top:0;color:gold;font-size:14px;posi...
抖音超火❤罗盘时钟(附源码)
12-21
抖音时钟原生JS文字钟源码由目前市面上比较给力的抖音数字罗盘源码，精致简洁的外观搭配创意的罗盘效果，用户可以自由挑选数字罗盘特效，这里整合了目前比较创新的特效玩法，设计感十足，小伙伴们可以前来本站，根据提示快速设计打造出来哦~ 在线演示地址:https://blog.csdn.net/qq316148300/article/details/111473371
关于真实时钟的代码讲解
Hanson1019的博客
05-28 1669
关于真实时钟的代码讲解
c++简单时钟代码实现
euwue的博客
11-11 3362
以上是简单时钟板块，这里要注意按原慕课中代码在Visual Stdio 上生成会出错，原因是重复声明了h,m,s要在private中删去int h,m,s.
用C++实现一个时钟程序，完整源代码
m0_69084985的博客
05-29 2212
C++时钟程序完整源代码，在Dev-c++和Visual Studio 2022上实测编译通过
罗盘时钟
weixin_45743799的博客
11-25 2997
用HTML和CSS以及JavaScript实现罗盘时钟。 原理分析： 1.年月日时分秒的定义 2.定时器的使用 3.分钟到小时如何变化 4.定义数组存放内容 效果演示 初始状态 时间显示 代码展示 HTML内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
js仿抖音罗盘时钟代码
06-24
在给定的“js仿抖音罗盘时钟代码”中，我们探讨的是如何利用JavaScript实现一个类似抖音上的罗盘时钟，这种时钟具有独特的视觉效果，包括月份、星期、时、分、秒的圆盘展示。 一、基础知识 1. JavaScript基础：...
罗盘时钟（星空版，全部源代码）.rar
07-26
这是“罗盘时钟”星空版的全部源代码，具体效果我在博客中已经展示了，还不错，可以根据背景，自己随便再去修改哈！需要的朋友可以下载！！！
JavaScript实现抖音罗盘时钟
10-16
JavaScript实现的抖音罗盘时钟是一种创意的网页时钟效果，它模拟了真实世界中的罗盘，用指针指示当前的时间。在这个时钟中，时间的显示方式是独特的，不仅有数字表示，还通过转动的指针来动态展示。下面我们将详细...
抖音罗盘时钟javascripts版本源码
05-21
【标题】：“抖音罗盘时钟javascripts版本源码”是指使用JavaScript编程语言实现的一款模拟抖音风格的罗盘式时钟。这种时钟通常具有独特的视觉效果和动态表现，能够吸引用户注意力，常用于网站或者应用中的个性化...
H5原生抖音罗盘时钟代码免费分享
11-17
本资源“H5原生抖音罗盘时钟代码免费分享”正是利用了HTML5的强大能力，提供了一种新颖的、基于文字的时钟展示方式，模仿了抖音上流行的罗盘式设计。下面将详细讲解这个项目中的关键技术点。 首先，原生JavaScript...
CSS+JS+HTML实现罗盘时钟（附完整代码）
willwe的博客
06-11 2万+
CSS+JS+HTML实现罗盘时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge".
罗盘时钟代码
2303_77137340的博客
04-08 1510
接下来就是核心内容了，我们要使用JavaScript来绘制罗盘时钟。以上就是罗盘时钟的基本实现，您可以根据自己的需要进行优化和修改。
不会编程也能亲手编写一个桌面数字小时钟程序，仅3步轻松实现
Yuki1127918的博客
08-23 1805
开发一款自己专属的软件应用很难吗？不会编程也能亲手编写一个桌面数字小时钟程序，仅需3步教你轻松实现，人人都可学。
分享111个JS时钟代码特效，总有一款适合您
zy0412326的专栏
02-07 1837
JS
html制作抖音罗盘时钟
最新发布
06-25
### 回答1： HTML制作抖音罗盘时钟可以通过以下步骤实现： 1. 首先，在HTML文档中增加一个canvas标签，设定其宽度和高度。 2. 在JavaScript中编写函数来绘制罗盘外框和表盘刻度。罗盘外框可以使用arc()方法绘制，表盘刻度可以使用rotate()方法旋转canvas并使用线条或文字绘制。 3. 编写函数来计算罗盘指针的位置，可以使用Date对象获取当前时间，通过计算角度来确定指针位置。 4. 定时调用指针位置计算函数并清除canvas，重新绘制罗盘外框和表盘刻度，以及指针位置。 5. 可以添加CSS样式来美化罗盘时钟的外观，例如设置背景颜色、字体样式和字号等。 通过以上步骤，我们可以实现一个简单的抖音罗盘时钟效果。随着对canvas和JavaScript的深入理解，还可以添加更多自定义功能，例如设置动态背景、添加闹钟功能等，以适应不同的需求。 ### 回答2： HTML制作抖音罗盘时钟的主要思路是将罗盘时钟分为两个部分：一个是罗盘指针，另一个是时钟刻度。其中罗盘指针包括罗盘底盘和指针本身，时钟刻度则是在罗盘底盘外部绕行的刻度线。 首先，我们需要将罗盘时钟放置在一个html页面中的canvas元素上，这个canvas元素作为整个罗盘的基座，罗盘指针和时钟刻度都是在这个canvas元素上进行绘制的。 接着，我们需要用JavaScript代码来控制罗盘指针和时钟刻度的运动。具体地，我们可以定义一个函数用于获取当前时间，并将其转换为具体的度数。这个度数可以用来控制罗盘指针和时钟刻度的旋转。 然后，我们可以使用canvas元素提供的API来绘制罗盘底盘、指针和刻度线。对于罗盘底盘和指针，我们可以分别使用canvas的圆形和路径绘制方法来实现。对于刻度线，我们可以使用canvas的线性绘制方法，通过旋转画布的方式让刻度线绕着罗盘底盘外部旋转。 最后，我们需要使用定时器来控制罗盘指针和时钟刻度的持续运动。在每个定时周期内，我们可以调用前面定义的时间获取函数，计算出新的罗盘指针和时钟刻度应该旋转的度数，并通过canvas的API来重新绘制罗盘时钟即可。 综上所述，通过HTML和JavaScript的结合，我们可以实现抖音罗盘时钟的制作。这不仅可以作为一个有趣的网页小玩意儿来提升页面的趣味性，还可以为我们展示HTML和JavaScript的动态图像处理能力。 ### 回答3： 抖音罗盘时钟是一款很有趣的应用，许多人都想学习如何制作它。HTML是一种非常适合制作网页的语言，它可以将网页中的内容和效果呈现得十分生动。下面我将详细介绍一下HTML制作抖音罗盘时钟的步骤。 首先，我们需要新建一个HTML文件，并在文件中添加必要的HTML代码。接着，我们需要定义页面中的样式，包括字体、颜色、大小等等。然后，我们需要添加JS代码实现罗盘的效果。在JS中，我们需要计算罗盘指针的角度，以及每秒钟指针需要旋转的角度。 在计算角度时，我们需要使用Math库中的sin和cos函数，以及一个时间变量。通过不断更新时间变量，我们可以得到一个不断变化的角度值，并将其应用于罗盘指针。在每秒钟定时器中，我们需要更新罗盘指针的旋转角度，并将其应用于页面元素。 最后，为了让罗盘时钟更加生动，我们还可以添加动画效果和音效。 总体来说，制作抖音罗盘时钟需要掌握HTML、CSS和JavaScript的基础知识，需要花费一定的时间和精力。但是，一旦制作完成，可以得到一个非常有趣的网页应用，让人们可以在休闲时间里玩耍和娱乐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值