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

2024-12-10 04:13:58

效果展示：http://demo.jb51.net/js/2016/js_hovertreecolortime/

源码下载：http://xiazai.jb51.net/201612/yuanma/hovertreecolortime_jb51.rar

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

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

原生Js实现按的数据源均分时间点幻灯片效果(已封装)

建议在Chrom,Firefox,Opera,Safari等标准浏览器中查看. Ie下没有阴影及圆角. 实现了根据源数据(样例中是一个JSON数据组)总条数, 均分出时间点以平滑向右动画方式显示在时间线上, 当鼠标划过时间点时, 显示对应的日期及标题. 鼠标划过事件, 充分考虑了用户体验, 当用户快速(无意识移动)从时间点上划过时, 并不触发相应事件. 相关的方法说明及使用, 请参见下面的注释或发评论, 同时也欢迎大家找bug并提交. Js核心代码点此查看样例复制代码代码如下: var JS
原生js实现可爱糖果数字时间特效

效果展示:http://demo.jb51.net/js/2016/js_hovertreecolortime/ 源码下载:http://xiazai.jb51.net/201612/yuanma/hovertreecolortime_jb51.rar 数字采用漂亮的糖果皮肤设计效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=&q
原生JS实现鼠标滑动撒爱心特效

本文实例为大家分享了一个鼠标滑动撒爱心的js特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
利用原生JS与jQuery实现数字线性变化的动画

前言大家应该都有所体会,在一些数据展示的专题页里,有时候希望数字能动态从某一个数变化到另一个数,以此来吸引用户眼球,突出数据.于是有了下文. 在这里,我用了两种方式:一种是原生的JavaScript,另一种是jQuery插件. 数字线性变化的原理很简单,就是让数字增量变化,并循环动画. 原生JS版首先获取DOM元素.为了兼容到IE6,兼容性方法如下: var domUtil = { // 获取DOM元素 get: function(query) { var _this = this; if(
原生js制作简单的数字键盘

一.起因最近支付的同事说,数字键盘有些问题:在移动设备上有时候比较难出现点(.) 和数字在一起的格局:因此,考虑到这种情况,就建议手写个模拟键盘了.花了一晚上的时间,写了个简单的键盘,基本能用.考虑到有的开发者没有使用juqery,就使用原生的js了. Github地址:https://github.com/vczero/keyboard 二.截图如下三.体验地址(需要点击input才能弹出数字键盘的哦) URL: http://vczero.github.io/num_key/index.
原生JS实现图片跑马灯特效

今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现图片跑马灯特效</title> <style type="
原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0
原生JS实现数码表特效

本文分享一个用原生JS实现的数码时钟特效,效果如下: 上面的数字是用的图片生成的,共10张图片如下: 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现数码表特效</title> <
原生JS实现百叶窗特效

本文分享一个用原生JS实现的百叶窗特效,效果如下: 代码实现如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现百叶窗特效</title> <style> * { margin: 0;
原生JS实现在线问卷调查投票特效

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS+CSS实现投票效果</title> <link rel="stylesheet" href="http://hovertree.com/texiao/js/24/style.css"
原生js实现数字字母混合验证码的简单实例

本文实例讲述了原生js实现数字字母混合验证码的全部代码,重点是注释很详细,便于大家理解,特分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body, div { margin:

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

相关推荐

随机推荐