学习到了：

setTimeout函数的灵活运用。

案例实现讲解：

1.先定义一个全局的变量，赋值为null。

2.然后使用timeout调用bang函数，以达到自动自动调用函数的功能。

3.bang函数就是判断时间是否为0，如果为0即换一张爆炸的图片。

实例代码：

<html>

<head><title>JS爆炸案例</title>

<script>

var clock = null;

	function bang(){

		var inp = document.getElementsByName('time')[0];

		var time = parseInt(inp.value) - 1;

		inp.value = time;

		if (time == 0) {

			document.getElementsByName('photo')[0].src = './bang.jpg';

			clearTimeout(clock);

		}else{

			setTimeout('bang()',1000);

		}

	}

	clock = setTimeout('bang()',1000);

</script>

</head>

<body>

	<input type="submit" name="time" value="5"><br>

	<img name="photo" src="./bomb.jpg" height="300px" width="300px" alt=""/>

</body>

</html>

　　

JS自动爆炸案例的更多相关文章

  1. 【XSS】对抗蠕虫 —— 如何让按钮不被 JS 自动点击

    前言 XSS 自动点按钮有什么危害? 在社交网络里,很多操作都是通过点击按钮发起的,例如发表留言.假如留言系统有 XSS,用户中招后除了基本攻击外,还能进行传播 -- XSS 自动填入留言内容,并模拟 ...

  2. chart.js图表库案例赏析，饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  3. MyEclipse 中 添加 js自动完成模版

    MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Edi ...

  4. js 自动类型转换

    js自动类型转换 1.==符号在判断左右两边数据是否相等时,如果数据类型一致,直接比较值即可 2.==符号左右数据类型不一致时,如果两方数据为布尔型.数值型.字符串型时,不为数字的那一方自动调用Num ...

  5. js调用ajax案例

    js调用ajax案例 测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <ht ...

  6. pageresponse.min.js自动缩放页面改写

    /* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...

  7. cookie.js插件的案例

    cookie.js插件的案例: https://github.com/jaywcjlove/cookie.js/blob/master/README.md    文档  api   在这里即可查看用法 ...

  8. WebView JS交互 JSBridge 案例 原理 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  9. js自动访问数据库

    js自动访问数据库 maven依赖 <dependencies> <dependency> <groupId>junit</groupId> <a ...

随机推荐

  1. 【laravel5.4】laravel5.4系列之生成_ide_helper.php文件

    在laravle中使用代码自动补全,比较方便开发,于是这边找到了相关的办法 在laravel配置完好的情况下,同时安装好了composer. 进入代码的根目录执行 composer require b ...

  2. 编译后class$1,class$2,class$innerclass中的$的含义

    本文转自:http://www.cnblogs.com/stefanlee/p/3403445.html class文件名中的$的含义如下:   $后面的类是$前面的类的内部类 内部类有以下两种情况: ...

  3. 【C++】关于带const的指针问题

    区分const出现在*前还是*后 前: 例如const int *p,这种表示情况下,p本身可以改变,即p可以指向不同的地址, 但是p指向的内容不可改变. 就像你喜欢看书,图书馆规定你可以任意借阅及更 ...

  4. 【LeetCode】56. Merge Intervals

    Merge Intervals Given a collection of intervals, merge all overlapping intervals. For example,Given  ...

  5. 【LeetCode】137. Single Number II (3 solutions)

    Single Number II Given an array of integers, every element appears threetimes except for one. Find t ...

  6. 如何查看USB方式连接Android设备的外接设备信息

    1,USB存储设备(如:U盘,移动硬盘): //USB存储设备 插拔监听与 SD卡插拔监听一致. private USBBroadCastReceiver mBroadcastReceiver; In ...

  7. 基于Vuejs实现 Skeleton Loading 骨架图

    原文地址:https://cloud.tencent.com/developer/article/1006169 https://mp.weixin.qq.com/s/qmyn6mGrO6hRKuvK ...

  8. npm 国内淘宝镜像cnpm、设置淘宝源

    1.下载和使用cnpm 某些插件很奇怪,需要用国内的镜像下载才可以 #安装淘宝镜像npm install cnpm -g --registry=https://registry.npm.taobao. ...

  9. Azure 怎么开通FTP

    1. 需要在Azure Portal设置端口:21, 1035, 1036, 1037,1038,1039,1040 2. 需要内网放开端口:21, 1035, 1036, 1037,1038,103 ...

  10. 请教中文的OCR软件哪个最好？

    对原件,有这几种:1,全中文(含标点,一些英文符号)2,中英文(英文较多,或英文占大多数)3,全英文(这个用finereader8.0) 針對1.2 紫光 超星阅读器自带的OCR组件 尚书七号搞定全中 ...