<style type="text/css">

*

{

    margin:0px auto;

    padding:0px;

    font-family:"微软雅黑";}

#tuijian

{

    width:760px;

    height:474px;

    background-repeat:no-repeat;}

.pages

{

    top:230px;

    background-color:#FFF;

    background-position:center;

    background-repeat:no-repeat;

    opacity:0.4;

    width:30px;

    height:60px

    }

#p1

{

    background-image:url(zuo.png);

    float:left;

    margin:150px 0px 0px 10px;}

#p2

{

    background-image:url(you.png);

    float:right;

    margin:150px 10px 0px 0px;}

</style>

</head>

<body>

<!--2.换图-->

<div id="tuijian" style="background-image:url(t1.jpg);">

<div class="pages" id="p1" onclick="dodo(-1)"></div>

<div class="pages" id="p2" onclick="dodo(1)"></div>

</div>

<!--1.10s后同意-->

<form>

<input id="wait" type="button" value="同意(10)" disabled="disabled" />

</form>

</body>

</html>

<script language="javascript">

var jpg = new Array();

jpg[0]="url(t1.jpg)";

jpg[1]="url(t2.jpg)";

jpg[2]="url(t3.jpg)";

var tjmg = document.getElementById("tuijian");

var xb=0;var n=0;

function huan()

{

    xb++;

    if(xb==jpg.length)

    {

        xb=0;

    }

    tjmg.style.backgroundImage=jpg[xb];

    if(n==0)

    {

        var id = window.setTimeout("huan()",3000);

    }

}

function dodo(m)

{

    n=1;

    xb=xb+m;

    if(xb<0)

    {

        xb=jpg.length-1;

    }

    else if(xb>=jpg.length)

    {

        xb=0;

    }

    tjmg.style.backgroundImage=jpg[xb];

}

window.setTimeout("huan()",3000);

var n=10;

var wait = document.getElementById("wait");

function bian()

{

    n--;

    if(n==0)

    {

        wait.removeAttribute("disabled");

        wait.value="同意";

        return;

    }

    else

    {

        wait.value="同意("+n+")";

        window.setTimeout("bian()",1000);

    }

}

window.setTimeout("bian()",1000);

</script>

JavaScript 例题延迟10s 自动手动换图的更多相关文章

  1. JavaScript 文件延迟和异步加载

    JavaScript 文件延迟和异步加载 -般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件. 这意味着必须等到全部 Jav ...

  2. JavaScript值延迟脚本和异步脚本

    Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造.也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<scri ...

  3. [troubleshoot][archlinux][X] plasma(KDE) 窗口滚动刷新冻结（约延迟10s）（已解决，root cause不明，无法再次复现）

    现象: konsole,setting等plasma的系统应用反应缓慢,在滚动条滚动时,尤为明显. 触发条件: 并不是十分明确的系统滚动升级(Syu)后,产生. 现象收集: 可疑的dmesg [ :: ...

  4. JavaScript高级程序设计-(1)html中使用JavaScript

    html中使用JavaScript 1.延迟脚本 script标签定义了defer属性,脚本会被延迟到整个页面都解析完毕后运行 详细内容如下: 2.异步脚本 script标签定义了async属性,as ...

  5. JavaScript高级程序设计—阅读笔记（第一部分）

    第一章 JavaScript简介1.JavaScript组成(核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM))2.文档对象模型(DOM),提供访问和操作网页内容的方法和 ...

  6. 高性能JavaScript（快速响应的用户界面）

    浏览器UI线程 用于执行JavaScript代码和更新界面的进程被称为 “浏览器UI线程” . UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到线程空闲,一旦空闲队列就被重新提取出来运行 ...

  7. 从JavaScript的单线程执行说起

    先看一段代码: 1 2 3 4 5 setTimeout(function(){     alert("a"); }, 0); while(1); alert("b&qu ...

  8. Wireshark 分析Linux SSh 远程登录延迟问题

    1.PuTTy远程登录延迟的分析 现象问题描述:在使用kali linux 的时候喜欢在后台运行而在Windows主机系统上安装PuTTY来实现远程登录 发现每次输入密码的时候会存在延迟10s的情况, ...

  9. 《高性能javascript》阅读摘要

    最近在阅读这本Nicholas C.Zakas(javascript高级程序设计作者)写的最佳实践.性能优化类的书.记录下主要知识. 加载和执行 脚本位置 放在<head>中的javasc ...

随机推荐

  1. [iOS]C语言技术视频-06-程序循环结构(for{})

    下载地址: 链接: http://pan.baidu.com/s/1dD11Zwt 密码: rke9

  2. iOS之NSPredicate（正则表达式和UIBarController）

    本文转发至:https://segmentfault.com/a/1190000000623005 NSPredicate,这个类和我上一篇博文中提到的valueForKeyPath一样很强大.它的使 ...

  3. Unity 3d中Shader是什么，可以吃吗？

    众所周知,Unity3d是一款跨平台非常广的游戏引擎,上手容易,界面友好,集成功能众多,是目前开发手游的主流引擎.本人有幸使用Unity 3d进行开发已一年多时间,已领略了这歀引擎的强大之处. 编写s ...

  4. 在octave语言中K-means聚类算法求聚类中心的向量化计算

    使用octave编程的时候,一定要注意使用向量化编程的思想,下面我就说说我今天做题遇到的一个K-means聚类问题,如何使用octave中的函数向量计算聚类中心centroids. octave几个函 ...

  5. 源码解析-knockout源码准备

    准备包括心理和资源两方面. 心理 我看过一句话说,当你用一个框架时,不要忙着看一遍使用教程就开始写项目,先去看看框架原理. 这句话我深以为然.现今前端快速发展,很多前端攻城狮都很茫然:框架更新太快了, ...

  6. js Date 日期格式化（转）

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  7. SSL 双向认证

    利用OpenSSL生成库和命令程序,在生成的命令程序中包括对加/解密算法的测试,openssl程序,ca程序.利用openssl,ca可生成用于C/S模式的证书文件以及CA文件.下面以C/S模式说明证 ...

  8. laravel memcached使用

    当第一次使用cache时,想用 memcached 的方式,但是它直接报错: 说明你的php没安装 memcached 这个扩展,在ubuntu下直接 sudo apt-get install mem ...

  9. windows server 2012 AD 活动目录部署系列（五）备份和还原域控制器

    在前篇博文中,我们介绍了用户资源的权限分配,用户只要在登录时输入一次口令,就能访问基于该域所分配给他的所有资源. 但是我们需要考虑一个问题:万一域控制器坏了怎么办?!如果这个域控制器损坏了,那用户登录 ...

  10. Freemarker入门案例

    Freemarker入门案例 首先需要到freemarker官方下载freemarker的jar包,导入到项目中,如:freemarker-2.3.19.jar 1.先建个freemarker的工具类 ...