时钟 ：

所用到得图片  ：

开启定时器
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. Java设计模式模式观测(Observer Pattern)

    Observer Pattern 设计模式通常用于.这是一个事件侦听器模型. 该模型有两个作用,一个是Subject, 有一个Observer.Subject 保存多个Observer参考,一旦一个特 ...

  2. Razor强类型视图下的文件上传

    域模型Users.cs using System;using System.Collections.Generic;using System.Linq;using System.Web; namesp ...

  3. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. 打造自己的sublime text

    博主今天正在了解学习LESS,在找相关资源的过程中,发现自己的sublime text和别人差别有点大,突然脑海中一股逼格的气息油然而生,于是查找了相关资料,并打造了一下风格. 下面开始正文. 首先是 ...

  5. MySQL 5.7.14 安装

    http://www.cnblogs.com/zcGu/articles/5740936.html 因笔者个人需要需要在本机安装Mysql,先将安装过程记录如下,希望对他人有所参考. 一, 1, 进入 ...

  6. 【MFC相关】图片显示

    CPaintDC dc(this); if (!m_hBitmap) return; image.Attach(m_hBitmap); CRect rect; GetClientRect(&r ...

  7. hadoop序列化机制与java序列化机制对比

    1.采用的方法: java序列化机制采用的ObjectOutputStream 对象上调用writeObject() 方法: Hadoop 序列化机制调用对象的write() 方法,带一个DataOu ...

  8. JS拖动浮动DIV

    <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>j ...

  9. 深入浅出—JAVA(1)

    1.基本概念 JAVA的工作方式 编写源代码文件--用编译器运行源代码(javac)--编译器会产出字节码--通过JAVA虚拟机读取与执行字节码(jvm). JAVA的程序结构 什么是源文件? 源文件 ...

  10. GCC -Wall

    官网:http://gcc.gnu.org/onlinedocs/gcc-4.7.2/gcc/Warning-Options.html#Warning-Options3.8 Options to Re ...