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 ...
随机推荐
- C# 代码页获取input的值
<input id="aa" name="iaa" type="text" /> Label1.Text = Request.F ...
- jsp学习--JavaBean定义和在Jsp中使用JavaBean
一.JavaBean 1.什么是JavaBean JavaBean是一个遵循特定写法的Java类,它通常具有如下特点:>>这个Java类必须具有一个无参的构造函数>>属性必须私 ...
- ubuntu 环境变量修改和恢复总结[收藏]
在Ubuntu中有如下几个文件可以设置环境变量/etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行./etc ...
- button 边框
[_saveButton.layer setMasksToBounds:YES]; [_saveButton.layer setCornerRadius:8.0]; //设置矩圆角半径 [_saveB ...
- 20145225《Java程序设计》 第9周学习总结
20145225<Java程序设计> 第9周学习总结 教材学习内容总结 第十六章 整合数据库 16.1JDBC JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂 ...
- 为AM335x移植Linux内核主线代码(35)使用platform中的GPIO
http://www.eefocus.com/marianna/blog/15-02/310352_46e8f.html 使用GPIO,当然可以自己编写驱动,比如之前的第34节,也可以使用Kernel ...
- css之字体设置
字体大小font-size 字体风格font-style 字体加粗font-weight 字体类型font-family 字体阴影text-shadow 字体行高line-height 字间距lett ...
- P1093 奖学金
奖学金 题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分从高到低排序,如果两个同学总分相同,再按语文 ...
- 用C语言写的双色球
#include<stdio.h> #include<stdlib.h> #include<time.h> double jieguo(); void main() ...
- CLR内存管理
CLR管理内存的区域,主要有三块,分别为: 1.线程的堆栈:(在程序应该编译过程为值类型实例分配好内存) 用于分配值类型实例.堆栈主要由操作系统管理,而不受垃圾收集器的控制,当值类型实例所在方法结束时 ...