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 ...
随机推荐
- SAP 常用函数
1. 访问本地 或别的服务器上文件 函数 CALL METHOD CL_GUI_FRONTEND_SERVICES=>EXECUTE EXPORTING DOCUME ...
- 搭建DHCP服务器以及DHCP中继服务器
一.DHCP服务器 1.首先配置DHCP服务器的IP地址(DHCP服务器网卡桥接在VMnet1) .配置好IP后重启DHCP服务 3.安装DHCP服务器,在这里我用的是YUM安装的(关于YUM ...
- sql语句练习50题
Student(Sid,Sname,Sage,Ssex) 学生表 Course(Cid,Cname,Tid) 课程表 SC(Sid,Cid,score) 成绩表 Teacher(Tid,Tname) ...
- linux 下vim的使用
vi与vim vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对 ...
- P1147连续自然数和
洛谷1147 连续自然数和 题目描述 对一个给定的自然数M,求出所有的连续的自然数段,这些连续的自然数段中的全部数之和为M. 例子:1998+1999+2000+2001+2002 = 10000,所 ...
- 傅盛谈管理的本质zz
管理的本质就是树立一个核心的业务,让这个业务带着所有的员工和组织构架往前走,而不是去构建一个四平八稳的组织,让所有的业务井井有条. 今天,整个互联网都在回归本原.它让以前看上去极简单的点产生爆发,而不 ...
- JavaScript-数据引用类型对象
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 还在花钱搞开发？猿团YTFCloud，零基础照样做专业APP
近日,猿团科技再推新品:YTFCloud.这是一套一体化的云端解决方案,用户可以通过平台提供的各类解决方案,一键创建应用,也就是说,YTFCloud实现了APP的DIY自制,用户无需懂得编程,零基础制 ...
- 安装Pomelo 时遇到的坑
一.Pomelo相关的代码地址 https://github.com/NetEase,这里面包含比较多的项目. 2. https://github.com/NetEase/pomelo/wiki/%E ...
- 不制作证书是否能加密SQLSERVER与客户端之间传输的数据？
不制作证书是否能加密SQLSERVER与客户端之间传输的数据? 在做实验之前请先下载network monitor抓包工具 微软官网下载:http://www.microsoft.com/en-us/ ...