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 ...
随机推荐
- Revenge of Nim hdu 4994 (博弈)
http://acm.split.hdu.edu.cn/showproblem.php?pid=4994 题意:现在有两个人在取石子,共有n堆石子,每堆石子取完后才可以取下一堆石子,最后一个取石子的人 ...
- Linux命令（1）- grep
1.grep 功能:查找文件里符合条件的字符串. 语法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数& ...
- java 查询 mongodb 中的objectid
网上找了很久查询objectid的方法都是错的,用mongovue能查询出来,但就是用java不知道怎么查询 1.mongovue里的查询方式: {"_id" : ObjectId ...
- 基于PHP使用rabbitmq实现消息队列
1.从github上面获取AMQP基于php的实现扩展 2.创建生产者 send.php 3.创建消费者 receive.php 4.在cli模式下 分别执行 send.php receive. ...
- iframe空文档中写入内容
往一个空的iframe中写入内容,再其document ready之前有可能遇到拿回 的body指针为空,因此以下面的函数往其document中写入html HRESULT WriteToHtmlDo ...
- 水果项目第1集-想法>需求->功能->数据库设计->类设计
懒,懒人,我是个懒人. 懒人想做点事,总是拖拖拉拉,迟迟没有开始. 很久很久以前,就想做属于自己的产品,但是至今还没有一个属于自己的产品. 两年前,终于想好,要做一个网上卖水果的系统,手机上点点,水果 ...
- Linux内核实现中断和中断处理（一）
Linux实现中断处理 内核是怎么知道应用程序要调用系统调用的呢?或者说应用程序怎么通知系统内核自己需要执行一个系统调用,这是通过软中断实现的,通过引发一个异常来促使系统切换到内核态去执行异常处理程序 ...
- JDBC学习笔记（1）
说明:本系列学习笔记主要是学习传智播客的李勇老师的教学课程和一本英文电子书<JDBC Recipes A Problem-Solution Approach>所作的笔记. 1,什么是JDB ...
- Valid Sudoku leetcode
Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...
- 企业模式之Unit Of Work模式
在开始UnitOfWork模式之前有必要回顾下我们耳熟能详的Data Access Object(DAO)模式,即数据访问对象.DAO是一种简单的模式,我们构建应用的时候经常会使用到它,它的功能就是将 ...