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通过dom读写xml文件

    java通过dom读写xml文件 要读的xml文件 <?xml version="1.0" encoding="GB2312"?><学生花名册 ...

  2. FFT自看

    https://www.cnblogs.com/RabbitHu/p/FFT.html  先去看这个... 我觉得代码还是https://blog.csdn.net/WADuan2/article/d ...

  3. MT【172】内外圆

    $P,Q$是两个定点,M为平面内一个动点,且$\dfrac{|MP|}{|MQ|}=\lambda(\lambda>0,\lambda\ne1)$, 点M的轨迹围成的区域面积为S , 设$S=f ...

  4. 【洛谷P1522】牛的旅行

    题目大意:给定一个 N 个顶点的无向图,图中有若干联通块,现定义联通块的直径为该联通块中距离最远的两个点的距离,定义无向图的直径为这个图中所有联通块直径的最大值.现在在图上加一条边,使得两个本不连通的 ...

  5. Centos7.4+openvpn-2.4.4+easy-rsa-3.0物理机安装教程

    完整CentOS搭建OpenVPN服务环境图文教程 大福技术 关注 2016.02.17 09:28* 字数 3017 阅读 34000评论 18喜欢 21赞赏 3 对于OpenVPN环境有什么用途老 ...

  6. 「Vue」登陆-路由拦截器

    1.main.js设置拦截器 router.beforeEach(function (to,from,next) { if (to.meta.requireAuth) { if (store.stat ...

  7. Spark记录-Scala集合

    Scala列表 Scala列表与数组非常相似,列表的所有元素都具有相同的类型,但有两个重要的区别. 首先,列表是不可变的,列表的元素不能通过赋值来更改. 其次,列表表示一个链表,而数组是平的. 具有类 ...

  8. 2-SAT问题的方案输出

    2-sat 推荐学习资料: 伍昱的2003年IOI国家集训队论文<由对称性解2-sat问题> 论文链接:https://wenku.baidu.com/view/31fd7200bed5b ...

  9. argunlar 1.0.0 【hello,world】

    <!DOCTYPE html><html lang="en" ng-app><head>    <meta charset="U ...

  10. expect 交互 之双引号较长变量

    交互双引号较长变量  #!/bin/bash RemoteUser=xuesong12 Ip=192.168.1.2 RemotePasswd=xuesong Cmd="/bin/echo ...