Html之动态时钟(HOME HOME CLOCK)-yellowcong

动态时钟的效果非常的爽,前几年看到过,但是一直忘了自己高一份,今天闲得淡腾,就弄了一份,下面是源码地址,还有基于我自己七牛服务器,也整了一份

源码地址

#这一份是基于本地的,没有使用网络的资源
http://yellowcong.qiniudn.com/home_clock_demo.zip

显示效果

这里写图片描述

实现代码

这个代码里,可以看到,访问的连接地址,都是.jp的,是日本的连接地址

<html>
<div id="myTime">
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="200" height="80" id="honehoneclock" align="middle">
 <param name="allowScriptAccess" value="always">
 <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
 <param name="quality" value="high">
 <param name="bgcolor" value="#ffffff">
 <param name="wmode" value="transparent">
 <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="200" height="80" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
 </object>
 </div>
</html>

实现代码-修改为自己服务器

修改为本地地址:

#最重要的是这个,表示的是时钟的资源连接地址
http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf 

#flash下载地址
http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0

修改路径后的代码,将路径都换成自己服务器的地址,然后查看,直接复制下面的代码,保存,就可以查看到效果了

<html>
<div id="myTime">
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://yellowcong.qiniudn.com/swflash.cab" width="200" height="80" id="honehoneclock" align="middle">
 <param name="allowScriptAccess" value="always">
 <param name="movie" value="http://yellowcong.qiniudn.com/honehone_clock_wh.swf">
 <param name="quality" value="high">
 <param name="bgcolor" value="#ffffff">
 <param name="wmode" value="transparent">
 <embed wmode="transparent" src="http://yellowcong.qiniudn.com/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="200" height="80" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="https://get2.adobe.com/cn/flashplayer/">
 </object>
 </div>
</html>

更改后的效果

这里写图片描述

动态时钟 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
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狂飙的yellowcong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值