JavaScript学习（二）
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>变量的类型</title> <script type="text/javascript"> var a = 2; var b = '12px'; // typeof 返回变量类型 alert(typeof a); // parseInt() 函数是从左到右的扫描变量的值， // 遇到不是number就返回 // 所以不论b='12px'，还是b='12df333' // 返回的都是12 alert(parseInt(b)); </script> </head> <body> </body> </html>
深入javascript：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
// 多个参数传递的话，函数括号可以不用写变量
// 参数传递到了arguments数组中
// 直接使用arguments即可
// 也可以传参，指定参数的个数
// 有参数的话，arguments里面还是有值
function duocanshu () {
alert(arguments.length);
}
duocanshu(1, 2, 3, 4, 5, 6, 7, 8, 9);
// 直接用style操作的是行间的样式，无法获取到style标签之间的样式和外部样式
// 要想操作非行间样式，就要用currentStyle
// 不过currentStyle兼容性不好 IE支持 chrome和火狐不支持
// 除IE之外的话用getComputedStyle
// getComputedStyle()中的第二个参数是垃圾参数，个人喜欢用null
// getComputedStyle()在IE低版本不能用
// 有一点要注意
// getComputedStyle无法取到复合样式
// 复合样式：
// background（组成background的元素很多，如颜色，背景图片等等）
// 如果就想取背景颜色，就用backgroundColor
// border
// 等等
// getComputedStyle只能去单一的样式
// 单一样式：
// width
// height
// 等等
window.onload = function() {
var oDiv = document.getElementById('div1');
alert(getComputedStyle(oDiv, null).width);
}
// 数组基础
// 数组的length不仅可以获取，也可以设置
// 例子：快速清空数组就可以让array.length = 0即可
var arry = [1, 2, 3, 4, 5, 6, 7];
alert('arry中的元素有 ' + arry.length + ' 个');
arry.length = 3;
alert('设置了length后，array中的元素有 ' + arry.length + ' 个');
// 数组有pop()、push()、shift()、unshift()函数；
// pop()删除数组尾部数据
// push()在数组尾部增加数据
// shift()删除数组头部数据
// unshift()在数组头部增加数据
var array2 = [1, 2, 3, 4, 5];
array2.pop();
alert(array2);
array2.push(3);
alert(array2);
array2.shift();
alert(array2);
array2.unshift(45);
alert(array2);
// splice()函数
var array3 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 删除：splice(起点，长度)
// 如下，删除从第二个位置起，之后的三个元素
array3.splice(2, 3);
alert(array3);
// splice()做了三个工作，找到第二个位置，删除0个元素，从第二个位置插入abc
array3 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
array3.splice(2, 0, 'a', 'b', 'c');
alert(array3);
// 数组连接concat()函数
var a = [1, 3, 4];
var b = [4, 5, 6];
// 注意这两种写法的不同，结果也不同
alert(a.concat(b));
alert(b.concat(a));
//数组之间的连接符join()
var arr = [1, 2, 3, 4, 5];
// 注意一下两种写法的结果是不同的
alert(arr.join('-'));
alert(arr);
// 数组的排序函数sort()
// sort()函数只认字符串的排序
// 如果想排序数字请看下面
var arr4 = ['fds', 'ew', 'yds'];
alert(arr4.sort());
var array4 = [10, 1, 3, 53, 8];
// 这种写法相当于下面的写法
array4.sort(function(n1, n2) {
return n1 - n2;
})
array4.sort(function(n1, n2) {
if (n1 < n2) {
return -1;
} else if (n1 > n2) {
return 1;
} else {
return 0;
};
})
alert(array4);
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
JavaScript定时器的使用（一）：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
// function show() {
// alert('a');
// }
// setInterval第一个参数是一个函数，第二个参数是毫秒数
// 作用就是隔一定的时间执行一次函数
// setInterval(show, 1000);
// setTimeout()定时器是延时性定时器，就是延时指定的时间执行，
// 只会执行一次
// setTimeout(show, 1000);
// 打开定时器：
// setInterval
// setTimeout
// 关闭计时器
// clearInterval
// clearTimeout
window.onload = function() {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var timer = null;
var num = 1;
oBtn1.onclick = function() {
// setInterval有返回值
timer = setInterval(function() {
alert(num);
num++;
}, 1000);
}
oBtn2.onclick = function() {
// 关闭计时器
clearInterval(timer);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开启" />
<input id="btn2" type="button" value="关闭" />
</body>
</html>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>超酷时钟</title>
<style type="text/css">
body{
text-align: center;
background:#003;
font-size: 50px;
color: white;
}
#div1 {
padding-top: 100px;
}
#div2 {
padding-top: 30px;
}
#div3 {
padding-top: 30px;
}
</style>
<script type="text/javascript">
function toDou(n) {
if (n < 10) {
return '0' + n;
} else {
return '' + n;
};
}
function tick() {
var oDay = ['seven', 'one', 'two', 'three', 'four', 'five', 'six'];
var oDiv1 = document.getElementById('div3');
var oDiv2 = document.getElementById('div2');
var aImg = oDiv1.getElementsByTagName('img');
var aImg2 = oDiv2.getElementsByTagName('img');
var oDate = new Date();
// 注意
// getMonth()获取的范围是（0 - 11，0代表的是1月）
// getDate()获取的是当日
// getDay()获取的是星期
var strDay = toDou(oDate.getFullYear()) + toDou(oDate.getMonth() + 1) + toDou(oDate.getDate());
var j = 0;
for (var i = 0; i < aImg2.length; i++) {
if (i == 4 || i == 7 || i == 10) {
continue;
};
aImg2[i].src = './images/' + strDay.charAt(j) + '.png';
j++;
};
var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds());
for (var i = 0; i < aImg.length; i++) {
if (i > 5) {
aImg[i + 1].src = './images/' + oDay[oDate.getDay()] + '.png';
break;
} else {
// 这种写法低版本的浏览器不支持
// aImg[i].src = "./images/" + str[i] + ".png";
// 建议这种写法，没有浏览器兼容问题
aImg[i].src = "./images/" + str.charAt(i) + ".png";
};
};
}
window.onload = function() {
// setInterval的特点是打开之后不会马上就执行，会先等待自定义时间后才执行，
// 解决办法就是将函数直接在onload中写一遍，上来就执行一次；
setInterval(tick, 1000);
tick();
}
</script>
</head>
<body>
<div id="div1">
<img src="./images/title.png" />
</div>
<div id="div2">
<img src="./images/0.png" />
<img src="./images/0.png" />
<img src="./images/0.png" />
<img src="./images/0.png" />
<img src="./images/year.png" />
<img src="./images/0.png" />
<img src="./images/0.png" />
<img src="./images/month.png" />
<img src="./images/0.png" />
<img src="./images/0.png" />
<img src="./images/seven.png" />
</div>
<div id="div3">
<img src="./images/0.png" />
<img src="./images/0.png" />
:
<img src="./images/0.png" />
<img src="./images/0.png" />
:
<img src="./images/0.png" />
<img src="./images/0.png" />
<img src="./images/week.png" />
<img src="./images/one.png">
</div>
</body>
</html>
JavaScript定时器的使用（二）：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>定时器的使用</title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 200px;
top: 150px;
/*不加margin的话，offsetLeft输出的就是200px*/
/*如果再加一个margin: 50px，看看offsetLeft的效果*/
/*可以看到offsetLeft输出的值是250px*/
/*offsetLeft会综合考虑所有影响物体位置因素之后得出的最后结论*/
/*
相对于offsetLeft还有offsetTop（获取物体的上边距）
offsetWidth / offsetHeight（获取宽和高）
*/
margin: 50px;
}
</style>
<script type="text/javascript">
setInterval(function(){
var oDiv = document.getElementById('div1');
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}, 500);
</script>
</head>
<body>
<!-- offsetLeft获取物体的左边距 -->
<div id="div1" onclick="alert(this.offsetLeft);">
</div>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
<style type="text/css">
*{margin: 0; padding: 0}
/*overflow: hidden; 超出div的部分设置为隐藏*/
#div1 {width: 712px; height: 108px; margin: 100px auto; position: relative; overflow: hidden;}
#div1 ul {position: absolute; left: 0; top: 0;}
/*float: left; 左浮动，去掉的话，图片就会竖着排列*/
#div1 ul li {float: left; width: 178px; height: 108px; list-style: none;}
</style>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var speed = 2;
// 这里的innerHTML就是li
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
// 不加下面这一句的话，图片会显示成两行，
// 因为ul的宽度不够
// 通过这条语句来计算ul的宽度
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
// 左滚动
// setInterval(function() {
// // 这里的if语句是当第一批次的四张图片到达末端的时候
// // 将所有的图片拉回来，用户看到的就是无缝滚动的图片了
// if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
// oUl.style.left = '0';
// };
// oUl.style.left = oUl.offsetLeft - 2 + 'px';
// }, 30);
// 右滚动
function right() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
};
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
};
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
var timer = setInterval(right, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
}
oDiv.onmouseout = function() {
// 如果不加timer的话，随着鼠标移入移出不断加快，
// 滚动速度也越来越快
// setInterval()没有重新开启这一说
timer = setInterval(right, 30);
}
document.getElementsByTagName('input')[0].onclick = function() {
speed = -2;
}
document.getElementsByTagName('input')[1].onclick = function() {
speed = 2;
}
}
</script>
</head>
<body>
<input type="button" value="向左" />
<input type="button" value="向右" />
<div id="div1">
<ul>
<li><img src="./imgs/1.jpg" /></li>
<li><img src="./imgs/2.jpg" /></li>
<li><img src="./imgs/3.jpg" /></li>
<li><img src="./imgs/4.jpg" /></li>
</ul>
</div>
</body>
</html>