JavaScript基础（二）

最新推荐文章于 2023-05-09 19:08:55 发布

lxn11140

最新推荐文章于 2023-05-09 19:08:55 发布

阅读量215

点赞数

分类专栏： javaScript 文章标签： innerHTML 类型转换不定参数取非行间样式定时器

本文链接：https://blog.csdn.net/lxn11140/article/details/52186963

版权

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;">JavaScript
一、	innerHTML
innerHTML是在标签里面的HTML。用来设置或获取位于对象起始和结束标签内的HTML。
这个说起来有点不清楚，就直接看例子：下面是一个简便月历
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" type = "css/text" href = "calender.css">
<script>
var aLi = null;
window.onload = function()
{
    var oDiv = document.getElementById("div1");
    aLi = oDiv.getElementsByTagName("li");
    var oDiv2 = document.getElementById("div2");
    var arr = ["一月份","二月份","三月份","四月份","五月份","六月份","七月份",
    		"八月份","九月份","十月份","十一月份","十二月份"];
    
    for(var i = 0;i<aLi.length;i++)
    {
    	aLi[i].index = i;
    	aLi[i].onmouseover = function()
    	{
     		for(var j = 0;j<aLi.length;j++)
     		{
     			if(aLi[j] != this)
     			{
     				aLi[j].className = "a";
     			}
     			else
     			{
     				this.className = "active";
     			}
     		}
    		
    		oDiv2.innerHTML = "<h2>"+(this.index+1)+"月活动</h2>"+"<p>"+arr[this.index]+"</p>";
     	}
    }    
};

</script>
</head>
<body>
	<div id = "div1">
	    <ul>
		 	<li class = "active">1</li>
		 	<li class = "">2</li>
		 	<li class = "">3</li>
		 	<li class = "">4</li>
		 	<li class = "">5</li>
		 	<li class = "">6</li>
		 	<li class = "">7</li>
		 	<li class = "">8</li>
		 	<li class = "">9</li>
		 	<li class = "">10</li>
		 	<li class = "">11</li>
		 	<li class = "">12</li>
 	    </ul>
 	    <div id = "div2"></div>
	</div>	 
</body>
</html>
在这里只有一个div，所以当鼠标移入指定月份时，div会显示对应的文字。文字的设置就是运用innerHTML知识。</span>

<span style="font-size:18px;"><img src="https://img-blog.csdn.net/20160811215144996?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />


 

！！！注意：innerHTML里面真的像HTML一样，像innerHTML设置标题，显示出来也是标题的形式！运行时，观察标签变化：innerHTML设置的属性会出现在标签里，如下图，id = div2的标签里出现了一些innerHTML设置的属性


二、	类型转换（例子与函数不定参数一起）
1、显示转换
String—》int可用 parseInt（a）  parseFloat(a)；
这两个函数可以把字符串的数字提取出来（从左到右）  若无数字，则返回一个NaN 。
NaN： 不是一个数字
说明：12+NaN=NaN    NaN和NaN不等   
判断是否是NaN可用isNaN（a）函数
2、隐式转换
2．1》==和===的区别：
  5==‘5’true    先转换类型，再比较
5===‘5’ false   不转换类型，直接比较
    2．2》直接举例：
var a =‘12’
var b = ‘7’
a-b = 5      数字相减
a+b = 127    字符串连接

三、	数组（例子与函数不定参数一起）
var a = [1,2,3];
var b = new Array[4,5,6];
length :可获取length、可设置length（清空数组 简便方法是使length = 0）
push(a)   pop() 分别是：尾部添加元素、删除元素
unshift(a) shift()  分别是：头部添加元素、删除元素
splice（起点位置，0,'d','d'）  中间添加元素
splice（起点位置，长度>0）  中间删除元素
splice（起点位置，长度>0,'d','d'）  中间插入元素
concat()函数：a.concat(b)123456   
join()函数：a.join('-'):1-2-3
sort()函数：字符串：按a  b  c  d、、、顺序  
数字：当做字符串处理，要使数字真正按照从小到大顺序排列，则：比较函数  arr.sort(function(){return  n1-n2})

四、	函数不定参数
首先要认识arguments，arguments是数组，存放所有参数   
例子： 求和
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
function test()
{
	alert(arguments.length);
	
	var sum = 0;
	for ( var i = 0; i < arguments.length; i++) {
				sum+=arguments[i];
	}
	alert(sum);
	

	/*
	var arr = [1,2,3];
	arr.splice(1,0,3,4);
	alert(arr);
*/
	//alert(arr.length);
	//arr.length = 1;
	//alert(arr);
	/*arr.pop();
	alert(arr);
	arr.push(4);
	alert(arr);
	arr.shift();
	alert(arr);
	arr.unshift(4);
	alert(arr);
	*/
	/*
	alert(a+b-c);
	alert(a+b+c);
	alert(a+b+parseInt(c));
	alert(b==c);
	alert(b===c);
	alert(NaN==NaN);
	*/
}
test(3,5,"5");
</script>
</head>
<body>

</body>
</html>
调用函数时，传入几个参数，arguments的长度就是多大</span>

<span style="font-size:18px;"><img src="https://img-blog.csdn.net/20160811215152530?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
 

五、	取非行间样式问题
取非行间样式currentStyle.属性   getComputedStyle(获取对象,任意值).属性 
if（oDiv.currentStyle.属性）
{
//IE
alert(oDiv.currentStyle.属性);
}
else
{
 //ff、、、
alert( getComputedStyle(获取对象,任意值).属性);
}
但是，取到的都是单一样式
复合样式   background、border、…
单一样式  width、height

六、	定时器
setInterval（动作，时间）：无限执行，每隔指定时间执行一次 
setTimeout（动作，时间）：只执行一次	延迟到指定时间执行
clearInterval（指定定时器）：定时器的关闭

例子一：时钟
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
div{
	width:50px;
	height:30px;
	border:2px solid gray;
	float:left;margin: 5px;
	padding-top:15px;
	font-weight: bold;
	text-align: center}
</style>
<script>
	//设置时间始终是两位数
	function getTimeString(time)
	{
		if(time>9)
		{
			return ""+time;
		}
		else
		{
			return "0"+time;
		}
	}
window.onload = function()
{
	//1、获取div对象
	var aDiv = document.getElementsByTagName("div");
	function time(){
 		//2、获取当前时间字符串
		var date = new Date();
		var string = getTimeString(date.getHours())+
		getTimeString(date.getMinutes())+getTimeString(date.getSeconds());
		//alert(string);
		//3、改变div的文字
		for ( var i = 0; i < aDiv.length; i++) {
			aDiv[i].index = i;
			//alert(aDiv[i].index);
			aDiv[i].innerHTML = string.charAt(i);
		}
	}
	setInterval(time,1000);
	time();
}

</script>
</head>
<body>
	<div>0</div>
	<div>0</div>
	<div>0</div>
	<div>0</div>
	<div>0</div>
	<div>0</div>
</body>
</html>

这个虽是小小的程序，但还是有几个重要的知识。
1、兼容性：取字符串的指定位置元素
str[i]  有些浏览器可能不兼容
chatAt(i):任何浏览器都可
2、获取当前时间字符串
直接相加会使得数字相加，先把数字转化成字符串。且始终是两位数
3、改变文字时运用了innerHTML知识</span>

<span style="font-size:18px;"><img src="https://img-blog.csdn.net/20160811215210874?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />


例子二、无缝滚动
首先要介绍offsetLeft，offsetLeft:获取物体的左边距
原理：1.定时器改变left
2.点击向左向右按钮，改变方向 speed 
3.鼠标移入，图片暂停移动，鼠标移出，图片继续移动
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
*{margin: 0px;padding: 0px}
#div1{width:988px;height:155px;background: red;margin: 100px auto;position:relative;overflow: hidden;}
#div1 ul{position: absolute;left:0px;top:0px}
#div1 ul li{width:247px;height:155px;float:left;list-style: none}
</style>
<script>
window.onload = function()
{
     var oDiv = document.getElementById("div1");
     var oBtn1 = document.getElementById("btn1");
     var oBtn2 = document.getElementById("btn2");
     var oUl = oDiv.getElementsByTagName("ul")[0];
     var aLi = oUl.getElementsByTagName("li");
     
     oUl.innerHTML += oUl.innerHTML; 
     //修改ul宽度
     oUl.style.width = aLi[0].offsetWidth*aLi.length+"px";
     var speed = 0;
     //向左、向右
     oBtn1.onclick = function()
     {
    	 speed = -10;
     }
     oBtn2.onclick = function()
     {
    	 speed = 10;
     }
     
     function move()
	 {
    	 //向左滚动，当图片滚动一半时，迅速设置oUl.style.left = 0
    	 if(oUl.offsetLeft<-oUl.offsetWidth/2){
    		 oUl.style.left = 0;
    	 }
    	 //向右滚动，oUl.offsetLeft>0时，迅速设置oUl.style.left
    	 if(oUl.offsetLeft>0){
    		 oUl.style.left = -oUl.offsetWidth/2+"px"; 
    	 }
	     oUl.style.left = oUl.offsetLeft+speed+"px";
	 }
     //定时器
     var timer = setInterval(move,500);
     //鼠标移入，停止移动
     oDiv.onmouseover = function()
     {
    	 clearInterval(timer);
     }
     //鼠标移入，继续移动
     oDiv.onmouseout = function()
     {
    	 timer = setInterval(move,500);
     }
}
</script>
</head>
<body>
<body>
<input id = "btn1" type = "button" value = "向左"/>
<input  id = "btn2" type = "button" value = "向右"/>
<div id = "div1"> 
   <ul>
   		<li><img src="image/other21.png"/></li>
   		<li><img src="image/other22.png"/></li>
   		<li><img src="image/other23.png"/></li>
   		<li><img src="image/other24.png"/></li>
    </ul>
</div>
</body>
</html></span>

<img src="https://img-blog.csdn.net/20160811215219590?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />