1、输入问题,判断答案,按钮倒计时

主要代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<form>
What's your name?<br/>
My name is
<input type="text" id="name" name="name" value="" daan="bosamvs"/>
<input type="button" onclick="NAME()" id="Name" name="Name" value="Sure(5)" disabled="disabled"/>
</form>
</body>
</html>
<script>
function NAME()
{
var a=document.getElementById("name");
var b=a.value;
var c=a.getAttribute("daan");
if(b==c)
{
alert("Right!");
}
else
{
alert("Sorry,you are wrong!");
}
}
var d=5;
var e=document.getElementById("Name");
function action()
{
d--;
if(d==0)
{
e.removeAttribute("disabled");
e.value="Sure";
}
else
{
e.value="Sure("+d+")";
window.setTimeout("action()",1000);
}
}
window.setTimeout("action()",1000);
</script>

结果:

2、图片轮播

主要代码:

法一:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>batman</title>
<style>
.pases
{ background-position:center;
background-repeat:no-repeat;
opacity:0.4;
width:62px;
height:126px; }
#p1
{
background-image:url(%E5%BE%AE%E5%8D%9A%E6%A1%8C%E9%9D%A2%E6%88%AA%E5%9B%BE_20160525145428.png);
float:left;
margin:360px 0px 0px 10px; }
#p2
{
background-image:url(%E5%BE%AE%E5%8D%9A%E6%A1%8C%E9%9D%A2%E6%88%AA%E5%9B%BE_20160525145357.png);
float:right;
margin:360px 10px 0px 0px;
}
#img1
{
width:1280px;
height:720px;
background-repeat:no-repeat;
}
</style> </head> <body>
<div id="img1" style="background-image:url(batman.jpg);">
<div class="pases" id="p1" onClick="spot(-1)" style="line-height:720px"></div>
<div class="pases" id="p2" onClick="spot(1)" style="line-height:720px"></div>
</div>
</body>
</html>
<script type="text/javascript">
var i=0;
var n=0;
var array=new Array();
array[0]="url(batman.jpg)";
array[1]="url(batman1.jpg)";
array[2]="url(batman2.jpg)";
array[3]="url(batman3.jpg)";
var img1 = document.getElementById("img1");
function next()//设置自动播放
{
i++;
if(i == 4)
{
i=0;
}
img1.style.backgroundImage=array[i]
if(n==0)
{
var id=window.setTimeout("next()",2000);
}
}
function spot(m)//设置点击箭头的动作
{
n=1;
i=i+m;
if(i<0)
{
i=4-1;
}
else if(i>=4)
{
i=0;
}
img1.style.backgroundImage=array[i];
}
window.setTimeout("next()",2000);
</script>

法二:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>batman</title>
<style>
#img1{
width: 1280px;
height:720px; }
.pases
{ background-position:center;
background-repeat:no-repeat;
opacity:0.4;
width:62px;
height:126px; }
#p1
{
background-image:url(%E5%BE%AE%E5%8D%9A%E6%A1%8C%E9%9D%A2%E6%88%AA%E5%9B%BE_20160525145428.png);
float:left;
margin:360px 0px 0px 10px; }
#p2
{
background-image:url(%E5%BE%AE%E5%8D%9A%E6%A1%8C%E9%9D%A2%E6%88%AA%E5%9B%BE_20160525145357.png);
float:right;
margin:360px 10px 0px 0px;
}
</style>
<script type="text/javascript">
var i = 0;
var n=0;
var array=["url(batman.jpg)","url(batman1.jpg)","url(batman2.jpg)","url(batman3.jpg)"];
function next()
{
var img1 = document.getElementById("img1");
i++;
if(i == 4)
{
i=0;
}
img1.style.backgroundImage=array[i];
}
function pre()
{
i--;
var img1 = document.getElementById("img1"); if(i == -1)
{
i=4;
}
img1.style.backgroundImage=array[i];
}
function fun(num)
{
var img1 = document.getElementById("img1"); img1.style.backgroundImage=array[num];
i = num; }
function spot(m)
{
var img1 = document.getElementById("img1");
n=1;
i=i+m;
if(i<0)
{
i=4-1;
}
else if(i>=4)
{
i=0;
}
img1.style.backgroundImage=array[i];
}
window.onload = function()
{ setInterval('next()',3000);//定时器,每3秒钟自动调用next()函数。
}
</script>
</head> <body>
<div id="img1" style="background-image:url(batman.jpg);">
<div class="pases" id="p1" onClick="spot(-1)" style="line-height:720px"></div>
<div class="pases" id="p2" onClick="spot(1)" style="line-height:720px"></div>
</div>
</body>
</html>

结果:

总结:

1. 法一与法二的区别在于法一的滚动时间受点击的限制,点击箭头后图片不会再自动更换,法二则不受限制,点击箭头后仍可自动更改。这是因为法二用的是定时器来更改图片,法一不是。

2. 在写js函数时要注意数组引用的图片路径格式要与body中的图片路径格式相同。

3. div是分层的,在里面进入图片是作为背景,所以在写函数时更改图片也应该是背景格式。

HTML5练习3的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. 【BZOJ1019】[SHOI2008]汉诺塔(数论,搜索)

    [BZOJ1019][SHOI2008]汉诺塔(数论,搜索) 题面 BZOJ 洛谷 题解 首先汉诺塔问题的递推式我们大力猜想一下一定会是形如\(f_i=kf_{i-1}+b\)的形式. 这个鬼玩意不好 ...

  2. Python 线程同步

    #-*-coding:utf-8-*- '''如果多个线程共同对某个数据修改,则可能出现不可预料的结果,为了保证数据的正确性, 需要对多个线程进行同步. 线程同步所使用的的方法: Lock RLock ...

  3. 洛谷P4198 楼房重建

    题意:给定序列,每次修改一个值,求前缀最大值的个数. 解:线段树经典应用. 每个节点维护最大值和该区间前缀最大值个数. 发现我们不用下传标记,只需要合并区间. 需要实现一个函数int ask([l r ...

  4. Oracle表字段类型更改的一个经验

    先前表中ID字段类型是用序列,由于安全问题,需要处理水平权限的漏洞,虽然使用加密也可以处理,为了更方便,需要将字段类型改为Guid,如果表中已经有数据,更改起来不是很方便,对于基础数据表,这里提供一个 ...

  5. Python学习笔记 - 实现探测Web服务质量

    #!/usr/bin/python3# _*_ coding:utf-8 _*_import sys, osimport timeimport pycurl url = "https://d ...

  6. ubuntu ssh root登陆

    原文:https://blog.csdn.net/wy_97/article/details/78294562 1.默认使用ubuntu用户登录,密码为服务器配置时设置的密码,可在重置密码中修改 2. ...

  7. JDK环境变量的配置1

    JDK环境变量的配置 ... 1.安装完JDK后配置环境变量  计算机→属性→高级系统设置→高级→环境变量   2.系统变量→新建 JAVA_HOME 变量 .变量值填写jdk的安装目录(我的安装目录 ...

  8. HDU 2509 基础Anti-SG NIM

    如果我们规定当局面中所有的单一游戏的SG值为0时,游戏结束,则先手必胜当且仅当:(1)游戏的SG!=0 && 存在单一游戏的SG>1:(2)游戏的SG==0  && ...

  9. 用到的设计模式总结--单例模式+工厂方法模式+Builder模式

    一,工厂方法模式和单例模式 工厂方法模式中有一个抽象的工厂接口和一个抽象的产品接口.然后,具体的工厂实现抽象工厂并负责生产具体的产品.由客户端决定 new 哪个具体的工厂,从而生产哪种产品. 因此,与 ...

  10. 你真的理解js的赋值语句么

    之前谢亮兄和我一起讨论的一个问题: var a = {}; a.x = a = 3; a 的值是什么. 其实当执行赋值语句的时候,js 的 = 左侧不是原始变量地址,而是一个新值.怎么理解这句话呢? ...