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 ...
随机推荐
- 行锁sqlserver
SELECT COUNT(1) FROM BLBQ_Sys_TableId With (RowLock,UpdLock) WHERE Table_Name = @Table_Name commit ...
- 深入理解JVM内存模型
1.程序计数器在虚拟机的概念模型里字节码解释器工作时就是通过改变 这个计数器的值来选取下一条需要执行的字节码指令,分支.循环.跳转.异常处理. Java 虚拟机的多线程是通过线程轮流切换并分配处理器执 ...
- xll调试方法
1)打开编译好的debug下的xll 2)project property->Configuration Properties Debugging set Attach as "Yes ...
- python安装pycrypto报错error: command 'x86_64-linux-gnu-gcc' failed with exit status 1
系统3.19.0-15-generic #15-Ubuntu 安装pycrypto提示error: command 'x86_64-linux-gnu-gcc' failed with exit st ...
- ng-bind,ng-cloak优化数据显示
<div>{{text}}</div> 当我们使用angular在页面中有取值的时候,如果出现网络加载慢的问题,可能会在页面上出现{{text}}这种不好的体验,那么angul ...
- rm: Argument list too long
rm -rf /testdir/* -bash: /bin/rm: Argument list too long 解决: cd /testdir/; ls | xargs rm -rf
- iOS书摘之编写高质量iOS与OS X代码的52个有效方法
来自<Effective Objective-C 2.0编写高质量iOS与OS X代码的52个有效方法>一书的摘要总结 一.熟悉Objective-C 了解Objective-C语言的起源 ...
- c# 抓取Web网页数据分析
通过程序自动的读取其它网站网页显示的信息,类似于爬虫程序.比方说我们有一个系统,要提取BaiDu网站上歌曲搜索排名.分析系统在根据得到的数据进行数据分析.为业务提供参考数据. 为了完成以上的需求,我们 ...
- 编译器问题：运行maven，报错-Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match.
1.新建环境变量M2_HOME 2.指向你的maven安装目录 例如 :M2_HOME=D:\Apps\apache-maven-3.3.9 3.进入Myeclipse进行修改,Window-> ...
- 冒泡排序优化JAVA
本文对传统的冒泡排序进行了一些优化,减少了循环次数. 时间复杂度 若文件的初始状态是正序的,一趟扫描即可完成排序.所需的关键字比较次数 C 和记录移动次数 M 均达到最小值: C(min)=n-1 , ...