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. Python day7之mysql

    写在前面: 由于毕业论文撰写和答辩耽搁了几个月,但是在这几个月没有放弃学习Python,就是没有时间写博客.进行我们主要对数据库mysql的操作指令集的学习. 一.mysql术语 Mysql是最流行的 ...

  2. Luogu4783 【模板】矩阵求逆（高斯消元）

    对矩阵进行高斯消元直至消为单位矩阵,并在另一个单位矩阵上对其做同样的操作即可. 模意义下的高斯消元可以直接计算系数来避免整行的辗转相除. 还不知道有什么用. #include<iostream& ...

  3. 99种用Racket说I love you的方式

    99种用Racket说I love you的方式 来源 https://www.tuicool.com/articles/qiyeAz 原文  http://www.soimort.org/posts ...

  4. Java线程总结---第一天

    线程和进程各自有什么区别和优劣: 进程是资源分配的最小单位,线程是程序执行的最小单位 进程有自己的独立地址空间,每启动一个进程,系统就会为它分配地址空间,建立数据表来维护代码段.堆栈段和数据段,这种操 ...

  5. 【BZOJ1306】[CQOI2009]循环赛（搜索）

    [BZOJ1306][CQOI2009]循环赛(搜索) 题面 BZOJ 洛谷 题解 爆搜一下,\(hash\)记录是否已经考虑过这个状态,记忆化解决问题. #include<iostream&g ...

  6. 在eclipse中使用git的pull功能时报错解决办法

    打开项目的 .git/config文件,参照以下进行编辑 [core] symlinks = false repositoryformatversion = 0 filemode = false lo ...

  7. php编程——验证码的实现（session方法）

    index.PHP(实现输入验证码页面)代码如下: <html><head><title>check code</title></head> ...

  8. 个推用户画像产品（个像）iOS集成实践

    最近业务方给我们部门提了新的需求,希望能构建精准用户画像.我们尝试使用的是个推(之前专门做消息推送的公司)旗下新推出的产品“个像·用户画像”.根据官方的说法,个像能够为APP开发者提供丰富的用户画像数 ...

  9. 集合框架基础知识-----java基础知识

    Java集合框架 :接口:Collection.List .Set. Map:实现类:ArrayList.LinkedList.Vector.HashSet.TreeSet.HashMap.HashT ...

  10. Linux 之 crontab 使用

    定时任务 任务调度的crond常驻命令crond 是linux用来定期执行程序的命令.当安装完成操作系统之后,默认便会启动此任务调度命令.crond命令每分锺会定期检查是否有要执行的工作,如果有要执行 ...