时钟 :

所用到得图片  

开启定时器
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. codeforces#FF DIV2C题DZY Loves Sequences(DP)

    题目地址:http://codeforces.com/contest/447/problem/C C. DZY Loves Sequences time limit per test 1 second ...

  2. Html.text(转载)

    2.Html.ValidationSummary:用来显示ModelState字典中所有验证错误的无序列表,使用布尔值类型参数(true)来告知辅助方法排除属性级别的错误,只显示ModelState中 ...

  3. Python之路Day16

    主要内容:Django基础进阶之:Django 流程.Django URL.Django Views.Django Models.Django Template.Django Admin Django ...

  4. 如何正确地在手机上显示图片——QImage与QPixmap完全解析

    引言 用Qt程序在手机上显示一幅图片对编程人员来说是再基础不过的一件事情了.那么先让大家看两段代码: //dangerous should not be used, cannot display ea ...

  5. struts文件上传和下载

    文件上传 jsp中 <a href="/file/new.action">文件上传案例</a> fileaction中 @Override public S ...

  6. 用merge into进行性能优化

    有时候开发组有这么一个需求,一个表和它的备份表,把备份表中的某些字段替换到原表中,当数据量非常大的时候就很很慢,这个时候如果我们用merge into往往会提高几倍的性能,下面我们来做个实验: SQL ...

  7. ios7状态栏属性的设置

    /* 状态栏的管理: 1> iOS7之前:UIApplication进行管理 2> iOS7开始:交给对应的控制器去管理 */ // 设置状态栏的样式 - (UIStatusBarStyl ...

  8. 1297 - Largest Box(三分)

    1297 - Largest Box   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB In t ...

  9. 玩转Linux网络namespace-单机自环測试与策略路由

    上周有厂商到公司測试,拿了一块据说非常猛的网络处理加速PCIe板卡,拎在手里沉甸甸的非常有分量,最让人意淫的是那4个万兆光口,于是我迫不及待的想要一览光口转发时那种看不见的震撼. 可是,仅凭4个光口怎 ...

  10. C与C++ 无参函数的区别

    在<C++ 编程思想>:“关于无参函数声明,C与C++有很大的差别.在C语言中,声明int fun1(),意味着一个可以有任意数目和类型的函数:而在C++中,指的却是一个没有参数的函数”. ...