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. java学习一 path与classpath

    path 任意目录下执行 javac JAVA  classpath找到指定目录下的.class文件 前提是进入该文件目录里面 生成.class文件; 变量 的两个特性:1.约束了类型 2.约束了范围 ...

  2. 分库分表中间件sharding-jdbc的使用

    数据分片产生的背景,可以查看https://shardingsphere.apache.org/document/current/cn/features/sharding/,包括了垂直拆分和水平拆分的 ...

  3. 七、spring boot 1.5.4 集成shiro+cas，实现单点登录和权限控制

    1.安装cas-server-3.5.2 官网:https://github.com/apereo/cas/releases/tag/v3.5.2 下载地址:cas-server-3.5.2-rele ...

  4. easyui form 提交问题，纠结了很久，有点诡异

    http://www.iteye.com/problems/131602 form 提交,后台运行有时慢,页面就不等后台数据的响应,直接alert("服务器维护中,请稍后再试!") ...

  5. xgboost入门与实战（原理篇）

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  6. Java基础-爬虫实战之爬去校花网网站内容

    Java基础-爬虫实战之爬去校花网网站内容 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 爬虫这个实现点我压根就没有把它当做重点,也没打算做网络爬虫工程师,说起爬虫我更喜欢用Pyt ...

  7. bzoj千题计划241：bzoj3864: Hero meet devil

    http://www.lydsy.com/JudgeOnline/problem.php?id=3864 题意: 给你一个DNA序列,求有多少个长度为m的DNA序列和给定序列的LCS为0,1,2... ...

  8. Java入门系列（九）Java API

    String,StringBuilder,StringBuffer三者的区别 1.首先说运行速度,或者说是执行速度 在这方面运行速度快慢为:StringBuilder > StringBuffe ...

  9. 作业：JavaScript（数组篇-poker）给我的徒弟出个题。。。记得早点写完，然后大家3人可以早点打牌了

    吐槽一下:“今天实际上我左思右想,写个什么东西好呢!手上的笔转了半天....最后还是给自己留点余地!看着他们什么酒店管理系统,呼叫中心系统之类的....简直是把自己固定死了!感觉一撸到底的感觉!!!我 ...

  10. CSS-3 Transform 的使用

    CSS3制作动画的几个属性:变形(transform).转换(transition)和动画(animation)等更高级的CSS3技术.这篇主要是 Transform 的使用. Transform 字 ...