时钟 ：

所用到得图片  ：

开启定时器
setInterval  间隔型
setTimeout  延时型
停止定时器
clearInterval
clearTimeout
效果思路
获取系统时间
Date对象
getHours、getMinutes、getSeconds
显示系统时间
字符串连接
空位补零
设置图片路径
charAt方法
 <body style="background:#000; color:#FFF; font-size:50px;">

 <div id="div1">

 <img src="data:images/0.png"/>

 <img src="data:images/0.png"/>

 :

 <img src="data:images/0.png"/>

 <img src="data:images/0.png"/>

 :

 <img src="data:images/0.png"/>

 <img src="data:images/0.png"/>

 </div>

 </body>

HTML

 <script>

     function ChangeString(n)

     {

         if(n<10)

         {

              return "0"+n;

             }

             else

             {

                   return ""+n;

                 }

         }

   window.onload=function ()

   {

       var oDiv=document.getElementById('div1');

       var oImg=oDiv.getElementsByTagName('img');

       //var str="120343";

       function hours(){  var date=new Date();

       var str= ChangeString(date.getHours())+ ChangeString(date.getMinutes())+ ChangeString(date.getSeconds());

       for(var i=0;i<str.length;i++)

       {

            oImg[i].src='images/'+str[i]+'.png';

           }

               }

             setInterval(hours,1000);

      hours();

       }

 </script>

QQ延时框：

 <body>

 <div id="div1"></div>

 <div id="div2"></div>

 </body>

HTML

 <style>

  div{ float:left; margin:10px;}

  #div1{ background:#F00; width:60px; height:60px;}

   #div2{ background:#666; width:160px; height:160px; display:none;}

 </style>

CSS

 <script>

     window.onload=function ()

     {

         var oDiv1=document.getElementById('div1');

         var oDiv2=document.getElementById('div2');

         oDiv1.onmouseover=function ()

         {

              oDiv2.style.display='block';

               clearTimeout(time);//必须放下面

               }

         oDiv1.onmouseout=function ()

         {

              timer=setTimeout(function ()

             {

                  oDiv2.style.display='none';

             },500);

             }

         oDiv2.onmouseover=function ()

         {

             clearTimeout(timer);

              oDiv2.style.display='block';

             }

         oDiv2.onmouseout=function ()

         {

             time=setTimeout(function ()

             {

                 oDiv2.style.display='none';

                 },500);

                 }

    }

 </script>

闲扯 Javascript 03 时钟和QQ延时框的更多相关文章

  1. QQ聊天框变成方框口口口口的解决办法

    QQ聊天框变成方框口口口口的解决办法 安装了QQ拼音输入法6.0之后,发现 QQ聊天对话框好友名称变成框口口口口口,网上没有找到办法,卸载轻聊版,安装完整版9.03之后,再次启动就好了.

  2. pushlet（QQ提示框）

    Pushlet 实现服务端往客服端推送消息 系统页面弹出消息框,类似QQ提示框 1. java代码 package com.test.jbpm.common; import java.io.Seria ...

  3. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  4. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  5. QLineEdit 仿QQ签名框（思路很独特：用QSS::hover显示额外的图片）

    今天鼓捣了半天,终于实现了自定义Qt中的QlineEdit控件的大致效果. 这个问题对于新手而言,主要有以下几个难点: 1.继承QLineEdit控件 2.QSS设置QLineEdit的相关样式,可以 ...

  6. JavaScript学习笔记之下拉选择框的操作

    对于下拉框的操作十分繁多,这几天项目须要就总结一下 一.动态构建option 有时候我们须要动态构建下拉选择框里面的值,这里我们就要用到 var varItem = new Option(" ...

  7. 闲扯 Javascript 00

    引言 Javascript  的作用在此就不阐述了,相信你已经知道它的用途!那我说点什么呢? 不如就和大家先扯一把,后面的工作 随后后展开吧! 首先声明:我个人对Javascript 认识,我只知道它 ...

  8. QLineEdit 仿QQ签名框

    今天鼓捣了半天,终于实现了自定义Qt中的QlineEdit控件的大致效果. 这个问题对于新手而言,主要有以下几个难点: 1.继承QLineEdit控件 2.QSS设置QLineEdit的相关样式,可以 ...

  9. [Qt] QLineEdit 仿QQ签名框

    今天鼓捣了半天,终于实现了自定义Qt中的QlineEdit控件的大致效果. 这个问题对于新手而言,主要有以下几个难点: 1.继承QLineEdit控件 2.QSS设置QLineEdit的相关样式,可以 ...

随机推荐

  1. jquery 中多个存在依赖关系的ajax调用解决办法

    在使用ajax异步调用的时候,可能碰到同时调用多个ajax这种情况.而且多个ajax之间还存在依赖关系.这种情况怎么处理呢?   有两种办法: 一种是多个ajax嵌套调用,这时需要设置async为fa ...

  2. QStringLiteral（源代码里有一个通过构造函数产生的从const char*到QString的隐式转换，QStringLiteral字符串可以放在代码的任何地方，编译期直接生成utf16字符串，速度很快，体积变大）

    原作者: Olivier Goffart 点击打开链接http://woboq.com/blog/qstringliteral.html 译者: zzjin 点击打开链接http://www.tuic ...

  3. GridView用法的修改和删除

    (前台) <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="Fa ...

  4. Windows Phone 8初学者开发—第6部分：设置应用程序的样式

    原文 Windows Phone 8初学者开发—第6部分:设置应用程序的样式 Source Code: http://aka.ms/absbeginnerdevwp8  PDF Version: ht ...

  5. genymotion下载出现Unable to create virtual device，Server returned HTTP status code 0.

    解决方法:

  6. dubbo 服务化

    当网站变大后,不可避免的需要拆分应用进行服务化,以提高开发效率,调优性能,节省关键竞争资源等. 当服务越来越多时,服务的URL地址信息就会爆炸式增长,配置管理变得非常困难,F5硬件负载均衡器的单点压力 ...

  7. Uva 10935 Throwing cards away I

    题目意思:有N张牌,标号为1~N,且牌以叠好,从上到小就是标号1-N的牌,只要牌堆数量大于等于2的时候,就采取如下操作:将最上面的牌扔掉(即离开牌堆).刚才那张牌离开后,再将新的最上面的牌放置于牌堆最 ...

  8. 聊聊高并发（二十五）解析java.util.concurrent各个组件（七） 理解Semaphore

    前几篇分析了一下AQS的原理和实现.这篇拿Semaphore信号量做样例看看AQS实际是怎样使用的. Semaphore表示了一种能够同一时候有多个线程进入临界区的同步器,它维护了一个状态表示可用的票 ...

  9. POJ 2187 旋转卡壳 + 水平序 Graham 扫描算法 + 运算符重载

    水平序 Graham 扫描算法: 计算二维凸包的时候可以用到,Graham 扫描算法有水平序和极角序两种. 极角序算法能一次确定整个凸包, 但是计算极角需要用到三角函数,速度较慢,精度较差,特殊情况较 ...

  10. mvc中的几个数据传递

    1.ViewData对象 ViewBagData是一种字典集合数据同时属于视图基类和控制器基类的属性. 实例: //控制器 public class HomeController:Controller ...