首页 > 代码库 > JS0基础学习笔记(1)

JS0基础学习笔记(1)

      为了须要,最近開始学习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="http://www.mamicode.com/隐藏/显示" 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="http://www.mamicode.com/隐藏/显示"onmouseover="over_bg_color()" onm ouseout="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="http://www.mamicode.com/#" onm ouseover="show_detailed(1)"onmouseout="hide_detailed()"> 首页</a>
			<a href="http://www.mamicode.com/#" onm ouseover="show_detailed(2)"onmouseout="hide_detailed()">家电</a>
			<a href="http://www.mamicode.com/#" onm ouseover="show_detailed(3)"onmouseout="hide_detailed()">手机</a>
			<a href="http://www.mamicode.com/#" onm ouseover="show_detailed(4)"onmouseout="hide_detailed()">付款方式</a>
			<a href="http://www.mamicode.com/#" onm ouseover="show_detailed(5)"onmouseout="hide_detailed()">客服</a>
		</div>
		<div id="detailed">
			<a href="http://www.mamicode.com/#">一</a>
			<a href="http://www.mamicode.com/#">二</a>
			<a href="http://www.mamicode.com/#">三</a>
			<a href="http://www.mamicode.com/#">四</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="http://www.mamicode.com/变黄" onclick="change_color(‘yellow‘)">
		<input type="button" value="http://www.mamicode.com/变绿" onclick="change_color(‘green‘)">
		<input type="button" value="http://www.mamicode.com/变红" onclick="change_color(‘red‘)">
		<input type="button" value="http://www.mamicode.com/变大" onclick="change_size(500,600)">
		<input type="button" value="http://www.mamicode.com/变小" 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="http://www.mamicode.com/按钮" 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="http://www.mamicode.com/全选"></input>
		<input type="button" id="btn_reversed" value="http://www.mamicode.com/反选"></input>
		<input type="button" id="btn_no" value="http://www.mamicode.com/都不选"></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="http://www.mamicode.com/新闻1"></input>
				<input type="button" value="http://www.mamicode.com/新闻2"></input>
				<input type="button" value="http://www.mamicode.com/新闻3"></input>
				<input type="button" value="http://www.mamicode.com/新闻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="http://www.mamicode.com/设置文字"></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="http://www.mamicode.com/点击我一下下~" id="btn"></input>
    </body>
    <script type="text/javascript">
        var value = http://www.mamicode.com/‘background‘;"utf-8">
    </head>
    <body>
        <div id="J_box" style="width: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="http://www.mamicode.com/开启"></input>
        <input id="guan" type="button" value="http://www.mamicode.com/关闭"></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="http://www.mamicode.com/images/0.png"><img src="http://www.mamicode.com/images/0.png">
                <span>:</span>
            <img src="http://www.mamicode.com/images/0.png"><img src="http://www.mamicode.com/images/0.png">
                <span>:</span>
            <img src="http://www.mamicode.com/images/0.png"><img src="http://www.mamicode.com/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 = http://www.mamicode.com/‘./images/‘+howTime[i]+‘.png‘;"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());//周日是0
    </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="http://www.mamicode.com/#">隐藏</a>
            </li>
            <li>山上有座庙
                <a href="http://www.mamicode.com/#">隐藏</a>
            </li>
            <li>庙里有个老和尚
                <a href="http://www.mamicode.com/#">隐藏</a>
            </li>
            <li>老和尚对着小和尚说
                <a href="http://www.mamicode.com/#">隐藏</a>
            </li>
            <li>我们这里有座山
                <a href="http://www.mamicode.com/#">隐藏</a>
            </li>
            <li>里面有个老和尚
                <a href="http://www.mamicode.com/#">隐藏</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="http://www.mamicode.com/#">我非常帅</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="http://www.mamicode.com/创建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="http://www.mamicode.com/#">删除</a></li>
            <li>222<a href="http://www.mamicode.com/#">删除</a></li>
            <li>333<a href="http://www.mamicode.com/#">删除</a></li>
            <li>444<a href="http://www.mamicode.com/#">删除</a></li>
            <li>555<a href="http://www.mamicode.com/#">删除</a></li>
            <li>666<a href="http://www.mamicode.com/#">删除</a></li>
            <li>777<a href="http://www.mamicode.com/#">删除</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="http://www.mamicode.com/加入"></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="http://www.mamicode.com/#">删除</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="http://www.mamicode.com/#">删除</a></td>
                </tr>
                <tr>
                    <td>2</td><td>李白</td><td>96</td><td><a href="http://www.mamicode.com/#">删除</a></td>
                </tr>
                <tr>
                    <td>3</td><td>小明</td><td>17</td><td><a href="http://www.mamicode.com/#">删除</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 =http://www.mamicode.com/= oTab.tBodies[0].rows[i].cells[1].innerHTML)"padding-left:400px;padding-top:100px;">
        姓名:<input type="text"></input>
        <input type="button" value="http://www.mamicode.com/搜索"></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="http://www.mamicode.com/移动"></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="http://www.mamicode.com/排序"></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="http://www.mamicode.com/排序"></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="http://www.mamicode.com/动起来~"></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="http://www.mamicode.com/1.jpg"></li>                 <li><img src="http://www.mamicode.com/2.jpg"></li>                 <li><img src="http://www.mamicode.com/3.jpg"></li>                 <li><img src="http://www.mamicode.com/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="http://www.mamicode.com/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 = http://www.mamicode.com/‘‘;"button" value="http://www.mamicode.com/公布">         <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> <!-- *************************************************************************************-->


   

JS0基础学习笔记(1)