HTML5练习3
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的更多相关文章
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- 戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
- HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
- HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...
随机推荐
- 通过.json()将服务器返回的字符串转换成字典
- Java 基本数据类型 sizeof 功能
Java 基本数据类型 sizeof 功能 来源 https://blog.csdn.net/ithomer/article/details/7310008 Java基本数据类型int 32b ...
- 【刷题】BZOJ 1924 [Sdoi2010]所驼门王的宝藏
Description Input 第一行给出三个正整数 N, R, C. 以下 N 行,每行给出一扇传送门的信息,包含三个正整数xi, yi, Ti,表示该传送门设在位于第 xi行第yi列的藏宝宫室 ...
- VS2017企业版本（安装包+key）+ .NET Reflector 9.0
关于VS2017安装的一点扩充说明(15.5):http://www.cnblogs.com/dunitian/p/8051985.html Key激活无需断网 Visual Studio 2017 ...
- Android Service总结05 之IntentService
Android Service总结05 之IntentService 版本 版本说明 发布时间 发布人 V1.0 添加了IntentService的介绍和示例 2013-03-17 Skywang ...
- VBA：Double类型与Decimal类型
Sub DataType() For i = 0 To 100 t1 = t1 + 0.1 t2 = t2 + CDec(0.1) Debug.Print "Double=" &a ...
- php 访问错误日志
/usr/local/php/var/log/php-fpm.log」—————————
- centos7+mysql5.7.11实现主从复制
1 首先检测当前的系统是否已经安装了MySQL yum list installed | grep mysql 如果有的话,删除 2 下载rpm库资源,在网页 https://dev.mysql. ...
- sublime代码对齐
来源于:Sublime 自动缩进怎么设置? - 郭缔的回答 - 知乎 https://www.zhihu.com/question/22987174/answer/90874465 { "k ...
- weblogic11G 修改密码
weblogic11的登录密码修改方法: 1. 登陆到weblogic后选中domain structure下的security Realms(如图一) (图一) 详情如图二: (图二) 2. 双 ...