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是分层的，在里面进入图片是作为背景，所以在写函数时更改图片也应该是背景格式。

posted on 2016-05-25 21:25  bosamvs  阅读(257)  评论(0)  编辑  收藏  举报

导航