原声js基础笔记
前端开发群：
欢迎加入。
<!DOCTYPE html>
<html>
<head>
<title>设置一个元素是否可见</title>
<meta charset="utf-8">
</head>
<style type="text/css">
.tips{width:370px;background:#CCC;display:none;}
</style>
<script type="text/javascript">
//定义一个函数
function show_or_hide()
{
//通过id来获取一个元素
var objl =document.getElementById("get_p");
// 这种是行内样式的写法,形如：<p style="display:none;"></p>
if(objl.style.display == 'block')
objl.style.display = 'none';
else
objl.style.display = 'block';
}
</script>
<body>
<!-- 添加点击事件 -->
<input type="button" value="隐藏/显示" onclick="show_or_hide()" title="可以点击我一下">
<p id="get_p" class="tips" >
从前有座山，山上有座庙，庙里有个帅哥写代码
</p>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>鼠标移入移出事件</title>
<meta charset="utf-8">
</head>
<style type="text/css">
#get_input{background:yellow;}
</style>
<script type="text/javascript">
function over_bg_color()
{
var obj = document.getElementById('get_input');
// 这种是行内样式的写法,形如：<p style="background:red;"></p>
obj.style.background='red';
}
function out_bg_color()
{
var obj = document.getElementById('get_input');
obj.style.background='yellow';
}
</script>
<body>
<!-- 添加鼠标移入移出事件 -->
<input id="get_input" type="button" value="隐藏/显示"onmouseover="over_bg_color()" onmouseout="out_bg_color()" >
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>二级菜单</title>
<meta charset="utf-8">
<style type="text/css">
#nav{height:50px;background:red;margin:50px auto 0px;}
a
{
float:left;width:250px;line-height:50px;
text-align:center;color:#FFF;text-decoration:none;
}
#detailed
{
width:250px;height:200px;background:red;
position:relative;border-top:2px solid yellow;
display:none;left:0px;
}
</style>
<script type="text/javascript">
function show_detailed(index)
{
var obj = document.getElementById('detailed');
// 设置元素可见
obj.style.display='block';
var move_left = 250*index-250;
move_left = move_left+"px";//将结果转换成字符串
obj.style.left =move_left;
}
function hide_detailed()
{
var obj = document.getElementById('detailed');
obj.style.display='none';
}
</script>
</head>
<body>
<div id="nav">
<!-- 这种直接在行内为元素添加事件不美观，可以写在JS里面 -->
<a href="#" onmouseover="show_detailed(1)"onmouseout="hide_detailed()"> 首页</a>
<a href="#" onmouseover="show_detailed(2)"onmouseout="hide_detailed()">家电</a>
<a href="#" onmouseover="show_detailed(3)"onmouseout="hide_detailed()">手机</a>
<a href="#" onmouseover="show_detailed(4)"onmouseout="hide_detailed()">付款方式</a>
<a href="#" onmouseover="show_detailed(5)"onmouseout="hide_detailed()">客服</a>
</div>
<div id="detailed">
<a href="#">一</a>
<a href="#">二</a>
<a href="#">三</a>
<a href="#">四</a>
</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>改变物体外观</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:200px;}
#change_box{width:300px;height:300px;background:#CCC;}
</style>
<script type="text/javascript">
function change_color(want_color)
{
var obj = document.getElementById('change_box');
obj.style.background = want_color;
}
function change_size(width_size,height_size)
{
var obj = document.getElementById('change_box');
obj.style.width = width_size+'px';
obj.style.height = height_size+'px';
}
</script>
</head>
<body>
<input type="button" value="变黄" onclick="change_color('yellow')">
<input type="button" value="变绿" onclick="change_color('green')">
<input type="button" value="变红" onclick="change_color('red')">
<input type="button" value="变大" onclick="change_size(500,600)">
<input type="button" value="变小" onclick="change_size(100,200)">
<div id="change_box"></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>JS为元素添加事件</title>
<meta >
<meta charset="utf-8">
</head>
<body>
<input id="btn1" type="button" value="按钮" onclick="abc()" />
<script type="text/javascript">
// 下面这个获取元素的代码要写在该目标 元素的下面
// 因为程序是从上到下执行的，不然的话会报错
var obtn = document.getElementById('btn1');
function abc()
{
alert('这是一个弹窗');//可以是单引号，也可以是双引号
}
//obtn.onclick=abc;//这种是直接在JS里面为元素添加事件的写法
//这里函数不能加括号
</script>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>全选反选按钮</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:150px;background:#CCC;}
</style>
</head>
<body>
<input type="button" id="btn_all" value="全选"></input>
<input type="button" id="btn_reversed" value="反选"></input>
<input type="button" id="btn_no" value="都不选"></input>
<div id="ware">
<input type="checkbox" ></input><input type="checkbox" ></input>
<input type="checkbox" ></input><input type="checkbox" ></input>
<input type="checkbox" ></input><input type="checkbox" ></input>
</div>
</body>
<script type="text/javascript">
function choose_all()
{
var obj = document.getElementById('ware');
//从一个目标元素中再获取元素
//下面是通过html元素名字来获取，结果是数组
var ch_b = obj.getElementsByTagName('input');
for(var i=0; i <= ch_b.length; i++)
//下面的语句类似于：<input type="checkbox" checked="true"></input>
ch_b[i].checked = true;
}
function choose_no()
{
var obj = document.getElementById('ware');
var ch_b = obj.getElementsByTagName('input');
for(var i=0; i <= ch_b.length; i++)
ch_b[i].checked = false;
}
function choose_reversed()
{
var obj = document.getElementById('ware');
var ch_b = obj.getElementsByTagName('input');
for(var i=0; i <= ch_b.length; i++)
ch_b[i].checked = ( ch_b[i].checked == true )? false:true;
}
//我并没有直接document.getElementById('');这样获取元素
//按理说要先获取元素，再来操作，不然是不行的，
//我也不知道为什么我的这段代码却可以
btn_all.onclick = choose_all;
btn_no.onclick = choose_no;
btn_reversed.onclick = choose_reversed;
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>选项卡</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:150px;}
#xuan_xiang_ka{width:208px;height:350px;}
.title{height:50px;}
.title input{height:50px;width:50px;float:left;border:1px solid #CCC;margin-left:2px;}
.active{background:#5CB85C;}
#content_box{background:yellow;}
#content_box div{display:none;}/*设置子元素不可见*/
</style>
</head>
<body>
<div id="xuan_xiang_ka">
<div class="title">
<input class="active" type="button" value="新闻1"></input>
<input type="button" value="新闻2"></input>
<input type="button" value="新闻3"></input>
<input type="button" value="新闻4"></input>
</div>
<div id="content_box" >
<div style="display:block;">
从前有座山1
</div>
<div>
从前有座山2
</div>
<div>
从前有座山3
</div>
<div>
从前有座山4
</div>
</div>
</div>
</body>
<script type="text/javascript">
var an_niu = document.getElementsByTagName('input');
var temp =document.getElementById('content_box');
var wen_zhang =temp.getElementsByTagName('div');
for(var i=0; i < an_niu.length; i++)
{
an_niu[i].index = i;//为每个按钮添加序号
an_niu[i].onclick = function ()
{
for(var j=0; j < an_niu.length; j++)
{
an_niu[j].className = '';//清除类
wen_zhang[j].style.display = 'none';
}
this.className = 'active';//当前按钮添加活动类
wen_zhang[this.index].style.display ='block';//当前选项卡可见
//思路：在点击一个选项卡之前，把其他的选项卡都影藏，并清除类
//之后再为当前的选项卡添加属性
}
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>innerHTML练习</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:50px;}
div{border:1px solid red;width:260px;height:200px;padding:20px;}
</style>
</head>
<body>
<input id="text1" type="text"></input>
<input id="btn1" type="button" value="设置文字"></input>
<div id="div1">
从前有座山
</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById('btn1');
var text1 = document.getElementById('text1');
var div1 = document.getElementById('div1');
btn1.onclick = function ()
{
// 让div里面的文字是text里面的文字
div1.innerHTML = text1.value;
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>月历选项卡</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
.ware{background:yellow;padding:15px 0px 15px 15px;width:285px;margin:100px auto;overflow:hidden;}
.month{overflow:hidden;}
span{float:left;width:80px;line-height:80px;text-align:center;font-size:16px;color:#FFF;font-weight:bold; margin-right:15px;margin-bottom:15px; background:#999;}
.tips{background:red;clear:both;width:240px;padding:15px;font-weight:bold;color:#FFF;}
.active{background:#FFF;color:black;}
</style>
</head>
<body>
<div class="ware">
<div class="month">
<span class="active">1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
<span>7</span><span>8</span><span>9</span>
<span>10</span><span>11</span><span>12</span>
</div>
<div id="setText" class="tips">
</div>
</div>
</body>
<script type="text/javascript">
var obj_month = document.getElementsByTagName('span');
var objTips = document.getElementById('setText');
var arr =[
'这个月有元旦',
'我们一起过年吧',
'这个月有38妇女节',
'4月分有什么节日呢？',
'哈哈劳动节快到了',
'可惜儿童节不属于我们',
'貌似有建党节吧',
'这个月有建军节吧么么哒',
'教师节到了，给老师一份祝福吧',
'一起看阅兵式吧',
'光棍节到了，有木有很伤心～',
'圣诞节不是中国的～'
];
// 默认显示第一个月
objTips.innerHTML = '<p>1月活动'+'</p>'+arr[0];
for(var i=0; i < obj_month.length; i++)
{
obj_month[i].index = i;
obj_month[i].onmousemove = function ()
{
for(var j=0; j < obj_month.length; j++)
obj_month[j].className = '';
this.className = 'active';
objTips.innerHTML = '<p>'+(this.index+1)+'月活动'+'</p>'+arr[this.index];
}
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>数组遍历</title>
<meta charset="utf-8">
</head>
<body>
</body>
<script type="text/javascript">
var colorS =['yellow','blue','green','pink','black'];
for( var x in colorS)//x 是下标
{
alert(colorS[x]);
//alert(x);
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>属性用变量代替</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:400px; padding-top:200px;}
#box{width:300px;height:300px;background:yellow;}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="点击我一下下～" id="btn"></input>
</body>
<script type="text/javascript">
var value = 'background';
var oBtn = document.getElementById('btn');
var oBox = document.getElementById('box');
oBtn.onclick = function ()
{
oBox.style[value] = 'red';
//等同于 oBox.style.background = 'red';
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>根据参数个数实现相应功能</title>
<meta charset="utf-8">
</head>
<body>
<div id="J_box" style="300px;height:240px;background:#CCC;margin:100px;"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementById('J_box');
function css ()
{
if(arguments.length == 2)
alert(arguments[0].style[arguments[1]]);
if(arguments.length == 3)
arguments[0].style[arguments[1]] = arguments[2];
}
css(oBox,'width','800px');
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>获取非行间样式</title>
<meta charset="utf-8">
<style type="text/css">
#J_box{width:300px;height:240px;background:#CCC;margin:100px;}
</style>
</head>
<body>
<div id="J_box"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementById('J_box');
if(oBox.currentStyle)
alert(oBox.currentStyle.width);//IE
else
alert(getComputedStyle(oBox,false).width);//FF
//采用变量的写法 alert(getComputedStyle(oBox , false)['width']);
</script>
</html>
<script type="text/javascript">
// 函数封装
// function getStyle(obj,name)
// {
// if( obj.currentStyle)
// return obj.currentStyle[name];//obj.currentStyle.width;
// else
// return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width;
// }
</script>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>数组的基本操作</title>
<meta charset="utf-8">
</head>
<body>
</body>
<script type="text/javascript">
var arr = [1,3,5,7,9,10];
var add = [100,200,300,400,500];
//arr.push(6);//尾部追加一个元素
//arr.pop();//尾部删除一个元素
//arr.unshift('lijun');//头部追加元素
//arr.shift();//头部删除一个
//arr.splice(3,2)//删除元素 起点 长度 从0开始算
//arr.splice(3,0);//从下标3开始，依次删除0个元素
//arr.splice(3,2,6,7);//从下标3开始，依次删除2个，然后添加6,7元素
//arr.concat(add);//两个字符串连接，但是两个数组并没有变
//alert(arr.join('***'));//记得加引号，相邻数组元素间添加分隔符,不会真的改变数组
/*var temp = ['aaa','xxx','dddd','ssss','eeee','bbbbb'];
alert(temp.sort());*/ //数组排序，只能排字符串
/*var temp =[6,7,45,8,6,10,7,8,45,1,14,89,39];
alert(temp.sort(
function(num1,num2)
{
return num1 - num2;
}
));*/ //数组排序，排数字
// 数组排序的时候要根据实际情况改动，例如传递的是li或者其他元素，
// 要把最后在比较的是数值比较
alert(arr);
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>定时器的使用</title>
<meta charset="utf-8">
</head>
<body>
<input id="kai" type="button" value="开启"></input>
<input id="guan" type="button" value="关闭"></input>
</body>
<script type="text/javascript">
//setInterval 间隔
//setTimeout 延时
var okai = document.getElementById('kai');
var oguan = document.getElementById('guan');
function say()
{
alert('您好~');
}
okai.onclick = function ()
{
temp = setInterval(say,2500);//函数只写名字不加括号，变量也是全局的，不然等下下面不能关闭
}
oguan.onclick = function()
{
clearInterval(temp);//这个被关闭的变量是全局的，不要定义成局部的。
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>数字时钟，需要相关图片辅助</title>
<meta charset="utf-8">
<style type="text/css">
body{background:#555;}
.timeBox{width:300px;margin:200px auto;}
span{font-size: 50px;}
</style>
</head>
<body>
<div class="timeBox">
<img src="./images/0.png"><img src="./images/0.png">
<span>:</span>
<img src="./images/0.png"><img src="./images/0.png">
<span>:</span>
<img src="./images/0.png"><img src="./images/0.png">
</div>
</body>
<script type="text/javascript">
function setNumberToStr(number)
{
// 把数字弄成两位数的，并转换成字符串
if(number < 10)
return '0' + number;
else
return '' + number;
}
// 获取系统时间
function realTime()
{
var oDate = new Date();
var hour = oDate.getHours();//获取小时
var minute = oDate.getMinutes();//获取分钟
var second = oDate.getSeconds();//获取秒
return setNumberToStr(hour) + setNumberToStr(minute) + setNumberToStr(second);
}
function setTime()
{
var otime = document.getElementsByTagName('img');
var howTime = realTime();//当前时间 转换成字符串格式后存入数组
for(var i=0; i < otime.length; i++)
otime[i].src = './images/'+howTime[i]+'.png';
}
setTime();//这个是为了解决刷新的时候全部显示０的情况，也可以把一秒设置更小
setInterval(setTime,1000);
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>字符串查找、系统时间</title>
<meta charset="utf-8">
</head>
<body>
</body>
<script type="text/javascript">
var times = "我是一个大帅哥";
alert(times.charAt(0));//用来查找字符串中某个坐标中的内容
// 不能是数组，只能是字符串
var odate = new Date();
//alert(odate.getFullYear());
//alert(odate.getMonth()+1);//月份少1
// alert(odate.getDate());//星期几
//alert(odate.getHours());//获取小时
//alert(odate.getMinutes());//获取分钟
//alert(odate.getSeconds());//获取秒
//alert(odate.getDay());//周日是０
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>孩子节点</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
var oUl = document.getElementById('ul1');
//alert(oUl.childNodes.length);//节点的个数，会包括文本节点。
//for(var i=0; i < oUl.childNodes.length; i++)
//alert(oUl.childNodes[i].nodeType);//节点的类型 文本节点->3 元素节点->1
//alert(oUl.children.length);节点的个数，不包括文本节点。
for(var i=0; i < oUl.children.length; i++)
oUl.children[i].style.background = 'red';
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
<!--
DOM节点
childNodes children nodeType
parentNode offsetParent
-->
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>父节点</title>
<meta charset="utf-8">
<style type="text/css">
body{padding-left:400px;padding-top:200px;}
a{margin-left:100px;}
</style>
<script type="text/javascript">
window.onload = function()
{
//var oUl = document.getElementById('ul1');
//alert(oUl.children[i].parentNode);//错误的写法//////////////////////////////
//var oSoon = document.getElementById('soon');
//alert(oSoon.parentNode);//获取某个元素的父节点
var oA = document.getElementsByTagName('a');
for(var i=0; i < oA.length; i++)
{
oA[i].onclick = function()
{
this.parentNode.style.display = 'none';
//a的父亲就是li，让li隐藏
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>从前有座山
<a href="#">隐藏</a>
</li>
<li>山上有座庙
<a href="#">隐藏</a>
</li>
<li>庙里有个老和尚
<a href="#">隐藏</a>
</li>
<li>老和尚对着小和尚说
<a href="#">隐藏</a>
</li>
<li>我们这里有座山
<a href="#">隐藏</a>
</li>
<li>里面有个老和尚
<a href="#">隐藏</a>
</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>父级元素</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
// 通过html标签来获取元素，返回的是数组，
//可以在后面加坐标指定要获取某个元素
var demo1 = document.getElementsByTagName('ul');
var demo2 = document.getElementsByTagName('li');
alert(demo2[2].offsetParent);//父级元素（有定位属性的父级元素）
}
</script>
</head>
<body>
<ul>
<li>从前有座山</li>
<li>山上有座庙</li>
<li>庙里有个老和尚</li>
<li>老和尚对着小和尚说</li>
<li>我们这里有座山</li>
<li>里面有个老和尚</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>孩子节点</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function()
{
// 这是比较便捷的写法，让某些类拥有一些样式
// var oLi = document.getElementsByTagName('li');
// for(var i=0; i < oLi.length; i++)
// if(oLi[i].className == 'bgRed')
// oLi[i].style.background = 'red';
var oul = document.getElementsByTagName('ul')[0];
for(var i=0; i < oul.childNodes.length; i++)
if(oul.childNodes[i].className == 'bgRed')
oul.childNodes[i].style.background = 'red';
}
</script>
</head>
<body>
<ul>
<li class="bgRed">从前有座山</li>
<li>山上有座庙</li>
<li>庙里有个老和尚</li>
<li class="bgRed">老和尚对着小和尚说 </li>
<li>我们这里有座山</li>
<li class="bgRed">里面有个老和尚</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>代码块封装思想</title>
<meta charset="utf-8">
<script type="text/javascript">
function getByClass(oParent,oClass)
{
var oReturn = [];//存放结果
// 获取该元素下面的所有元素
var oElem = oParent.getElementsByTagName('*');
for(var i=0; i < oElem.length; i++)
if(oElem[i].className == oClass)
oReturn.push(oElem[i]);
return oReturn;
}
window.onload = function()
{
var oul = document.getElementsByTagName('ul')[0];
//0搜集的结果都放在这里
var oChange = getByClass(oul,'bgRed');
for(var i=0; i <oChange.length; i++)
oChange[i].style.background = 'red';
}
</script>
</head>
<body>
<ul>
<li class="bgRed">从前有座山</li>
<li>山上有座庙</li>
<li>庙里有个老和尚</li>
<li class="bgRed">老和尚对着小和尚说 </li>
<li>我们这里有座山</li>
<li class="bgRed">里面有个老和尚</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>DOM 方式操作元素属性</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
var oa =document.getElementsByTagName('a')[0];
// 获取：getAttribute(名称)
// 设置：setAttribute(名称，值)
// 删除： removeAttribute(名称)
oa.setAttribute('title','哈哈~');
}
</script>
</head>
<body>
<a href="#">我很帅</a>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>添加节点</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[1];
var oTxt = document.getElementsByTagName('input')[0];
var oUl = document.getElementsByTagName('ul')[0];
oBtn.onclick = function()
{
var oLi = document.createElement('li');//创建一个元素
var inBeforeLi = document.getElementsByTagName('li')[0];
if(inBeforeLi)
oUl.insertBefore(oLi,inBeforeLi)//在某个元素之前追加
else
oUl.appendChild(oLi);//末尾追加
oLi.innerHTML = oTxt.value;
}
}
</script>
</head>
<body>
<input type="text"></input>
<input type="button" value="创建li"></input>
<ul>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>删除节点</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oA = document.getElementsByTagName('a');
var oUl = document.getElementsByTagName('ul')[0];
for(var i=0; i < oA.length; i++)
oA[i].onclick = function()
{
oUl.removeChild(this.parentNode);
}
}
</script>
</head>
<body>
<ul>
<li>111<a href="#">删除</a></li>
<li>222<a href="#">删除</a></li>
<li>333<a href="#">删除</a></li>
<li>444<a href="#">删除</a></li>
<li>555<a href="#">删除</a></li>
<li>666<a href="#">删除</a></li>
<li>777<a href="#">删除</a></li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>节点碎片</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
// 创建一个节点碎片
var temp = document.createDocumentFragment();
for(var i=0; i<25; i++)
{
var oLi = document.createElement('li');
// 向节点碎片中添加孩子节点
temp.appendChild(oLi);
}
// 直接给要添加节点的元素添加 已经存在的碎片
document.getElementsByTagName('ul')[0].appendChild(temp);
}
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>表格基本属性</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oTab = document.getElementsByTagName('table')[0];
// alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
var oldColor = '';//记录原来的颜色
// 表格隔行换色，鼠标移入换色，移出换回原来的颜色
for(var i=0; i < oTab.tBodies[0].rows.length; i++)
{
if( i % 2 )//奇偶行数
oTab.tBodies[0].rows[i].style.background = '#CCC';
else
oTab.tBodies[0].rows[i].style.background = '#555';
oTab.tBodies[0].rows[i].onmouseover = function()
{
oldColor = this.style.background;
this.style.background = 'green';
}
oTab.tBodies[0].rows[i].onmouseout = function()
{
this.style.background = oldColor;
}
}
}
</script>
</head>
<body>
<table border="1px" width="500px">
<thead>
<td>ID</td ><td>姓名</td><td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td><td>李俊</td><td>18</td>
</tr>
<tr>
<td>2</td><td>李白</td><td>96</td>
</tr>
<tr>
<td>3</td><td>小明</td><td>17</td>
</tr>
<tr>
<td>4</td><td>李俊</td><td>18</td>
</tr>
<tr>
<td>5</td> <td>李白</td><td>96</td>
</tr>
<tr>
<td>6</td><td>小明</td><td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>表格自动增加行数</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
// 直接读取某行某列的值
// alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
var oTab = document.getElementsByTagName('table')[0];
var oname = document.getElementsByTagName('input')[0];
var oage = document.getElementsByTagName('input')[1];
var obtn = document.getElementsByTagName('input')[2];
var id = oTab.tBodies[0].rows.length;
obtn.onclick = function()
{
// 创建1个行
var oTr = document.createElement('tr');
// 创建第1个列
var oTd_1 = document.createElement('td');
oTd_1.innerHTML = ++id;
// 添加到行里面
oTr.appendChild(oTd_1);
//创建第2个列
var oTd_2 = document.createElement('td');
oTd_2.innerHTML = oname.value;
oTr.appendChild(oTd_2);
//创建第3个列
var oTd_3 = document.createElement('td');
oTd_3.innerHTML = oage.value;
oTr.appendChild(oTd_3);
// 添加一行行
oTab.appendChild(oTr);
}
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
姓名：<input type="text"></input>
年龄：<input type="text"></input>
<input type="button" value="添加"></input>
<table border="1px" width="500px">
<thead>
<td>ID</td ><td>姓名</td><td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td><td>李俊</td><td>18</td>
</tr>
<tr>
<td>2</td><td>李白</td><td>96</td>
</tr>
<tr>
<td>3</td><td>小明</td><td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>表格自动删除单元格</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oTab = document.getElementsByTagName('table')[0];
// 这个注释是在为表格添加行的时候，添加删除操作单元格的时候的代码
// 貌似通过JS添加的单元格并不会有点击事件
// var oTd_4 = document.createElement('td');
// oTd_4.innerHTML = '<a href="#">删除</a>';
// oTr.appendChild(oTd_4);
// oTab.appendChild(oTr);
var oA = oTab.getElementsByTagName('a');
for(var i=0; i < oA.length; i++)
{
oA[i].onclick = function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
<table border="1px" width="500px">
<thead>
<td>ID</td ><td>姓名</td><td>年龄</td><td>编辑</td>
</thead>
<tbody>
<tr>
<td>1</td><td>李俊</td><td>18</td><td><a href="#">删除</a></td>
</tr>
<tr>
<td>2</td><td>李白</td><td>96</td><td><a href="#">删除</a></td>
</tr>
<tr>
<td>3</td><td>小明</td><td>17</td><td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>表格搜索</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oTab = document.getElementsByTagName('table')[0];
var obtn = document.getElementsByTagName('input')[1];
var oname = document.getElementsByTagName('input')[0];
obtn.onclick = function()
{
for(var i=0; i< oTab.tBodies[0].rows.length; i++)
{
// 输入要搜索的名字，必须完全一样才能匹配
if(oname.value == oTab.tBodies[0].rows[i].cells[1].innerHTML)
oTab.tBodies[0].rows[i].style.background = 'yellow';
else
oTab.tBodies[0].rows[i].style.background = '';
}
}
//忽略大小写搜索
// obtn.onclick = function()
// {
// for(var i=0; i< oTab.tBodies[0].rows.length; i++)
// {
// var sTxt = oname.value;
// var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML;
// if( sTxt.toLowerCase() == sTab.toLowerCase() )
// oTab.tBodies[0].rows[i].style.background = 'yellow';
// else
// oTab.tBodies[0].rows[i].style.background = '';
// }
// }
// 单个关键字模糊搜索
// obtn.onclick = function()
// {
// for(var i=0; i < oTab.tBodies[0].rows.length; i++)
// {
// var oTabName = oTab.tBodies[0].rows[i].cells[1].innerHTML;
// if( oTabName.search(oname.value) != -1)
// oTab.tBodies[0].rows[i].style.background = 'blue';
// else
// oTab.tBodies[0].rows[i].style.background = 'red';
// }
// }
// 多关键字模糊搜索
// obtn.onclick = function()
// {
// for(var i=0; i < oTab.tBodies[0].rows.length; i++)
// {
// var oTabName = oTab.tBodies[0].rows[i].cells[1].innerHTML;
// var arr = oname.value.split(' ');//用空格把字符串分割
// oTab.tBodies[0].rows[i].style.background = '';//不要写在下面的if else中
// for(var j=0; j < arr.length; j++)
// {
// if( oTabName.search(arr[j]) != -1 )
// oTab.tBodies[0].rows[i].style.background = 'blue';
// }
// }
// }
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
姓名：<input type="text"></input>
<input type="button" value="搜索"></input>
<table border="1px" width="500px">
<thead>
<td>ID</td ><td>姓名</td><td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td><td>李俊</td><td>18</td>
</tr>
<tr>
<td>2</td><td>李白</td><td>96</td>
</tr>
<tr>
<td>3</td><td>小明</td><td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>字符串查找</title>
<meta charset=" utf-8">
<script type="text/javascript">
var str = 'asdfghjkl';
alert(str.search('kl'));//查找这个k在字符串中的第几个位置。7 没有-1
</script>
</head>
<body>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>添加孩子节点，会先删除原来所在的位置</title>
<meta charset=" utf-8">
<style type="text/css">
ul{background:yellow;margin-bottom:20px;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[0];
var oUl1 = document.getElementsByTagName('ul')[0];
var oUl2 = document.getElementsByTagName('ul')[1];
oBtn.onclick = function()
{
//var temp = oUl1.getElementsByTagName('li')[0];
var temp = oUl1.children[0];
oUl2.appendChild(temp);//这个是在一个元素添加孩子节点。
//oUl1.removeChild(temp);//这步骤可以省略，上面那个代码会先删除再添加。
}
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
<ul>
<li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li>
</ul>
<ul></ul>
<input type="button" value="移动"></input>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>列表排序</title>
<meta charset=" utf-8">
<style type="text/css">
ul{background:yellow;margin-bottom:20px;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[0];
var oLi = document.getElementsByTagName('ul')[0].children;
var arr = [];
oBtn.onclick = function()
{
for(var i=0; i < oLi.length; i++)
arr[i] = oLi[i];
//alert(arr[0] === oLi[0]);
arr.sort(function(li1,li2){return parseInt(li1.innerHTML) - parseInt(li2.innerHTML);});
for(var i=0; i < arr.length; i++)
document.getElementsByTagName('ul')[0].appendChild(arr[i]);
// 原本以为排序好后列表的长度是原来的两倍
// 但是不是，估计是添加孩子节点的时候，就把原来的节点给删除了。
}
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
<input type="button" value="排序"></input>
<ul>
<li>99</li>
<li>48</li>
<li>25</li>
<li>97</li>
<li>3</li>
<li>38</li>
<li>26</li>
<li>49</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>表格排序</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[0];
var oTab = document.getElementsByTagName('table')[0];
oBtn.onclick = function ()
{
var arr = [];
for(var i=0; i< oTab.tBodies[0].rows.length; i++)
arr[i] = oTab.tBodies[0].rows[i];//把表格的每行存入一个数组
arr.sort(function (tr1,tr2)
{return parseInt(tr1.cells[0].innerHTML) - parseInt(tr2.cells[0].innerHTML);});
for(var i=0; i < arr.length; i++)
oTab.tBodies[0].appendChild(arr[i]);//把排序好的数组添加的表格中
}
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
<input type="button" value="排序"></input>
<table border="1px" width="500px">
<thead>
<td>ID</td><td>姓名</td><td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td><td>李俊</td><td>18</td>
</tr>
<tr>
<td>7</td><td>张三</td><td>16</td>
</tr>
<tr>
<td>3</td><td>王五</td><td>25</td>
</tr>
<tr>
<td>6</td><td>马云</td><td>17</td>
</tr>
<tr>
<td>2</td><td>小三</td><td>9</td>
</tr>
<tr>
<td>5</td><td>小芳</td><td>36</td>
</tr>
<tr>
<td>4</td><td>君君</td><td>14</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>定时器的使用</title>
<meta charset=" utf-8">
<style type="text/css">
div{width:200px;height:150px;background:yellow;position:absolute;}
}
</style>
<script type="text/javascript">
window.onload = function()
{
function Move()
{
document.getElementsByTagName('div')[0].style.left =
document.getElementsByTagName('div')[0].offsetLeft + 10 + 'px';
}
setInterval(Move,30);
}
</script>
</head>
<body>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>物体的运动</title>
<meta charset=" utf-8">
<style type="text/css">
body{margin:0px;padding:0px;}
div{width:200px;height:150px;background:yellow;position:absolute;}
}
</style>
<script type="text/javascript">
window.onload = function()
{
var timer = null;
var oBtn = document.getElementsByTagName('input')[0];
oBtn.onclick = function ()
{
clearInterval(timer);//保证只有一个定时器被打开
timer = setInterval(Move,30);
}
function Move()
{
var oDiv = document.getElementsByTagName('div')[0];
if(oDiv.offsetLeft == 600)//这两个语句不能调换顺序，不然会有偏差
clearInterval(timer);
else
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
//现在是因为有if，两个语句只会执行一个，可以换顺序
}
//在开始运动时，关闭已经存在的定时器
//把运动和停止隔开（if else）
}
</script>
</head>
<body>
<input type="button" value="动起来~"></input>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>无缝滚动 -By小小俊</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
button{margin-top:180px;margin-left:400px;}
div{margin:20px auto;width:730px;height:233px;
position:relative;background:yellow;
box-shadow: 20px 20px 3px #CCC;overflow:hidden;
border:2px solid #CCC;border-radius:25px;
}
div ul{background:red;width:1480px;height:233px;position:absolute; }
div ul li{float:left;list-style:none;margin-right:10px;}
</style>
<script type="text/javascript">
var speed = 0;
var timer = null;
window.onload = function()
{
var leftBtn = document.getElementsByTagName('button')[0];//左边的按钮
var rightBtn = document.getElementsByTagName('button')[1];//右边的按钮
var oUl = document.getElementsByTagName('ul')[0];//装图片的容器
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
timer = setInterval(Move,30);//貌似点击按钮的时候这个定时器没有被关闭，导致叠加
leftBtn.onclick = function(){speed = -5;startMove();}
rightBtn.onclick = function(){speed = 5;startMove();}
oUl.onmouseover = function(){clearInterval(timer);}
oUl.onmouseout = function(){timer = setInterval(Move,30);}
function Move()
{
oUl.style.left = oUl.offsetLeft + speed + 'px';
if( oUl.offsetLeft < -740)//往左边滚动的时候
oUl.style.left = '0px';
else
if( oUl.offsetLeft > 0)//往右边滚动的时候
oUl.style.left = '-740px';
}
function startMove()
{
clearInterval(timer);//避免定时器叠加
timer = setInterval(Move,30);
}
}
</script>
</head>
<body>
<button>点击向左边滚动、么么哒</button>
<button style="margin-left:280px">点击向右边滚动、么么哒</button>
<div>
<ul>
<li><img src="./1.jpg"></li>
<li><img src="./2.jpg"></li>
<li><img src="./3.jpg"></li>
<li><img src="./4.jpg"></li>
</ul>
</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>分享按钮</title>
<meta charset=" utf-8">
<style type="text/css">
div{width:150px;height:200px;position:absolute;background:yellow;left:-150px;}
span{width:20px;height:60px;line-height:20px;position:absolute;right:-20px;
top:70px;background:pink;}
</style>
<script type="text/javascript">
var timer = null;var Speed = 0;var Target = 0;//定时器、速度、目标
window.onload = function()
{
var oDiv = document.getElementsByTagName('div')[0];
function move(target,speed)
{
clearInterval(timer);
timer = setInterval(function(){
if(oDiv.offsetLeft == target)
clearInterval(timer);
else
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
},30);
}
oDiv.onmouseover = function ()
{
move(0,5);
// clearInterval(timer);
// timer = setInterval(function(){
// if(oDiv.offsetLeft == 0)
// clearInterval(timer);
// else
// oDiv.style.left = oDiv.offsetLeft + 5 + 'px';
// },30);
}
oDiv.onmouseout = function ()
{
move(-150,-5);
// clearInterval(timer);
// timer = setInterval(function(){
// if(oDiv.offsetLeft == -150)
// clearInterval(timer);
// else
// oDiv.style.left = oDiv.offsetLeft - 5 + 'px';
// },30);
}
}
</script>
</head>
<body>
<div>
<span>分享到</span>
</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>淡入淡出</title>
<meta charset="utf-8">
<style type="text/css">
div{filter:alpha(opacity:10);opacity:0.1;width:300px;height:300px;background:red;}
</style>
<script type="text/javascript">
var timer = null;
var alpha = 10;
window.onload = function()
{
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function()
{
move(100);
}
oDiv.onmouseout = function()
{
move(10);
}
function move(target)
{
clearInterval(timer);
timer = setInterval(function(){
if(alpha < target)
speed = 4;
else
speed = -4;
if(alpha == target)
clearInterval(timer);
else
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
},30);
}
}
</script>
</head>
<body>
<div>
<!-- <img src="./1.jpg"> -->
</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>缓冲运动</title>
<meta charset="utf-8">
<style type="text/css">
div{width:300px;height:300px;background:red;position:absolute;left:0px;}
p{width:1px;height:500px;background:black;position:absolute;left:600px;}
</style>
<script type="text/javascript">
window.onload = function()
{
var timer = null;
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onclick = function()
{
clearInterval(timer);
timer = setInterval(move,30);
}
function move()
{
// 速度和距离成正比
var speed = (600 - oDiv.offsetLeft) / 50;
// 对速度进行取整，不然无法到达目的距离
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
document.title = oDiv.offsetLeft+','+speed;
}
}
</script>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>第一个孩子节点</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
var oUl =document.getElementsByTagName('ul')[0];
// 记得把如果调换顺序 然后调试
if(oUl.firstElementChild)
oUl.firstElementChild.style.background = 'red';
else
oUl.firstChild.style.background = 'red';
}
</script>
</head>
<body>
<ul>
<li>从前有座山</li>
<li>山上有座庙</li>
<li>庙里有个老和尚</li>
<li>老和尚对着小和尚说 </li>
<li>我们这里有座山</li>
<li>里面有个老和尚</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>运动停止边界问题</title>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;padding:0;}
div{width:300px;height:300px;background:red;position:absolute;left:0px;}
p{width:1px;height:500px;background:black;position:absolute;left:600px;}
</style>
<script type="text/javascript">
window.onload = function()
{
var timer = null;
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onclick = function()
{
clearInterval(timer);
timer = setInterval(move,30);
}
function move()
{
if(oDiv.offsetLeft < 600)
speed = 7;
else if(oDiv.offsetLeft > 600)
speed = -7;
else
speed = 0;
// 匀速运动解决不能到达终点问题，
// 因为距离有可能不是速度的整数倍，
// 所以在快到的时候，就关闭定时器，然后直接把物体放在终点
// 缓冲运动不用考虑这个问题是因为对速度进行取整，可以慢慢往前面蹭
if(Math.abs(600 - oDiv.offsetLeft) < 7)
{
clearInterval(timer);
oDiv.style.left = 600 + 'px';
}
else
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}
</script>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>对联效果</title>
<meta charset="utf-8">
<style type="text/css">
body{height:5000px;}
div{width:100px;height:150px;background:red;position:absolute;right:0px;bottom:0px;}
</style>
<script type="text/javascript">
window.onscroll = function()
{
var oDiv = document.getElementsByTagName('div')[0];
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop + 'px';
}
</script>
</head>
<body>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>多物体运动(卡住现象)</title>
<meta charset="utf-8">
<style type="text/css">
div{width:100px;height:50px;margin:10px 0;background:red;}
</style>
<script type="text/javascript">
var timer = null;
window.onload = function()
{
oDiv = document.getElementsByTagName('div');
for(var i=0; i < oDiv.length; i++)
{
oDiv[i].onmouseover = function()
{
move(this,500);
}
oDiv[i].onmouseout = function()
{
move(this,100);
}
}
}
function move(obj,target)
{
clearInterval(timer);
timer = setInterval(function(){
var speed = (target -obj.offsetWidth) / 5;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if( obj.offsetWidth == target )
clearInterval(timer);
else
obj.style.width = obj.offsetWidth + speed + 'px';
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>多物体运动(解决卡住现象)</title>
<meta charset="utf-8">
<style type="text/css">
div{width:100px;height:50px;margin:10px 0;background:red;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementsByTagName('div');
for(var i=0; i < oDiv.length; i++)
{
//每个物体自己开一个定时器
//JS手动给对象添加属性
oDiv[i].timer = null;
oDiv[i].onmouseover = function()
{
move(this,500);
}
oDiv[i].onmouseout = function()
{
move(this,100);
}
}
}
function move(obj,target)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.offsetWidth) / 5;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if( obj.offsetWidth == target )
clearInterval(obj.timer);
else
obj.style.width = obj.offsetWidth + speed + 'px';
},30);
}
</script>
</head>
<body>
<input type="text"/>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>多物体渐变(属性不能公有)</title>
<meta charset="utf-8">
<style type="text/css">
div{width:200px;height:200px;background:red;filter:alpha(opacity:30);opacity:0.3;float:left;margin:20px;}
</style>
<script type="text/javascript">
window.onload = function()
{
//var timer = null;//这个变量不应该定义在changeColorLight函数里面
//var light = 30;//这个变量不应该定义在changeColorLight函数里面
//初始值应该和样式表保持一致，不然会产生闪的效果
var oDiv = document.getElementsByTagName('div');
for(var i=0; i < oDiv.length; i++)
{
oDiv[i].timer = null;//貌似这个语句可以不用写
oDiv[i].light = 30;//这个不写的话会有问题
oDiv[i].onmouseover = function()
{
changeColorLight(this,100);
}
oDiv[i].onmouseout = function()
{
changeColorLight(this,30);
}
}
function changeColorLight(obj,target)
{
//var timer = null;
//var light = 0;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.light) / 10;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(obj.light == target)
clearInterval(obj.timer);
else
{
obj.light += speed;
obj.style.filter = 'alpha(opacity:'+obj.light+')';
obj.style.opacity = obj.light / 100;
}
},30);
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>offset问题</title>
<meta charset="utf-8">
<style type="text/css">
div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;}
</style>
<script type="text/javascript">
setInterval(function(){
//一开始有考虑到下面这个语句为什么不用写在onload事件中
var oDiv = document.getElementsByTagName('div')[0];
//alert(oDiv.offsetWidth);
//因为width设置后，还要加上边框，所以也就是+2-1
//因此物体不是变窄，而是不断的变宽
oDiv.style.width = oDiv.offsetWidth -1 + 'px';
},30);
</script>
</head>
<body>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>offset问题（修复）</title>
<meta charset="utf-8">
<style type="text/css">
div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;}
</style>
<script type="text/javascript">
function getStyle(obj,name)
{
if( obj.currentStyle )
return obj.currentStyle[name];//obj.currentStyle.width
else
return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width
}
setInterval(function(){
var oDiv = document.getElementsByTagName('div')[0];
//oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
oDiv.style.width = parseInt( getStyle(oDiv,'width') ) - 1 + 'px';
},30);
</script>
</head>
<body>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>多物体运动框架（不能实现渐变）</title>
<meta charset="utf-8">
<style type="text/css">
div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function()
{
startMove(oDiv,'fontSize',50);
}
oDiv.onmouseout = function()
{
startMove(oDiv,'fontSize',12);
}
}
function getStyle(obj,name)
{
if( obj.currentStyle )
return obj.currentStyle[name];//obj.currentStyle.width
else
return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width
}
function startMove(obj,name,target)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = ( target - parseInt( getStyle(obj,name) ) ) / 10;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if( parseInt( getStyle(obj,name) ) == target )
clearInterval( obj.timer );
else
obj.style[name] = parseInt( getStyle(obj,name) ) + speed + 'px';
;
},30);
}
</script>
</head>
<body>
<div>从前有一座山</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>多物体运动框架（实现渐变）</title>
<meta charset="utf-8">
<style type="text/css">
div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;filter:alpha(opacity:30);opacity:0.3;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function()
{
startMove(oDiv,'opacity',100);
}
oDiv.onmouseout = function()
{
startMove(oDiv,'opacity',30);
}
}
function getStyle(obj,name)
{
if( obj.currentStyle )
return obj.currentStyle[name];//obj.currentStyle.width
else
return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width
}
function startMove(obj,name,target)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if( name == 'opacity')
var status = parseFloat(getStyle(obj,name)) * 100;
else
var status = parseInt(getStyle(obj,name));
var speed = (target - status) / 6;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(status == target)
clearInterval(obj.timer);
else
{
if( name == 'opacity')
{
obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
obj.style.opacity = (status+speed) / 100;
}
else
obj.style[name] = status + speed + 'px';
}
},30);
}
</script>
</head>
<body>
<div>从前有一座山</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>浮点数误差</title>
<meta charset="utf-8">
<script type="text/javascript">
alert(0.07*100);
alert(Math.round(0.07*100));//四舍五入
</script>
</head>
<body>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>链式运动</title>
<meta charset="utf-8">
<style type="text/css">
div{width:100px;height:100px;background:red;opacity: 0.3}
</style>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function()
{
startMove(oDiv,'width',800,
function(){startMove(oDiv,'height',600,
function(){startMove(oDiv,'opacity',100)});})
}
oDiv.onmouseout = function()
{
startMove(oDiv,'opacity',30,
function(){startMove(oDiv,'height',100,
function(){startMove(oDiv,'width',100)});})
}
}
</script>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
function getStyle(obj,name)
{
if( obj.currentStyle )
return obj.currentStyle[name];//obj.currentStyle.width
else
return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width
}
function startMove(obj,name,target,fnEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if( name == 'opacity')
var status = parseFloat(getStyle(obj,name)) * 100;
else
var status = parseInt(getStyle(obj,name));
var speed = (target - status) / 6;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(status == target)
{
clearInterval(obj.timer);
if(fnEnd)
fnEnd();
}
else
{
if( name == 'opacity')
{
obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
obj.style.opacity = (status+speed) / 100;
}
else
obj.style[name] = status + speed + 'px';
}
},30);
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>运动框架小问题（不能多个属性同时运动）</title>
<meta charset="utf-8">
<style type="text/css">
div{width:100px;height:100px;background:red;opacity: 0.3}
</style>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function()
{
startMove(oDiv,'width',800);
startMove(oDiv,'height',600);
// 宽高并不是同时改变，仅仅是你改变了高度
}
}
</script>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
function getStyle(obj,name)
{
if( obj.currentStyle )
return obj.currentStyle[name];//obj.currentStyle.width
else
return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width
}
function startMove(obj,name,target,fnEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if( name == 'opacity')
var status = parseFloat(getStyle(obj,name)) * 100;
else
var status = parseInt(getStyle(obj,name));
var speed = (target - status) / 6;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if(status == target)
{
clearInterval(obj.timer);
if(fnEnd)
fnEnd();
}
else
{
if( name == 'opacity')
{
obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
obj.style.opacity = (status+speed) / 100;
}
else
obj.style[name] = status + speed + 'px';
}
},30);
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>解决运动框架小问题（多个属性同时运动）</title>
<meta charset="utf-8">
<style type="text/css">
div{width:100px;height:100px;background:red;opacity: 0.3}
</style>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function()
{
startMove(oDiv,{'width':500,'height':600,'opacity':100});
}
oDiv.onmouseout = function()
{
startMove(oDiv,{'width':100,'height':100,'opacity':30});
}
}
</script>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
function getStyle(obj,name)
{
if( obj.currentStyle )
return obj.currentStyle[name];//obj.currentStyle.width
else
return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width
}
function startMove(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(temp,30);
function temp()
{
var isStop = true;
for(var index in json)
{
if( index == 'opacity')
var status = parseFloat(getStyle(obj,index)) * 100;
else
var status = parseInt(getStyle(obj,index));
if( status != json[index] )
isStop = false;
var speed = (json[index] - status) / 6;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if( index == 'opacity')
{
obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
obj.style.opacity = (status+speed) / 100;
}
else
obj.style[index] = status + speed + 'px';
}
if( isStop )
{
clearInterval(obj.timer);
if(fnEnd)
fnEnd();
}
}
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>留言板案例</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
ul{width:500px;min-height:50px;list-style:none;margin:50px auto;border:1px solid #CCC;overflow:hidden;}
ul li{border-bottom:1px #DDD dashed;padding:5px;overflow:hidden;opacity:0;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oTxt = document.getElementsByTagName('textarea')[0];
var oBtn = document.getElementsByTagName('input')[0];
var oUl = document.getElementsByTagName('ul')[0];
oBtn.onclick = function()
{
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
oTxt.value = '';
if( oUl.children.length > 0 )
oUl.insertBefore(oLi,oUl.children[0]);
else
oUl.appendChild(oLi);
var oHeight = oLi.offsetHeight;
oLi.style.height = 0;
startMove(oLi,{'height':oHeight},function(){
startMove(oLi,{'opacity':100});
}
);
}
}
</script>
</head>
<body>
<textarea></textarea>
<input type="button" value="发布">
<ul></ul>
</body>
<script type="text/javascript">
function getStyle(obj,name)
{
if( obj.currentStyle )
return obj.currentStyle[name];//obj.currentStyle.width
else
return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width
}
function startMove(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(temp ,30);
function temp()
{
var isStop = true;
for(var index in json)
{
if( index == 'opacity')
var status = parseFloat(getStyle(obj,index)) * 100;
else
var status = parseInt(getStyle(obj,index));
if( status != json[index] )
isStop = false;
var speed = (json[index] - status) / 5;
speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
if( index == 'opacity')
{
obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
obj.style.opacity = (status+speed) / 100;
}
else
obj.style[index] = status + speed + 'px';
}
if( isStop )
{
clearInterval(obj.timer);
if(fnEnd)
fnEnd();
}
}
}
</script>
</html>
<!-- *************************************************************************************-->