## 第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>
~~~
