本节继续介绍在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的运用(二)的更多相关文章

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

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

  2. 微信JS分享功能--微信JS系列文章(二)

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

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

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

  4. 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函数集锦&lt;来源于网络&gt; 【二】

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

  6. Node.js系列之ubuntu环境搭建

    ctrl+alt+t打开终端(命令行) 一.准备Node.js所依赖的包(g++,curl,python等) sudo apt-get install g++ curl libssl-dev apac ...

  7. 【D3.V3.js系列教程】--(十四)有路径的文字

    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...

  8. 【D3.V3.js系列教程】--(十五)SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  9. Node.js系列-http

    前言: 最近一直忙着公司项目的事,战友们的留言也没空回复,博客也有段时间没有更新了,年底了就是一个的忙啊~~~(ps:同感的也给个赞吧) 现在前端的就是一直地更新一直有新的东西出来,什么ES2015, ...

  10. Node.js系列-express(上)

    前言 Node.js系列的第一篇:http,大概描述了通过使用node.js内置的api创建一个服务并监听request实现简单的增删改查.现在,我们就通过通读express官网及使用express框 ...

随机推荐

  1. Android中的HTTP通信

    前言:近期在慕课网学习了慕课网课程Android中的HTTP通信,就自己总结了一下,其中参考了不少博文,感谢大家的分享. 文章内容包括:1.HTTP简介2.HTTP/1.0和HTTP/1.1之间的区别 ...

  2. vuejs 和 element 搭建的一个后台管理界面

    介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于 ...

  3. Druid 数据库用户密码加密 代码实现

    druid-1.0.16.jar 阿里巴巴的开源数据连接池 jar包 明文密码+私钥(privateKey)加密=加密密码 加密密码+公钥(publicKey)解密=明文密码 程序代码如下: pack ...

  4. Python 判断一个字符串是否在列表中任何一个字符串中出现过

    strlist = ['a1', 'a2', 'b1'] if any("a" in s for s in strlist):

  5. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  6. linux_ubuntu12.04 卸载和安装mysql、远程访问、not allowed

    一: 安装mysql 卸载mysql 第一步 sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-se ...

  7. Android RecyclerView体验(一)- 简介

    在网上关于RecyclerView的基本使用方式已经有了比较详细介绍,而且其设计结构也类似于ListView,所以本文将不重点介绍如何使用,在文末的引用中都可以相关内容.这里主要是介绍Recycler ...

  8. React Native 可以走多远?

    对于大多数APP开发者来说,能够同时开发出Android APP和IOS APP是不是很牛逼,可是它也不是天方夜谭,自从有了一个叫React Native的东西的出现,这一切就变得可以实现了. 那么到 ...

  9. Delphi实现电脑端微信图片文件解密

    电脑端微信收到图片后是存在了“C:\Users\系统用户名\Documents\WeChat Files\微信帐号\Data”目录下的,但文件不能直接使用图片浏览器打开的,因为做了一些加密,之前有个朋 ...

  10. JavaScript Function.arguments 属性详解

    语法 [functionObject.]arguments arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用该函数时所传入的实际参 ...