html css 圆圈数字,html5 css3带日期的圆形数字电子时钟代码
特效描述:html5 css3 带日期 圆形数字 电子时钟代码。HTML5+CSS3圆形数字电子时钟。
代码结构
1. 引入JS
2. HTML代码
$(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 += "
"
"
"
";
}
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);
});
html css 圆圈数字,html5 css3带日期的圆形数字电子时钟代码相关推荐
- html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画
jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...
- 【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
- css html5360百科,HTML5+CSS3王者归来
HTML5+CSS3王者归来 语音 编辑 锁定 讨论 上传视频 <HTML5+CSS3王者归来>是清华大学出版社出版的一本图书. 书 名 HTML5+CSS3王者归来 作 者 ...
- html鼠标滑过带音效,html5 + css3 带音效下拉菜单的实现
原文:scripts tutorials (来自脚本教程网的教程,翻译可能有些不对...想要试试 音效下拉菜单 在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3).下拉 ...
- html5圆圈,圆形按钮HTML5/CSS3 button代码
HTML5/CSS3 3D立体功能按钮在线演示 .screen-reader-text { position: absolute; top: -9999px; left: -9999px; } @fo ...
- html5圆圈闪烁,html5 css3圆形波浪百分比加载动画特效
一款简单漂亮的html5 css3圆形波浪百分比加载动画特效,非常好看的波浪滚动上升动画效果,也可用于百分比展示. 查看演示 下载资源: 28 次 下载资源 下载积分: 20 积分 js代码 var ...
- html圆圈倒计时,html5 css3圆形进度条倒计时页面跳转代码
特效描述:html5 css3 圆形进度条 倒计时 页面跳转代码.html5 css3进度条倒计时动画特效 代码结构 1. HTML代码 html5+css3进度条倒计时动画特效 body { mar ...
- AI虚拟数字人直播带货软件 AI数字人直播间怎么搭建 搭建教程分享
随着近年来移动互联网和直播行业的迅猛发展,越来越多的企业开始将直播带货作为新的营销渠道.AI虚拟数字人直播带货软件则是在这样的背景下应运而生的一种全新的直播带货形式. 一.AI虚拟数字人直播带货软件的 ...
- css制作流程卡片,css3 column实现卡片瀑布流布局的示例代码
本文介绍了css3 column实现卡片瀑布流布局的示例代码,分享给大家,具体如下: 实现效果 今天遇到了需要实现一个卡片的瀑布流布局的问题,卡片高度是不同的. 最后使用css3中的column属性实 ...
最新文章
- TCP 网络应用程序开发流程
- 高通量测序技术和序列拼接算法探析
- gitlab的升级【二】旧数据的备份和新数据的恢复
- Coursera吴恩达《神经网络与深度学习》课程笔记(3)-- 神经网络基础之Python与向量化
- 简单易懂的 pwnable.kr 第三题[bof]Writeupt
- uni-app运行编译报错
- 数据结构和算法系列13 五大查找之哈希查找
- 如何理解halcon 算子get_grayval 、set_grayval 逐行读取和逐行写入
- python中不同文件之间使用所谓的全局变量
- 台式电脑如何修复计算机,大神告诉你电脑不断重启如何修复
- Python对二维矩阵沿主对角线(次对角线)翻转变换代码实现
- NILM-利用nilmtk读取iawe数据集电器数据
- Dota2冠军OG如何被AI碾压?OpenAI累积三年的完整论文终于放出
- JavaScript声明和使用变量
- 计算机是如何执行程序的
- 关于微信小程序自定义Picker样式的picker-view
- git 清除所有历史记录
- 趋势科技将安全工具HijackThis开源
- [L4D]Tickrate Enabler 服务器速率配置方法
- DOS应用-迅雷不开会员照样用高速通道
热门文章
- BLDC风扇方案介绍-硬件部分
- php x24 x65 x6d x61,Apache Tomcat/JBoss EJBInvokerServlet / JMXInvokerServlet 漏洞利用
- 企业如何选择合适的分销商城系统呢?
- (STM32CubeMx生成HAL库)STM32F103C8T6最小系统板,4个按键分别控制42混合步进电机启停、变向、加减速
- 红黑树详解(一)红黑树的介绍和操作
- 手表电池Maxell SR920SW
- win10桌面图标不显示,且鼠标右键没反应处理。
- 庞加莱截面的c语言编程,[转载]画Lorenz庞加莱截面图的程序
- C++荒岛生存小游戏
- 天猫精灵的自定义语音技能创建流程