相思资源网 Design By www.200059.com
又来一个时钟效果了，这个的实现不需要canvas，都是div、ul、li画出的，好玩有真实。
哈哈~
需要的js才能实现到走动这个效果，但js的内容不多，也不难。
主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟
在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（rotate）实现了，它的刻度
使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和
圆心接触的吗，那么设置时针的底部为旋转点不就OK了，大概的说了说思路。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style id="css">
#clock{
width: 200px;
height: 200px;
border: 2px solid #000;
border-radius: 50%;
margin: 100px auto 0;
position: relative;
}
#clock ul{
width: 200px;
height: 200px;
position: relative;
list-style: none;
padding:0;
margin: 0;
}
#clock ul li{
width: 2px;
height: 10px;
background: #000;
transform-origin: center 100px;
position: absolute;
top: 0;
left: 50%;
}
#clock ul li:nth-of-type(5n+1){
height: 20px;
}
#hour{
height: 40px;
width: 4px;
background: #00fefe;
position: absolute;
top: 60px;
left: 99px;
transform-origin:center bottom;
}
#min{
height: 60px;
width: 3px;
background: #001afe;
position: absolute;
top: 40px;
left: 99px;
transform-origin: center bottom;
transform: rotate(15deg);
}
#sec{
height: 70px;
width: 2px;
background: #000;
position: absolute;
top: 30px;
left: 99px;
transform-origin:center bottom;
}
#dot{
width: 10px;
height: 10px;
position: absolute;
left: 95px;
top: 95px;
background: #aaa;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="clock">
<ul></ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="dot"></div>
</div>
<script>
var oCss=document.getElementById("css");
var oClock=document.getElementById("clock");
var oUl=oClock.getElementsByTagName("ul")[0];
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
var strLi="";
var strCss="";
for(var i=0;i<60;i++){
strLi+="<li></li>";
}
oUl.innerHTML=strLi;
for(var i=0;i<60;i++){
strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}';
}
oCss.innerHTML+=strCss;
time();
setInterval(time,1000);
function time(){
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
oHour.style.transform="rotate("+(h+m/60)*30+"deg)";
oMin.style.transform="rotate("+(m+s/60)*6+"deg)";
oSec.style.transform="rotate("+s*6+"deg)";
}
</script>
</body>
</html>
使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部css样式表是可以使用获取元素的方式获取的，这样就可以 使用innerHTML为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好1秒的时间，每1 秒执行一次函数，这样它就是动起来了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
transform,时钟
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无又一款js时钟!transform实现时钟效果的评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。