本节继续介绍在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. 解决 npm install xxx 卡住 的问题

    因为npm连接的数据源网站太慢,可以使用淘宝提供的npm数据源, npm config set registry https://registry.npm.taobao.org 之后就会快得飞起.

  2. Fiddler将笔记本设置代理,抓取手机网络请求包

    第一步:下载fiddler,下载地址:http://www.telerik.com/download/fiddler 第二步:安装fiddler,略过... 第三步:启动fiddler,启动后界面如下 ...

  3. JS学习笔记8之 BOM-浏览器对象模型

    *什么是BOM -->BOM (Browser Object Model) 浏览器对象模型-->BOM提供了独立于内容而与浏览器窗口进行交互的对象-->BOM主要用于管理窗口与窗口之 ...

  4. React组件库

    图表组件库:Recharts(React和D3构建的图表库) UI组件库:react-bootstrap

  5. iOS 开发之控件快速学习(一)

    最近一个朋友想转iOS所以我开始写一些初级iOS学习博客!也希望第一些初学的朋友有所帮助,!好吧进入今天的正题,我们今天主要完成如下界面的显示! 好的一起打开Xcode一下几步我截图说明:

  6. 生成n位随机字符串

    --1.借助newid() Go --创建视图(因为在函数中无法直接使用newid()) create view vnewid as select newid() N'MacoId'; go --创建 ...

  7. VS2010打包,遇到的一些问题和解决办法

    我用的VS2010,教程很多,我就不一一介绍了,我把我自己遇到的一些问题向大家说一下: 1 可能我比较笨吧,没有理解网上很多教程的意思,直接把图片的后缀名改了,导致添加快捷方式图标的时候出现这种情况 ...

  8. [原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  9. 夺命雷公狗---node.js---3commonJs 与 nodeJs的简介

    JavaScript是一个强大面向对象语言,它有很多快速高效的解释器.官方JavaScript标准定义的API是为了构建基于浏览器的应用程序.然而,并没有定于一个用于更广泛的应用程序的标准库. Com ...

  10. MySQL基础之第18章 性能优化

    18.1.优化简介 SHOW STATUS LIKE ‘value’;connections                 连接数uptime                          启动 ...