js系列（10）js的运用（二）

公告

View Post

本节继续介绍在html页面中js的运用。

(1)数码时钟:(https://files.cnblogs.com/files/MenAngel/text05.zip)

<!DOCTYPE html>
<html>
<head lang="en">
    <title>示例10.1</title>
    <script>
        function tostr(value){
            if(value<10)
                return "0"+value;
            else
                return ""+value; }
            window.onload=function(){
            var adiv=document.getElementById('div1');
            var aimg=adiv.getElementsByTagName('img');
  
            function ticky()
            {   var adate=new Date();
                var str=tostr(adate.getHours())+tostr(adate.getMinutes())+tostr(adate.getSeconds());
                for (var i = 0; i < aimg.length; i++) {
                   aimg[i].src = "http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_" + str[i] + ".png";
                }
            }
            setInterval(ticky,1000);
            ticky();
        }
    </script>
</head>
<body>
    <div id="div1">
        <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
        <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
        <font size=5><b>:</b></font>
        <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
        <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
        <font size=5><b>:</b></font>
        <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
        <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
     </div>
</body>
</html>

(2)延时提示框:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>示例10.2</title>
    <style>
        div{
           float:left;
           margin:10px;
        }
        #div1{
           width:50px;
           height:50px;
           background:red;
        }
        #div2{
          width:200px;
          height:180px;
          background:#808080;
          display:none;
       }
    </style>
  <script>
     window.onload = function () {
       var aDiv1 = document.getElementById('div1');
       var aDiv2 = document.getElementById('div2');
       var timer = null;           
       aDiv2.onmouseover = aDiv1.onmouseover = function () {
       clearTimeout(timer);
       aDiv2.style.display = 'block';
     }
       aDiv2.onmouseout = aDiv1.onmouseout = function () {
       timer= setTimeout(function () {
       aDiv2.style.display = 'none';}, 500);     
       }
     }
  </script>
</head>
<body>
    <div id="div1"> </div>
    <div id="div2"></div>
</body>
</html>

(3)无缝滚动(任意方向)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>示例10.3</title>
  <style>
  *{
    margin: 0;
    padding: 0;
   }
  #suround{
    margin-top:20px;
   }
  .Direct{
   float:left;
   height: 200px;
   }
  #main_div{
    width: 1200px;
    height: 200px;
    position: relative;
    background: red;
    overflow: hidden;
    }
  #main_div ul {
    position: absolute;
    left: 0px;
    top: 0px;
   }
  #main_div ul li {
    float: left;
    width: 300px;
    height:200px;
    list-style: none;
   }
  #main_div ul li img{
    width: 300px;
    height:200px;
  }
  .D_img{
   height:200px;
   width:200px;
  }
  .D_img:hover{
   cursor:pointer;
  }
  </style>
  <script>
   window.onload = function () {
     var aDiv = document.getElementById('main_div');
     var aUl = aDiv.getElementsByTagName('ul')[0];
     var aLi = aUl.getElementsByTagName('li');
     var timer = null;
     var speed = -2;

     aUl.innerHTML = aUl.innerHTML + aUl.innerHTML;

     aUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

     function move() {
     if (aUl.offsetLeft < -aUl.offsetWidth / 2) {
       aUl.style.left = '0';
     }
     if (aUl.offsetLeft > 0) {
       aUl.style.left = -aUl.offsetWidth / 2 + 'px';
     }
     aUl.style.left = aUl.offsetLeft +speed+ 'px';
     }
     timer = setInterval(move, 30);
       aDiv.onmouseover = function () {
       clearInterval(timer);
     }
     aDiv.onmouseout = function () {
       timer = setInterval(move, 30);
     }
     document.getElementsByClassName('D_img')[0].onclick = function () {
       speed = -2;
     }
     document.getElementsByClassName('D_img')[1].onclick = function () {
       speed = 2;
     }
    }
    </script>
</head>
<body>
  <div id="suround">
    <div class="Direct">
      <img class="D_img" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_left.png" />
    </div>
    <div id="main_div" class="Direct">
     <ul>
      <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC1.jpg" /></li>
      <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC2.jpg" /></li>
      <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC3.jpg" /></li>
      <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC4.jpg" /></li>
     </ul>
    </div>
    <div class="Direct" >
      <img class="D_img" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_right.png" />
    </div>
  </div>
</body>
</html>

(4)模拟邮箱中checkbox的全选，反选和不选:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>示例10.4</title>
    <script>
    function fanxuan(){
        var mydv=document.getElementById('div2');
        var mycb=mydv.getElementsByTagName('input');
        for(var i=0;i<mycb.length;i++){
        mycb[i].checked=(mycb[i].checked==true?false:true);
        }
    }
    function quanxuan(){
        var mydv=document.getElementById('div2');
        var mycb=mydv.getElementsByTagName('input');
        for(var i=0;i<mycb.length;i++)
        {
        mycb[i].checked=true;
        }
    }
    function buxuan() {
        var mydv = document.getElementById('div2');
        var mycb = mydv.getElementsByTagName('input');
        for (var i = 0; i < mycb.length; i++) {
        mycb[i].checked = false;
        }
    }
    </script>
</head>
<body>
<div id="div1">
    <input type="button" value="全选" onclick="quanxuan()"/>
    <input type="button" value="不选" onclick="buxuan()"/>
    <input type="button" value="反选" onclick="fanxuan()"/>
</div>
<div id="div2">
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
</div>
</body>
</body>
</html>

(5)在新的选项卡里打开页面:(https://files.cnblogs.com/files/MenAngel/text06.zip)

<!DOCTYPE HTML  PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>示例10.5</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
  div,table,tr,td,a{font-size:12px};
</style>
<script language="JavaScript">
  var x_open_path =""; //设置图标地址
</script>
<script language="JavaScript" src="x_open.js"></script>
</HEAD>
<BODY>
演示：
<a href="javascript:x_open('百度一下', 'http://www.baidu.com',800,800)">百度首页</a>  -  
<a href="javascript:x_open('我的首页', 'https://home.cnblogs.com/u/MenAngel/',800,800)">我的首页</a> - 
<a href="javascript:x_open('管理后台', 'https://www.cnblogs.com/MenAngel/',800,800)">管理后台</a>
</BODY>
</HTML>

posted on 2016-08-15 15:08 MenAngel 阅读(210) 评论(0) 收藏举报

刷新页面返回顶部