原生js实现可爱糖果数字时间特效


Posted in Javascript onDecember 30, 2016

效果展示:http://demo.3water.com/js/2016/js_hovertreecolortime/

源码下载:http://xiazai.3water.com/201612/yuanma/hovertreecolortime_3water.rar

数字采用漂亮的糖果皮肤设计

效果图:

原生js实现可爱糖果数字时间特效

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>js多彩的数字时钟_何问起</title><base target="_blank" />
 <style>a{color:blue;}</style>
</head>
<body>
 <div><h1>JS实现多彩的数字时钟</h1></div>
 <div id="time"></div>
 <div><br /><br /><a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/h/bjaf/o0yqj1ly.htm">说明</a> <a href="http://hovertree.com/texiao/">特效</a></div>
 <script>
 function getTime(){
 var date = new Date();
 var hours =formatTime(date.getHours());
 var minutes = formatTime(date.getMinutes());
 var seconds = formatTime(date.getSeconds());
 var $time = document.getElementById('time');
 $time.innerHTML=hours +"<img src='images/hm.png' style='margin:0 10px;' width='12' height='40'/>"+ minutes+"<img style='margin:0 10px;' src='images/ms.png' width='12' height='40'/>"+ seconds;
 setTimeout("getTime()",500);
 }
 function formatTime(i){
 if(i<10&&i==1){
  i= "<img src='images/0.png' width='40' height='60'/>"+"<img src='images/1.png' width='20' height='60'/>";
 }else if(i<10&&i!=1){
  i= "<img src='images/0.png' width='40' height='60'/>" + "<img src='images/"+i+".png' width='40' height='60'/>";
 }else{
  var j= i.toString().charAt(0);
  var z =i.toString().charAt(1);
  if(j<10 && z<10&&j!=1&&z!=1){
  i = "<img src='images/"+j+".png' width='40' height='60'/>" + "<img src='images/"+z+".png' width='40' height='60'/>";
  }else if(j<10 && z<10&&j==1&&z!=1){
  i = "<img src='images/1.png' width='20' height='60'/>" + "<img src='images/"+z+".png' width='40' height='60'/>";
  }else if(j<10 && z<10&&z==1&&j!=1){
   i = "<img src='images/"+j+".png' width='40' height='60'/>"+"<img src='images/1.png' width='20' height='60'/>";
  }else if(j<10 && z<10&&(j==1&&z==1)){
  i="<img src='images/1.png' width='20' height='60'/>"+"<img src='images/1.png' width='20' height='60'/>";
  }
 }
 return i;
 }
 getTime();
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 #Javascript
详解JS对象封装的常用方式
Dec 30 #Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 #Javascript
jQuery与js实现颜色渐变的方法
Dec 30 #Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 #Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 #Javascript
浅谈JavaScript的函数及作用域
Dec 30 #Javascript
You might like
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python list转dict示例分享
2014/01/28 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
体育教师个人总结
2015/02/09 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
如何用python清洗文件中的数据
2021/06/18 Python