本节继续介绍在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. AMD and CMD are dead之KMDjs在JS工程化的努力

    总览 kmdjs发布了最接近最终版本的0.0.4版本https://github.com/kmdjs/kmdjs,你已经完全可以在项目中使用.我已经无法用语言形容其完美程度.借用我发的微博:   模块 ...

  2. activitygroup下的activity不回调onactivityresult的解决方法

    就是activitygroup下的子activity启动第三方activity的时候需要通过getparent的startactivityforresult方法来启动.getparent其实就是这个a ...

  3. VMware下利用ubuntu13.04建立嵌入式开发环境之三

    系统环境建立完成后就要安装和配置嵌入式开始需要的工具和服务. 一般我们在交叉编译是需要的服务有:smb.tftp.telnet.nfs.ssh和x11等.下面一步步,介绍如何安装这些服务. 一.smb ...

  4. python celery + redis

    redis http://debugo.com/python-redis celery http://docs.jinkan.org/docs/celery/getting-started/intro ...

  5. 任意List 和DatabTable的转换

     public static IEnumerable<T> ToEntityList<T>(this DataTable table) where T : class      ...

  6. saiku 展示优化第二步(要诀和技巧)

    经历了上几篇博客的分享,可以无密码登录 : http://www.cnblogs.com/liqiu/p/5246015.html 随着使用的深入,公司需要将现有的报表平台与saiku整合,其中最便捷 ...

  7. PHP 开发 APP 接口学习笔记与总结 - [ Linux ] 定时任务

    定时任务可以使用 crontab 命令来设定: crontab -e #编辑某个用户的cron 服务 crontab -l  #列出某个用户cron 服务的详细内容 crontab -r  #删除某个 ...

  8. X86平台下嵌入式linux触摸屏解决方案(usb触摸屏控制器+完美校准方案+触摸屏QTE开发环境搭建)

    一直在用X86平台,真心不想用WINCE和XPE,一些大的硬件供应商都不提供linux平台下的技术支持,比如研华的3343PC104系列的板子... 开发的问题如下: 1 USB控制器目前只有台湾和竹 ...

  9. cocos中常用到的单例模式

    单例:即只有一个类对象,且提供全局的访问权限 特点: 1.构造函数私有 2.私有的静态成员指针,标识是否已产生了单例实例 3.提供一个getInstance()方法来获取单例对象 下面已打飞机中的子弹 ...

  10. How to Send Information (String, Image, Record) Between Two Applications

    http://delphi.about.com/od/windowsshellapi/a/wm_copydata.htm here are many situation when you need t ...