## 第4天 ##
### 1.定時器的注意問題.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:80px; height:80px; background:pink; border-radius:40px; position:absolute;}
#line{width:100%; height:1px; background:red; position:absolute; top:450px;}
</style>
</head>
<body>
<button onclick="start()" >開始</button>
<button onclick="stop()" >停止</button>
<div id="box" style="top:30px; left:0px " ></div>
<div id="line"></div>
</body>
<script>
//找對象
var box = document.getElementById('box');
var timmer;
function start()
{
var speed = 0;
// alert(timmer);
if (!timmer) {
timmer = setInterval(function(){
speed += 5;
var tmp = parseInt(box.style.top) + speed;
if (tmp >= 370) {
speed *= -1;
tmp = 370;
}
box.style.top = tmp + 'px';
box.style.left = parseInt(box.style.left) + 5 + 'px';
},50);
console.log(timmer);
console.log(typeof timmer);
}
}
function stop()
{
clearInterval(timmer);
console.log(timmer);
console.log(typeof timmer);
timmer = undefined;
}
</script>
</html>
~~~
### 2.復習.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
函數定義細節
1.函數可以重復定義
2.函數的形參可以不接受實參，默認值是undefined
3.函數的形參不能給默認值（除了火狐）
4.如果要設置默認值，可以通過判斷形參是否是undefined
5.函數如果沒有返回值，那么默認值undefined
*/
// function test()
// {
// }
// var res = test();
// alert(res);
/*
變量的作用域
1.在函數內使用var定義的變量是局部變量（閉包函數外）
2.可以向上訪問
3.不能向下訪問
4.定義好的局部變量，相當于在函數的第一行就聲明了這個變量（提前聲明機制【只定義，不賦值】）
*/
function test()
{
//變量在整個函數內都是有效的
//定義好的局部變量，相當于在函數的第一行就聲明了這個變量（提前聲明機制【只定義，不賦值】）
var num;
alert(num);
var num = 20;
alert(num);
}
// test();
/*
閉包函數
返回函數的函數
*/
function die()
{
var num = 10;
function son()
{
alert(num);
}
return son;
}
// var son = die();
// son();
//自調函數
var func = function(){alert(1)};
//寫兩個自調函數的時候，需要使用命令執行符;
// (function(){
// alert('I');
// })();
// func();
// (function(){
// alert('I');
// })();
//包裝對象
var str = 'hello';
var str1 = new String('world');
// str.substr();
//包裝對象 臨時對象 特點：隨用隨消
str.name = 'jack';
// alert(str.name);
//真正的對象
str1.age = 18;
// alert(str1.age);
// alert(typeof str);
// alert(typeof str1);
//對象的原型 模擬繼承
function Person(name)
{
this.name = name;
}
var obj = {age:18,eat:function(){alert(1)}}
Person.prototype = obj;
var p = new Person('lunge');
alert(p.name);
alert(p.age);
p.eat();
</script>
</html>
~~~
### 3.獲取計算后的樣式.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:100px;
height:100px;
background:pink;
position:absolute;
left:300px;
}
</style>
</head>
<body>
<div id="box" class=""></div>
</body>
<script>
var box = document.getElementById('box');
//無法直接獲取style樣式
// alert(box.style.width);
//獲取box計算后的樣式
// var css = document.defaultView.getComputedStyle(box)
// alert(css.width);
var css = box.currentStyle;
// alert(css.width);
//判斷什么瀏覽器
//基本語法 BOM DOM
</script>
</html>
~~~
### 4.windon.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{width:10000px; height:10000px;}
</style>
</head>
<body>
</body>
<script>
/*
BOM
瀏覽器對象模式
在網頁上聲明的變量、對象等等的父級都是window
在全局聲明的所有變量，對象，函數，都是window的屬性和方法
*/
// window.alert(1);
//window對象屬性
var res = window.closed;
// alert(res);
// alert(window.length);
// alert(window.name);
// alert(this)
var num = 10;
// alert(self.num);
// alert(top.num);
// alert(this.num);
// alert(window.num);
// alert(window.screenLeft);
// alert(window.screenTop);
//獲取瀏覽器距離屏幕的坐標值 解決兼容性
// alert(window.screenX || window.screenLeft);
// alert(window.screenY || window.screenTop);
//window對象的方法
// alert();
// confirm();
// focus();
// for (i=0; i<10; i++) {
// // window.open('http://www.baidu.com','','width=300px,height=300px');
// }
// var newObj = window.open('http://www.baidu.com','','width=300px,height=300px');
// newObj.document.write("This is 'myWindow'")
// newObj.focus()
// window.print();
//IE 移動瀏覽器
// window.moveBy('10','10');
// IE 把瀏覽器移到固定位置 作用從窗口頂部開始
// window.moveTo('50','100');
//把瀏覽器放大
// window.resizeBy('10','10');
// 調整Ie大小
// window.resizeTo('400','400');
//滾動條
//每刷新一次，移動100像素
// window.scrollBy('100','100');
// 把滾動條回到固定的位置
// window.scrollTo('100','100');
</script>
</html>
~~~
### 5.Navigator.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
// alert(navigator.userAgent);
var str = navigator.userAgent;
//Mozilla/5.0 (Windows NT 5.1; rv:47.0) Gecko/20100101 Firefox/47.0
// if (str.indexOf('MSIE') == -1) {
// alert('標準瀏覽器');
// } else {
// alert('坑媽的IE');
// }
if (document.all) {
alert('坑媽的IE');
} else {
alert('標準瀏覽器');
}
</script>
</html>
~~~
### 6.history和screen.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
//獲取屏幕的高度，除了任務欄
// alert(screen.availHeight);
//獲取屏幕的寬度
// alert(screen.availWidth);
//獲取屏幕的分辨率
// alert(screen.width);
// alert(screen.height);
// alert(history.length);
// 回到前一個URL
// history.back();
// window.open('1.html');
//去后一個URL
// history.forward();
history.go(1);
</script>
</html>
~~~
### 7.Location.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test();">重新加載</button>
</body>
<script>
//Location
// location.href = '1.html';
// location.href = 'http://www.baidu.com';
function test()
{
location.reload();
}
alert(1);
</script>
</html>
~~~
### 8.鐘擺加摩擦.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:100px; height:100px; border-radius:50%; background:pink; position:absolute;}
#line{width:1px; height:500px;background:red; position:absolute; left:400px;}
</style>
</head>
<body>
<!-- 優先級 -->
<div id="box" style="left:0px"></div>
<div id="line"></div>
</body>
<script>
//1.找對象
var box = document.getElementById('box');
//這里只能獲取到寫在標簽內的屬性
//alert(box.style.left);
var num = 40;
setInterval(function(){
num += (400-parseInt(box.style.left))/10;
num = Math.ceil(num);
num *= 0.9;
document.title = num;
box.style.left = parseInt(box.style.left) + num + 'px';
},100);
</script>
</html>
~~~
### 9.彈幕.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:400px; background:pink; position:absolute;}
</style>
</head>
<body>
<!-- 優先級 -->
<button onclick="start();">開始</button>
<div id="box" style="left:0px;height:20px"></div>
</body>
<script>
//1.找對象
var box = document.getElementById('box');
//這里只能獲取到寫在標簽內的屬性
//alert(box.style.left);
function start()
{
var num = 40;
setInterval(function(){
num += (350-parseInt(box.style.height))/10;
num = Math.ceil(num);
num *= 0.85;
document.title = num;
box.style.height = parseInt(box.style.height) + num + 'px';
},100);
}
</script>
</html>
~~~
### 10.蛇形文字.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{position:absolute; top:-100px;}
</style>
</head>
<body>
</body>
<script>
var str = '左三圈，右三圈，脖子扭扭，屁股扭扭';
//循環輸出str的值
for (i=0; i<str.length; i++) {
document.write('<span id="snake'+ i + '" >');
document.write(str[i]);
document.write('</span>');
}
//寫一個函數處理字符串
function move(x,y,i)
{
var span = document.getElementById('snake' + i);
span.style.left = x + 20*i + 20 + 'px';
span.style.top = y + 'px';
}
// move(100,100,6);
window.onmousemove = function(e)
{
document.title = 'X:' + e.clientX + 'Y:' +e.clientY;
/*
//循環輸出所有文字
for (i=0; i<str.length; i++) {
}*/
var i = 0;
timmer = setInterval(function(){
if (i >= str.length-1) clearInterval(timmer);
move(e.clientX,e.clientY,i);
i++;
},50);
}
</script>
</html>
~~~
