【分享】纯javascript时钟(Clock)控件

最新推荐文章于 2020-09-07 19:33:55 发布
最新推荐文章于 2020-09-07 19:33:55 发布
阅读量1.7k 收藏
点赞数
文章标签： javascript email web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/athossmth/article/details/585733
版权

有的web程序，比如订票的项目，用户需要选择时间，又不愿意用键盘输入，希望用鼠标。写了一个，先分享一下。

特点：
纯javascript，调用简单（两句话），不会被遮盖。

截屏:
http://www.16play.com/album/images/2005-12-08/12766378.jpg

下载（源代码+例子）:
http://www.16play.com/album/images/2005-12-08/12765919.gif
另存为.zip文件然后解压。

有事情请email: athos.liu@gmail.com

版权所有，随意使用，转载请同样注明作者 athos.liu@gmail.com，谢谢。

athossmth
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js时钟插件
09-28
js时钟插件
js时钟控件
我爱技术男-江龙
02-28 201
总结到这里，js的时钟控件，感觉还不错，http://www.my97.net/ ，有兴趣大家可以到这个里参考一下，API写得相当详细
javascript clock
weixin_47460937的博客
09-07 223
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.οnlοad=function(){ var btns=document.getElementsByTagName('button'); btns[0].οnclick=function(){ id=
简单的javascript时钟
当你迷路时，放慢一下脚步
10-29 338
功能很简单的javascrip时钟，学javascript的基本参考例子 html> html> head lang="en"> meta charset="UTF-8"> title>title> head> body> div id="showtime">div> script> (function(){ var div=document.getE
js时钟
李艳平
07-19 424
function time() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds()   h=addzero(h);    m=addzero(m) s=addzero(s) document.getElementById(“控件的ID”).
ClockjsHTML5模拟时钟jQuery插件
08-10
为了使用Clockjs，你需要在HTML文件中引入jQuery库和clock.js插件文件，然后在jQuery的$(document).ready()函数内初始化时钟，如下所示： ```html <!DOCTYPE html> <title>Clockjs示例 ...
ActiveX控件做的时钟
07-01
在“actx_clock”这个文件中，很可能包含了编译好的ActiveX控件文件以及可能的示例代码或安装说明。用户可以按照提供的指南将控件添加到自己的应用程序中，或者在支持ActiveX的环境中直接使用这个时钟控件。 总之，...
soyuz-clock-viewer：3D soyuz电动时钟的查看器
02-26
总的来说，"soyuz-clock-viewer"结合了JavaScript的WebGL技术，提供了3D模型的实时渲染和交互，展示了Soyuz电动时钟的独特魅力。这个项目不仅体现了编程和3D建模的融合，也展示了技术如何服务于科普和教育，使得复杂...
罗盘时钟 源代码以及全部源文件.rar
12-31
"罗盘时钟 源代码以及全部源文件.rar" 是一个包含罗盘时钟完整开发资源的压缩包，主要涉及的技术栈是JavaScript、CSS和HTML。这个项目可能是一个交互式的网页时钟，其设计灵感来自于传统的罗盘，将时间显示以罗盘...
js实现的网页中经典的带时分秒的时钟控件
05-13
这个控件允许开发者通过JavaScript轻松地在网页上创建一个动态更新的时钟，同时支持自定义时间格式，以满足各种展示风格。 首先，我们要理解JavaScript在处理时间上的基本概念。JavaScript中的Date对象是处理日期和...
纯js模拟时钟插件analogClock.js
12-11
analogClock.js是一款纯js模拟时钟插件。该模拟时钟插件不需要额外的css文件，不基于canvas，并且兼容ie8浏览器，简单实用。
html+css+js clock钟表
07-13
动态时钟 body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;} .box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%; box-shadow: 0px 0px 20px 3px #444 inset; position: relative;} /*原点*/ .origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;} /* 指针 */ .clock_line{ position: absolute;position:absolute;z-index:20;} .hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px; transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;} .minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000; transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;} .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60; transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;} .dot_box{width: inherit; height: inherit;} /*时钟数*/ .dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;} .clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7; position:absolute;top:199px;left:200px;} .scale-show{ width:12px;height:2px;background-color:#555;float:left;} .scale-hidden{width:183px;height:2px;float:left;} /*日期*/ .date_info{width:160px;height:28px; line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555; font-weight:bold;} .time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; } .time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;} #minute_time{border-left:1px solid #fff;border-right:1px solid #fff;} <div class
前端插件代码 漂亮的时钟
06-01
前端插件代码 漂亮的时钟
jquery+html5时钟插件clock
10-08
jquery+html5时钟插件clock，源码，Juqery效果.
Digital Clock 4:带有插件的漂亮的可自定义时钟-开源
05-14
非常可定制的美丽时钟。 项目已关闭，不再维护！ 最终版本是4.7.9。 Windows 10就绪！ 支持的macOS版本是10.12+。 视网膜显示准备好了！ 不支持基于Apple硅的Mac（即M1）。 Linux构建仅适用于64位系统。 开始使用此时钟不需要任何特殊要求。 只需启动它即可享受！ 启动时，除时钟本身外，会出现小托盘图标（如果有可用的系统托盘）。 任务栏图标的颜色取决于操作系统，在大多数情况下为黑色，但在Windows 10和具有深色主题的macOS上为白色。 该任务栏图标可用于调用时钟配置对话框。 也可以使用时钟上下文菜单调用此对话框。 您可以创建自己的皮肤！ 有关详细信息，请参见此链接：https://sourceforge.net/p/digitalclock4/wiki/How to create skin/注意：请勿下载任何标记为我的软件的.rar或.exe文件，这些文件不是由我负责，我对其内容不承担任何责任！
js实现时钟clock效果
xiaozhuangyumaotao的博客
05-19 1221
在一个网页上实现动态变化的时钟，每隔一秒变化网上有很多例子，以前咱也写过。这不，下面就是代码。我先把代码贴出来，下面稍作解释。先把效果图贴出来,网页动态时钟效果： html代码： <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>03-页面时钟</title> </head> <bodyonload="ShowTi...
使用js实现时钟效果
少年休闲海
01-16 4417
首先在单元格中输入下面的代码，然后使用html显示内容。 这个宽高可以根据自己需要填。 然后在预览方式中添加加载结束事件： var dom=document.getElementById("view"); var ctx=dom.getContext("2d"); var width=ctx.canvas.width; var height=ctx.canvas.height; va
javascript时钟倒计时，代码可用
tony19890820的专栏
06-13 556
我现在在公司，用到的倒计时都是基于现在这个代码的原理来写的       function delayURL(url1) {  var delay=document.getElementById("time").innerHTML;  if(delay>0){  delay--;  document.getElementById("time").innerHTML
js实现时钟Clock
HGQ_Boy的博客
04-03 2851
js实现时钟Clock 目录 js实现时钟Clock 目录 思路 源代码 js部分 css部分 html部分 思路 本着忐忑的心，写下自己在闲时利用js写的一个时钟。 Date( ) 获取当前时间 getHours( ) 获取当前时 getMinutes( ) 获取当前分 getSeconds( ) 获取当前秒 oHours = (hour + m...
Cesium中Clock控件
最新发布
07-23
Cesium中的Clock控件用于控制场景的时间流逝，可以实现动态的时间展示和动画效果。您可以通过以下步骤使用Clock控件： 1. 创建一个Clock对象： ```javascript var clock = new Cesium.Clock(); ``` 2. 设置Clock...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值