<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. 关联规则算法---Eclat算法

    Eclat算法 与fp-growth 和apriori算法不同,Eclat算法加入了倒排的思想,具体就是将事务数据中的项作为key,每个项对应的事务ID作为value. 原输入数据为 tid item ...

  2. centos7中yum安装ntfs-3g

    CentOS默认源里没有ntfs3g,想要添加ntfs支持,无非是自己下载编译安装或者加源yum安装. 新安装了一个CentOS7,用的是添加aliyun的epel源来yum安装的方式,简单易行. 1 ...

  3. awk简单用法

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  4. 控制流之continue

    continue语句continue语句被用来告诉Python跳过当前循环块中的剩余语句,然后 继续 进行下一轮循环.使用continue语句~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  5. Delphi中unicode转汉字函数(转)

    源:Delphi中unicode转汉字函数 近期用到这个函数,无奈没有找到 delphi 自带的,网上找了下 有类似的,没有现成的,我需要的是 支持 “\u4f00 ” 这种格式的,即前面带标准的 “ ...

  6. （一）Javascript基础知识

    一,五种基本数据类型和一种复合数据类型. 五种基本数据类型 1,undefined 2,null 3,string 4,number 5,boolean 6,复合数据类型(Object,Array,D ...

  7. STM32实现HID和u盘复合设备

      USB设备可以定义一个复合设备,复合设备分两种,一种是一个设备多个配置,还有一种是一个配置多个接口,在本例中采用一个配置多个接口的方式 首先修改设备描述符,标准设备描述符和报告描述符都不需要修改, ...

  8. FMDB事务的使用

    http://blog.csdn.net/qq_29892943/article/details/50541439 首先,说一下事务是什么,比如说我们有一个学生表和一个学生成绩表,而且一个学生对应一个 ...

  9. webform中 ajax调用后台方法(非webservice)

    方法一:通过创建一个没有内容的窗体 后台: public partial class Ajax_ShoppingCart : System.Web.UI.Page { bookdbDataContex ...

  10. VMVare 桥接上网

    桥接模式设置小解: 第1步 虚拟机下fedora安装好后,打开VM虚拟机的菜单栏,单击编辑------虚拟网络编辑器,选择“主机虚拟网络 映射”标签,然后把VMnet0 手动选择为你本地的物理网卡(要 ...