原生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 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
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
php中explode与split的区别介绍
2012/10/03 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
python字典基本操作实例分析
2015/07/11 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python实现最大子序和的方法示例
2019/07/05 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
运动会解说词200字
2014/02/06 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书