- 资源介绍
- 更新记录
- 安装教程
一款带有年月日星期数字日期时间跟指针一体时钟jQuery代码。
js代码
<script> $(function(){ var clock = document.getElementById("clock"); function initNumXY(){ // 1、12个数字的位置设置 var radius = 160;//大圆半价 var dot_num = 360/$(".dot").length;//每个div对应的弧度数 //每一个dot对应的弧度; var ahd = dot_num*Math.PI/180; $(".dot").each(function(index, el) { $(this).css({ "left":180+Math.sin((ahd*index))*radius, "top":180+Math.cos((ahd*index))*radius }); }); // 2、刻钟设置 for(var i = 0; i < 60; i++) { clock.innerHTML += "<div class='clock-scale'> " + "<div class='scale-hidden'></div>" + "<div class='scale-show'></div>" + "</div>"; } var scale = document.getElementsByClassName("clock-scale"); for(var i = 0; i < scale.length; i++) { scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)"; } } initNumXY();//调用上面的函数 //获取时钟id var hour_line = document.getElementById("hour_line"), minute_line = document.getElementById("minute_line"), second_line = document.getElementById("second_line"), date_info=document.getElementById("date_info"),//获取date_info hour_time = document.getElementById("hour_time"),// 获去时间id minute_time = document.getElementById("minute_time"), second_time = document.getElementById("second_time"); //3、设置动态时间 function setTime(){ var nowdate = new Date(); //获取年月日时分秒 var year = nowdate.getFullYear(), month = nowdate.getMonth()+1, day = nowdate.getDay(), hours = nowdate.getHours(), minutes = nowdate.getMinutes(), seconds = nowdate.getSeconds(), date = nowdate.getDate(); var weekday =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // 获取日期id date_info.innerHTML=year+"年"+month+"月"+day+"日 "+weekday[day]; hour_time.innerHTML = hours >=10 ? hours : "0"+hours; minute_time.innerHTML = minutes >=10 ? minutes : "0"+minutes; second_time.innerHTML = seconds >=10 ? seconds : "0"+seconds; console.log(year+"年"+month+"月"+day+"日 "+weekday[day]); //时分秒针设置 var hour_rotate = (hours*30-90) + (Math.floor(minutes / 12) * 6); hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)'; minute_line.style.transform = 'rotate(' + (minutes*6 - 90) + 'deg)'; second_line.style.transform = 'rotate(' + (seconds*6 - 90)+'deg)'; } // setTime(); setInterval(setTime, 1000); }); </script>
猜你喜欢
-
html5 canvas彩色条纹旋涡动画特效
2021-02-07 -
SimpleCalendar.js简单带农历节日的日历插件
2021-02-13 -
TweenMax.js+HTML5 Canvas动态水彩画板涂色特效
2021-02-13 -
jquery动态滚动条加载效果
2021-02-13 -
html5 svg手绘卡通风格统计图表特效
2021-02-07 -
CSS3绘制可爱卡通鸡蛋动画特效
2021-02-07 -
HTML5+CSS3可爱卡通人物奔跑动画效果
2021-02-13 -
简单好看的CSS3按钮点击气泡动画特效
2021-02-13 -
css3水波纹混合背景元素动画特效
2021-02-07 -
漂亮的Canvas鼠标箭头跟随动画特效
2021-02-13
-
css3模拟3D效果城市夜间行走动画特效
2021-02-13 -
jquery模拟安卓手机桌面左右(上下)滑动效果
2021-02-07 -
后台读取文本内容用正则表达式替换换行符
2021-02-13 -
jquery模拟safari浏览器输入框获取焦点后边框阴影
2021-02-07 -
15个CSS3动态输入框input框代码
2021-02-13 -
html5 canvas飞舞的蝴蝶动画特效
2021-02-07 -
HTML5 Canvas矩阵粒子波浪背景动画特效
2021-02-13 -
简单的百分比进度条样式代码
2021-02-13 -
HTML5 Canvas邪恶之眼火焰燃烧动画特效
2021-02-07 -
HTML5 Canvas火焰画笔动画特效
2021-02-13
猜你在找
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!lyebiz@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
优源网 » jQuery年月日星期数字日期时间跟指针一体时钟代码
优源网 » jQuery年月日星期数字日期时间跟指针一体时钟代码
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 资源不能下载?
- 2021-02-13Hi,初次和大家见面了,请多关照!