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

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

(1)数码时钟:(http://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)在新的选项卡里打开页面:(http://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>

js系列（10）js的运用（二）的更多相关文章

【D3.V3.js系列教程】--（十二）坐标尺度
[D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...
js 进阶 10 js选择器大全
js 进阶 10 js选择器大全一.总结一句话总结:和css选择器很像二.JQuery选择器原生javaScript中,只能使用getELementById().getElementByNam ...
js系列之js简介
该系列教程都来源于:廖雪峰老师的博客 JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱 ...
JS系列：js节点
节点(node) 在html文档中出现的所有东西都是节点元素节点(HTML标签) 文本节点(文字内容) 注释节点(注释内容) 文档节点(document) … 每一种类型的节点都会有一些属性区分自己 ...
JS系列：js数据类型的转换
数据类型的转换[基本数据类型]数字 number字符串 string布尔 boolean空 null未定义 undefined[引用数据类型]对象 object普通对象 {}数组对象 [](Array ...
微信JS分享功能--微信JS系列文章（二）
概述在上一篇文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的分享功能进行描述,供大家参考. 代码 $(document).ready(f ...
CEF3开发者系列之JS与C++交互之二
本文翻译自JavaScriptIntegration (https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration).本 ...
node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
好文推荐系列-------(5)js模块化编程
本文主要来源于阮一峰的<Javascript模块化编程>系列文章整合,原文地址:http://www.ruanyifeng.com/blog/2012/10/javascript_modu ...
通用js函数集锦<来源于网络> 【二】
通用js函数集锦<来源于网络> [二] 1.数组方法集2.cookie方法集3.url方法集4.正则表达式方法集5.字符串方法集6.加密方法集7.日期方法集8.浏览器检测方法集9.json ...

随机推荐

如何在MAC上使用SVN，简单几行命令搞定
如果你要使用SVN管理代码,如果不是迫不得已,还是看看git吧,但是SVN也要知道怎么用,原理是相似的. 首先,要准备的东西:svnX软件 https://pan.baidu.com/s/1mhEay ...
UzysAssetsPickerController中文化
self.labelSelectedMedia.text = NSLocalizedStringFromTable(@"Choose a media", @"UzysAs ...
python多进程
一.多进程池 from multiprocessing import Pool import time pool = Pool(processes=3) result=[];lr=range(t);a ...
第一章 git指令与设置
相关指令: 1.从远程的master分支上创建新的分支,此时新分支内容与master分支内容相同: git checkout master; git branch newbranch; git che ...
Slave failed to initialize relay log info structure from the repository
现象查看slave 服务状态 show slave status\G; 错误 Last_Errno: 1872 Last_Error: Slave failed to initialize rela ...
python dict
###字典的基本结构 info = { "k1" : "v1", "k2" : "v2" } ###字典的valus可以 ...
(mysql)Packet for query is too large
http://jingyan.baidu.com/article/fb48e8be3f81716e622e14ee.html windows如何重启mysql 开始->运行->cmd 停止 ...
struts2 学习记录过滤器国际化
struts2接触不是一天两天了,但是一直没有用它做什么项目,但老师确一直说它有很大的学习价值,所以还是把我学习到的东西给记录一下,记录的东西没有规律,只是给自己留个备份, struts2中最关键的是 ...
Windows 7 防火墙对Virtualbox guest的影响
今天测试ASA的public servers配置,在自己的Win7手提用Virtualbox装了个Linux作为测试服务器,网络设置为bridged.从外网可以ping通测试服务器,也可以连80端口, ...
delphi 生成网卡MAC地址
生成MAC地址的小工具: {*------------------------------------------------ 生成mac地址 @author @version 2015.7.2 20 ...

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

js系列（10）js的运用（二）的更多相关文章

随机推荐

热门专题