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 ...
随机推荐
- nginx的特点
1.热部署 我个人觉得这个很不错.在master管理进程与worker工作进程的分离设计,使的Nginx具有热部署的功能,那么在7×24小时不间断服务的前提下,升级Nginx的可执行文件 ...
- mysql死锁问题解决步骤
锁表产生的原因 锁表的具体情况 解决锁表问题 1.查询是否锁表 show OPEN TABLES where In_use > 0; 2.查询进程 show processlist; 查询到相对 ...
- jQuery实现无缝滚动条
很多时候只看别人的代码时很难看懂.有很多原因,有时候可能是没有耐心,这时候看一下实现的原理就很快明白代码的内容,所以要加些注释,让自己让别人都能看明白:有的时候就是因为知识有限就是不懂,哪怕代码很简单 ...
- [DiocpRPC]介绍与安装
介绍: Diocp-RPC组件基于DIOCP进行扩展开发,通信协议基于HTTP,遵循RESTFul开发模式,可以用户三层开发.IDE可以支持大于等于D7的IDE,服务端组件支持Win32/Win ...
- 梳理一下JS的基本语法
web三层结构来说 结构层:HTML 从语义角度,描述页面结构 样式层:CSS 从审美的角度,美化页面 行为层:JavaScript 从交互的角度,提升用户体验 ...
- JS原生方法实现瀑布流布局
html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...
- 【洛谷P3258】松鼠的新家
很好的一道题 LCA+树上前缀和 sum数组是前缀和数组, 分类讨论一下, 1.访问到一个点p1,若下一个点p2需要往儿子下面找的话,那么lca就是这个点p1,则sum[p1]--; sum[p2]+ ...
- Yaf零基础学习总结3-Hello Yaf
Yaf零基础学习总结3-Hello Yaf 上一次我们已经学习了如何安装yaf了,准备工作做好了之后我们来开始实际的编码了,码农都知道一个经典的语句就是“Hello World”了,今天我们开始入手Y ...
- dojo对数组的处理函数，dojo.forEach、dojo.every、 dojo.some、 dojo.map等
转自:http://jiataodong.blog.163.com/blog/static/3490549220111024111943439/ 数组处理是 Ajax 应用开发中的常见操作.Dojo ...
- 仿知乎Android端回答UI
个人觉得知乎这个回答界面非常的好看. 首先中间那个卡片,是cardview. 此外,要隐藏掉导航栏. 然后就是,怎么实现cardview怎么能有一半在蓝色部分呢? 首先要分成两部分,第一部分Textv ...