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 ...

随机推荐

实现的一个ajax请求组件有加载效果
var zhanglei_Ajax = function(url,data,fn){ var str = '<div class="mask" style="pos ...
Daily Scrum 12.4
今日完成任务: 对数据库完成了整理,以下是整理的内容: # 表改动原因 1 Answer 保留credit列,作为投票数建议改名为vote,同意? 2 Answer qid.uid设置为外码 ...
Eclipse的安装和java环境变量的设置
首先准备工作是要下载好Eclipse和java JDK. 必须要注意的是,Eclipse和java JDK必须下载同一位数的版本,即64位同为64位,32位同为32位.否则在安装完成运行Eclipse ...
text-indent
<div class="top wd"> <div class="con fl "><a href="#"&g ...
C# 基础（3）
跳转语句 Goto(现在一般不使用) 标志位 Flag true false 常量:(不可改变的量) 语法: Const 类型变量名 = 常量值在定义时赋值,其他地方不能赋值枚举是自己定义了一 ...
怎么把U盘启动改为硬盘启动（适用于U盘安装系统时）
两种方法: 一:安装时: 在自定义创建分区后,如图: 选择系统的启动程序安装的位置,在change device 里设置第一启动装置,和第二启动装置! 二:安装后: 开机未进入系统按F2,进入BIO ...
ubuntu搭建svn服务器（转）
在阿里云买了个服务器,想上传东西,samba不好用,想起来可以搭个svn用,找到了这篇. 1. 安装SVN apt-get install subversion 2. 建立svn仓库 1). 建立sv ...
checkboxes（复选按钮）
复选按钮是input的输入框的另一种类型. 每一个复选按钮都应该嵌套进label元素中. 所有关联的复选按钮应该具有相同的name属性. 下面是复选按钮的例子: <label><in ...
Titanium系列－－Titanium的简介、Titanium Studio安装和配置(一)
1. 是什么?--是一个可以通过javascript,html,css等web技术开发移动App的的开发框架,媲美原生App体验和性能,目前支持IOS和Android平台. 2. 为什么能做这个? - ...
第33讲：List的一阶函数操作代码实战详解
今天来看一下关于List的一阶函数操作让我们看下下面的代码 println(List(1,2,3,4):::List(4,5,6,7,8):::List(10,11))//列表连接 print ...

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

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

随机推荐

热门专题