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 ...

随机推荐

ubuntu关闭和开启防火墙
1.关闭ubuntu的防火墙 ufw disable 2开启防火墙 ufw enable 3.卸载了iptables apt-get remove iptables 4.关闭ubuntu中的防火墙的其 ...
Berland and the Shortest Paths CodeForces - 1005F（最短路树）
最短路树就是用bfs走一遍就可以了 d[v] = d[u] + 1 表示v是u的前驱边然后遍历每个结点存下它的前驱边再用dfs遍历每个结点依次取每个结点的某个前驱边即可 #include &l ...
关于程序设计中INF和MOD值的设定
在取模操作中,我们常把MOD设置为1000000007 模一个大数和模一个质数可以减少冲突而1e9+7又有一个很好的特点,就是相加不会爆int,相乘不会爆long long 在设置无穷大值时中我们常 ...
Easyui的DateBox日期格式化
http://www.cnblogs.com/wintalen/archive/2011/06/10/2077171.html DateBox 日期显示默认的格式为“dd/mm/yyyy”,如果想自定 ...
box-sizing border-box 的理解
http://blog.csdn.net/isaisai/article/details/20449827 -webkit-box-sizing: border-box; 则div 设置的宽高将包含 ...
word 大纲-目录
k8s role
转 https://blog.qikqiak.com/post/add-authorization-for-kubernetes-dashboard/ 另外还可以参考这个 https://mrit ...
配置使用 NTP
1. 安装chrony(时间同步客户端) ubuntu/debian: apt-get install chrony Centos/redhat/alios: yum install chrony 2 ...
CF876 D 树状数组
大意就是放n个硬币,每次放一个计算下这种情况下的操作次数,一个操作为从左到右扫描,如果一个硬币右边是空的,就将硬币后移,否则该次操作停止. 显然发现对于一个情况,我们只要考虑最右边的空位的左侧有几个硬 ...
[整理]Win下好用的Markdown工具
用过haroopad,MarkPad,Sublime + markdown插件,前2款勉强能用,都处于继续开发中,haroopad支持的语法相对较少,提示也不明显,MarkPad还是有不少bug. 后 ...

HTML5练习3

HTML5练习3的更多相关文章

随机推荐

热门专题