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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <title>示例10.1</title>
  5.     <script>
  6.         function tostr(value){
  7.             if(value<10)
  8.                 return "0"+value;
  9.             else
  10.                 return ""+value; }
  11.             window.onload=function(){
  12.             var adiv=document.getElementById('div1');
  13.             var aimg=adiv.getElementsByTagName('img');
  14.  
  15.             function ticky()
  16.             {   var adate=new Date();
  17.                 var str=tostr(adate.getHours())+tostr(adate.getMinutes())+tostr(adate.getSeconds());
  18.                 for (var i = 0; i < aimg.length; i++) {
  19.                    aimg[i].src = "http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_" + str[i] + ".png";
  20.                 }
  21.             }
  22.             setInterval(ticky,1000);
  23.             ticky();
  24.         }
  25.     </script>
  26. </head>
  27. <body>
  28.     <div id="div1">
  29.         <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
  30.         <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
  31.         <font size=5><b>:</b></font>
  32.         <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
  33.         <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
  34.         <font size=5><b>:</b></font>
  35.         <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
  36.         <img  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/>
  37.      </div>
  38. </body>
  39. </html>

    (2)延时提示框:

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>示例10.2</title>
  6.     <style>
  7.         div{
  8.            float:left;
  9.            margin:10px;
  10.         }
  11.         #div1{
  12.            width:50px;
  13.            height:50px;
  14.            background:red;
  15.         }
  16.         #div2{
  17.           width:200px;
  18.           height:180px;
  19.           background:#808080;
  20.           display:none;
  21.        }
  22.     </style>
  23.   <script>
  24.      window.onload = function () {
  25.        var aDiv1 = document.getElementById('div1');
  26.        var aDiv2 = document.getElementById('div2');
  27.        var timer = null;
  28.        aDiv2.onmouseover = aDiv1.onmouseover = function () {
  29.        clearTimeout(timer);
  30.        aDiv2.style.display = 'block';
  31.      }
  32.        aDiv2.onmouseout = aDiv1.onmouseout = function () {
  33.        timer= setTimeout(function () {
  34.        aDiv2.style.display = 'none';}, 500);
  35.        }
  36.      }
  37.   </script>
  38. </head>
  39. <body>
  40.     <div id="div1"> </div>
  41.     <div id="div2"></div>
  42. </body>
  43. </html>

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

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   <title>示例10.3</title>
  6.   <style>
  7.   *{
  8.     margin: 0;
  9.     padding: 0;
  10.    }
  11.   #suround{
  12.     margin-top:20px;
  13.    }
  14.   .Direct{
  15.    float:left;
  16.    height: 200px;
  17.    }
  18.   #main_div{
  19.     width: 1200px;
  20.     height: 200px;
  21.     position: relative;
  22.     background: red;
  23.     overflow: hidden;
  24.     }
  25.   #main_div ul {
  26.     position: absolute;
  27.     left: 0px;
  28.     top: 0px;
  29.    }
  30.   #main_div ul li {
  31.     float: left;
  32.     width: 300px;
  33.     height:200px;
  34.     list-style: none;
  35.    }
  36.   #main_div ul li img{
  37.     width: 300px;
  38.     height:200px;
  39.   }
  40.   .D_img{
  41.    height:200px;
  42.    width:200px;
  43.   }
  44.   .D_img:hover{
  45.    cursor:pointer;
  46.   }
  47.   </style>
  48.   <script>
  49.    window.onload = function () {
  50.      var aDiv = document.getElementById('main_div');
  51.      var aUl = aDiv.getElementsByTagName('ul')[0];
  52.      var aLi = aUl.getElementsByTagName('li');
  53.      var timer = null;
  54.      var speed = -2;
  55.  
  56.      aUl.innerHTML = aUl.innerHTML + aUl.innerHTML;
  57.  
  58.      aUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
  59.  
  60.      function move() {
  61.      if (aUl.offsetLeft < -aUl.offsetWidth / 2) {
  62.        aUl.style.left = '0';
  63.      }
  64.      if (aUl.offsetLeft > 0) {
  65.        aUl.style.left = -aUl.offsetWidth / 2 + 'px';
  66.      }
  67.      aUl.style.left = aUl.offsetLeft +speed+ 'px';
  68.      }
  69.      timer = setInterval(move, 30);
  70.        aDiv.onmouseover = function () {
  71.        clearInterval(timer);
  72.      }
  73.      aDiv.onmouseout = function () {
  74.        timer = setInterval(move, 30);
  75.      }
  76.      document.getElementsByClassName('D_img')[0].onclick = function () {
  77.        speed = -2;
  78.      }
  79.      document.getElementsByClassName('D_img')[1].onclick = function () {
  80.        speed = 2;
  81.      }
  82.     }
  83.     </script>
  84. </head>
  85. <body>
  86.   <div id="suround">
  87.     <div class="Direct">
  88.       <img class="D_img" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_left.png" />
  89.     </div>
  90.     <div id="main_div" class="Direct">
  91.      <ul>
  92.       <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC1.jpg" /></li>
  93.       <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC2.jpg" /></li>
  94.       <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC3.jpg" /></li>
  95.       <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC4.jpg" /></li>
  96.      </ul>
  97.     </div>
  98.     <div class="Direct" >
  99.       <img class="D_img" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_right.png" />
  100.     </div>
  101.   </div>
  102. </body>
  103. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>示例10.4</title>
  6.     <script>
  7.     function fanxuan(){
  8.         var mydv=document.getElementById('div2');
  9.         var mycb=mydv.getElementsByTagName('input');
  10.         for(var i=0;i<mycb.length;i++){
  11.         mycb[i].checked=(mycb[i].checked==true?false:true);
  12.         }
  13.     }
  14.     function quanxuan(){
  15.         var mydv=document.getElementById('div2');
  16.         var mycb=mydv.getElementsByTagName('input');
  17.         for(var i=0;i<mycb.length;i++)
  18.         {
  19.         mycb[i].checked=true;
  20.         }
  21.     }
  22.     function buxuan() {
  23.         var mydv = document.getElementById('div2');
  24.         var mycb = mydv.getElementsByTagName('input');
  25.         for (var i = 0; i < mycb.length; i++) {
  26.         mycb[i].checked = false;
  27.         }
  28.     }
  29.     </script>
  30. </head>
  31. <body>
  32. <div id="div1">
  33.     <input type="button" value="全选" onclick="quanxuan()"/>
  34.     <input type="button" value="不选" onclick="buxuan()"/>
  35.     <input type="button" value="反选" onclick="fanxuan()"/>
  36. </div>
  37. <div id="div2">
  38.     <input type="checkbox"/>
  39.     <input type="checkbox"/>
  40.     <input type="checkbox"/>
  41.     <input type="checkbox"/>
  42.     <input type="checkbox"/>
  43.     <input type="checkbox"/>
  44.     <input type="checkbox"/>
  45. </div>
  46. </body>
  47. </body>
  48. </html>

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

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

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

  1. 【D3.V3.js系列教程】--（十二）坐标尺度

    [D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...

  2. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  3. js系列之js简介

    该系列教程都来源于:廖雪峰老师的博客 JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱 ...

  4. JS系列：js节点

    节点(node) 在html文档中出现的所有东西都是节点 元素节点(HTML标签) 文本节点(文字内容) 注释节点(注释内容) 文档节点(document) … 每一种类型的节点都会有一些属性区分自己 ...

  5. JS系列：js数据类型的转换

    数据类型的转换[基本数据类型]数字 number字符串 string布尔 boolean空 null未定义 undefined[引用数据类型]对象 object普通对象 {}数组对象 [](Array ...

  6. 微信JS分享功能--微信JS系列文章（二）

    概述 在上一篇文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的分享功能进行描述,供大家参考. 代码 $(document).ready(f ...

  7. CEF3开发者系列之JS与C++交互之二

    本文翻译自JavaScriptIntegration (https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration).本 ...

  8. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  9. 好文推荐系列-------(5)js模块化编程

    本文主要来源于阮一峰的<Javascript模块化编程>系列文章整合,原文地址:http://www.ruanyifeng.com/blog/2012/10/javascript_modu ...

  10. 通用js函数集锦<来源于网络> 【二】

    通用js函数集锦<来源于网络> [二] 1.数组方法集2.cookie方法集3.url方法集4.正则表达式方法集5.字符串方法集6.加密方法集7.日期方法集8.浏览器检测方法集9.json ...

随机推荐

  1. 使用Intellij idea开发

    使用IntelliJ IDEA开发SpringMVC网站(一)开发环境 使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 使用IntelliJ IDEA开发SpringMVC网站 ...

  2. 通过字符串寻找与字符串一致的model的属性

    // 取得选中权限集合 string[] arrAuthorityId = this.hidAuthorityIds.Value.TrimEnd(',').Split(','); BLBQ_Autho ...

  3. 单片机TM4C123学习（十）：ADC采样模块

    1.头文件 #include "tiva_adc.h" // ADC 2.引脚 3.初始化 // ADC初始化 // 光敏电阻(PE0)为通道3,存在序列0中,硬件平均为8个点 a ...

  4. css控制页面打印（分页、屏蔽不需要打印的对象）

    样式: <style   media="print">     .Noprint   {   DISPLAY:   none;}     .PageNext   {   ...

  5. Thrift中实现按照时间戳范围操作Hbase数据

    在一次做项目的过程中,要实现一个功能,功能描述为前端给定日期范围,在该日期范围内取出指定行的信息.在Thrift常用的API中,取出一行所有的数据接口为getVer(),getver()具体描述如下: ...

  6. linux上配置网络/安装vsftp服务器

    1 准备用yum方式安装,小红帽linux原版不注册无法适用,只好安装centos系统 2 安装好centos系统注意事项: 硬盘得是IDE 配置好网络必须通,eth0的配置文件设置一下,联网启用 c ...

  7. toString的理解

    Super的作用: 1. super可以直接调用父类的属性和方法. 2. super可以在子类的构造器中调用父类的构造器. 我们知道:实例化一个对象时,会调用构造器. 我们发现,仅仅实例化的是Stud ...

  8. Android 隐藏软键盘方法

    第一种:public static void hideInput(Activity activity) { View curFoc = activity.getCurrentFocus(); if ( ...

  9. maven错误：Project configuration is not up-to-date with pom.xml

    原因: 1.导入maven工程后,出现如下错误: Description    Resource    Path    Location    TypeProject configuration is ...

  10. HTTP学习笔记（1）ULR语法

    1,概述 当你打开一个浏览器则会进入一个主页,也许你会想只是打开了浏览器罢了,但是浏览器默默的把这个主页默认的网址发送出去,你只是不知道而已,你只是没有输入而已.我们来做个实验. 1,双击打开 2,可 ...