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. c++/ boost 库常见错误及解决方法总结

    1. error LNK2019: 无法解析的外部符号 "class boost::system::error_category const & __cdecl boost::sys ...

  2. ubuntu关闭和开启防火墙

    1.关闭ubuntu的防火墙 ufw disable 2开启防火墙 ufw enable 3.卸载了iptables apt-get remove iptables 4.关闭ubuntu中的防火墙的其 ...

  3. 用call/cc合成所有的控制流结构

    用call/cc合成所有的控制流结构 来源 https://www.jianshu.com/p/e860f95cad51 call/cc 是非常.非常特殊的,因为它根本无法用 Lambda 演算定义. ...

  4. CF1027E Inverse Coloring

    题意:n × n的矩阵,每个位置可以被染成黑/白色. 一种gay的染色是任意相邻两行的元素,每两个要么都相同,要么都不同.列同理. 一种gaygay的染色是一种gay的染色,其中没有哪个颜色的子矩阵大 ...

  5. 前端常用功能记录(二)—datatables表格

    并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添 ...

  6. eos源码剖析之controller

    controller::block_status,区块状态枚举类,包括: irreversible = 0,该区块已经被当前节点应用,并且被认为是不可逆的.validated = 1,这是由一个有效生 ...

  7. 在线Python学习网站

    目前我们使用的Python集成环境是Anaconda3,然后使用Jupyter Notebook和Spyder两个开发环境 Goole推出了在线的开发环境,在线网站: https://colab.re ...

  8. SQL记录-PLSQL面向对象

    PL/SQL面向对象 PL/SQL允许定义一个对象类型,这有助于在Oracle的数据库中设计的面向对象.对象类型可以包装复合类型.使用对象允许实现数据的具体结构现实世界中的对象和方法操作它.对象有属性 ...

  9. git push --set-upstream

    我在本地建了一个分支wangxiao,开发完之后,提交代码 git add .git commit -m '注释'git push 出现下面的问题,这个意思是:当前分支没有与远程分支关联. 因此导致了 ...

  10. 转载自知乎大神---this 的值到底是什么？一次说清楚

    你可能遇到过这样的 JS 面试题: var obj = { foo: function(){ console.log(this) } } var bar = obj.foo obj.foo() // ...