Topic 1 ：BOM
DOM ： 文档对象模型
BOM ： 浏览器对象模型
浏览器中的顶级对象是window；我们在写的时候一般会把window给省略；
我们定义的属性和方法都是window的子对象；
需要注意的就是window中的name和top两个属性，我们在代码中要是定义了相同名字的属性name很可能会是string类型（因为window中有这个属性）；
onunload（关闭浏览器的时候执行这个函数）这个现在一般都用不了了 会被浏览器阻止；与onload相对应；
我们一般在onunload执行清理的工作；
我们引入外部的js放到第二个body之前是最合适的位置；
Topic 2 ：定时器
one ：setTimeout
<body>
<input type="button" id="btn" value="取消">
<script>
// 这个定时器事件到了就会执行里面的function
// 第二个参数是毫秒
// 这个函数还有一个返回值 我们如果要取消他的话就要知道这个返回值
var timeID = setTimeout (function () {
location.href = 'http://www.baidu.com';
},3000);
var btn = document.getElementById('btn');
btn.onclick = function () {
clearTimeout(timeID);
}
</script>
</body>two : setInterval
<input type="button" id="btn" value="取消">
<script>
// 这个定时器事件到了就会执行里面的function
// 第二个参数是毫秒
// 这个函数还有一个返回值 我们如果要取消他的话就要知道这个返回值
// 这个函数与setTimeout的不同点就是 这个是每隔一段时间就执行一次 （间隔 interval）
// 而setTimeout只执行一次
var timeID = setInterval (function () {
var date = new Date();
console.log(date);
},3000);
var btn = document.getElementById('btn');
btn.onclick = function () {
clearInterval(timeID);
}
</script>Topic 3 ：倒计时在案例
显示我们此时到光棍节的时间间隔
我的倒计时采用每秒创建一个当前时间的日期对象，让这个时间与光棍节的日期作比较；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时案例</title>
<style type="text/css">
.time-item {
width: 500px;
height: 45px;
margin: 0 auto;
}
.time-item strong {
background: orange;
color: #fff;
line-height: 49px;
font-size: 36px;
font-family: Arial;
padding: 0 10px;
margin-right: 10px;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.time-item > span {
float: left;
line-height: 49px;
color: orange;
font-size: 32px;
margin: 0 10px;
font-family: Arial, Helvetica, sans-serif;
}
.title {
width: 260px;
height: 50px;
margin:200px auto 50px auto;
}
</style>
</head>
<body>
<h1 class="title">距离光棍节，还有</h1>
<div class="time-item">
<strong><span id="day">00</span>天</strong>
<strong><span id="hour">00</span>时</strong>
<strong><span id="minute">00</span>分</strong>
<strong><span id="second">00</span>秒</strong>
</div>
<script>
// 我们先写一个计算时间的函数 让这个函数返回 天时分秒
function getTime (start,end) {
var time = (end - start)/1000;
// 像下取整
var day = Math.floor(time/60/60/24);
var hour = Math.floor(time/60/60%24);
var minute = Math.floor(time/60%60);
var second = Math.floor(time%60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}
//获得span标签
var day1 = document.getElementById('day');
var hour1 = document.getElementById('hour');
var minute1 = document.getElementById('minute');
var second1 = document.getElementById('second');
var end = new Date('2018-11-11 00:00:00');
function count () {
var start = new Date();
var obj = getTime(start,end);
//在这里我们判断他的位数 当他不够两位的时候补一位0
obj.day = obj.day < 10 ? '0' + obj.day : obj.day;
obj.hour = obj.hour < 10 ? '0' + obj.hour : obj.hour;
obj.minute = obj.minute < 10 ? '0' + obj.minute : obj.minute;
obj.second = obj.second < 10 ? '0' + obj.second : obj.second;
day1.innerText = obj.day;
hour1.innerText = obj.hour;
minute1.innerText = obj.minute;
second1.innerText = obj.second;
}
// 我们在这里如果不写这个函数的话那么他就会显示一秒00-00-00
count();
//我们每隔一秒就改变一下数字
// 注意这个地方的count不能加括号 就跟我们的点击事件那样
setInterval (count,1000);
</script>
</body>
</html>
<body>
请仔细阅读协议10s<br>
......<br>
<input type="button" id="btn" value="同意（请仔细阅读协议10s）" disabled="disabled">
<script>
var btn = document.getElementById('btn');
var count = 10;
var timeOff = setInterval( function () {
count--;
if (count > 0) {
btn.value = '同意（请仔细阅读协议' + count + 's）';
} else {
btn.value = '同意';
btn.disabled = false;
clearInterval(timeOff);
}
},1000);
</script>
</body><body>
<input type="button" value="开始移动" id="btn">
<div id="box">
</div>
<script>
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function () {
var current = box.offsetLeft;
var timeOff = setInterval (function () {
current += 5;
//这个地方要特别注意 只要设置属性就想他的单位别忘了
box.style.left = current + 'px';
if (current >= 500) {
box.style.left = '500px';
clearInterval(timeOff);
return;
}
},50);
}
</script>
</body>
URL的组成：
http的默认端口是： 80；
Topic4 ：Location的用法
<body>
<input type="button" id="btn" value="点击">
<script>
// location 是BOM中的方法
// location 属性 href search hash
// location 方法 assign reload replace
var btn = document.getElementById('btn');
btn.onclick = function () {
// 有一个参数
// false 可能从缓存读取 f5
// true 强制从服务器获取页面 ctrl + f5
// location.reload(true);
// 跳转 会记录历史
// location.assign('http://www.baidu.com');
// 替换地址栏中的地址， 不会记录历史
location.replace('http://www.baidu.com');
}
</script>
</body>Topic 5：history的用法
<body>
<a href="17-history2.html">history2</a>
<button id="btn">前进</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
// 前进
// history.forward();
history.go(1);
}
</script>
</body><body>
<a href="16-history1.html">history1</a>
<button id="btn">后退</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
// history.back(); // 后退
history.go(-1);
}
</script>
</body>进程与线程：
进程： 就是一个公司
线程： 就是公司的员工
执行JavaScript的是一个主线程执行的
事件与定时器里的函数执行的比较晚，先执行主线程上的代码，但是setTimeout（setInterval同理）是主线程执行的，但是里面的function（）会放到任务队列里以后执行；
Topic 6 : 登录页面的编写
说明 ： 这个主要技术是 布局能力 和实现注册框的可拖拽性
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style type="text/css">
ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
padding: 0px;
margin: 0px;
}
.header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
a {
text-decoration: none;
color: black;
}
.login {
/* 注意这个login的设置要想要这个盒子真正的居中 要加margin-left*/
width: 512px;
height: 280px;
position: absolute;
border: #ebebeb solid 1px;
left: 50%;
right: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
z-index: 9999;
margin-left: -256px;
margin-top: 140px;
display: none;
/* 不让文字被选中 */
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.login_hd {
width: 100%;
/* 我们这里要是写height：40px；就不行 字体不会居中*/
line-height: 40px;
text-align: center;
color: black;
font-size: 18px;
font-weight: 500;
}
.login_input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login_input {
margin-top: 20px;
}
.login_input input.list-input {
height: 35px;
line-height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-button a {
margin-top: 20px;
width: 100%;
text-align: center;
line-height: 35px;
display: block;
font-weight: 500;
}
.login_bg {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: #000000;
/* filter: alpha(opacity=30);*/
/* opacity: 0.3; 这个就是调整透明度的*/
opacity: 0.3;
display: none;
}
</style>
</head>
<body>
<div class="header">
<a href="javascript:void(0);" id="link">点击这里弹出登录框</a>
</div>
<div class="login" id="login">
<div class="login_hd" id="login_hd">
登录会员
</div>
<div class="login_bd" id="login_bd">
<div class="login_input">
<!-- label标签就是一个加字说明的标签-->
<label>用户名:</label>
<!-- placeholder的作用就是在文本框里面显示出他的值-->
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login_input">
<label>登录密码:</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录</a></div>
</div>
<!-- 遮盖层 -->
<div class="login_bg" id="login_bg">
</div>
<script src="../js/common.js"></script>
<script>
// 获得盒子
var login = document.getElementById('login');
// 给header中的a标签link注册点击事件
var link = document.getElementById('link');
link.onclick = function () {
// 让背景和login盒子显示出来
var login_bg = document.getElementById('login_bg');
// 看见属性的设置要加单位 是字符串类型
login_bg.style.display = 'block';
login.style.display = 'block';
// 给login_hd注册鼠标按下事件
var login_hd = document.getElementById('login_hd');
login_hd.onmousedown = function (e) {
e = e || event;
// 获得鼠标在盒子中的位置 = 鼠标在页面位置 - 盒子位置
var mouseX = getPage(e).pageX - login.offsetLeft;
var mouseY = getPage(e).pageY - login.offsetTop;
// 再给文档注册鼠标移动事件
document.onmousemove = function (e) {
// 计算出盒子在鼠标移动后的位置 = 鼠标的位置减去鼠标在盒子的位置
var loginX = getPage(e).pageX - mouseX;
var loginY = getPage(e).pageY - mouseY;
// 这里因为login这个盒子为了让盒子的50%居中加了
// margin-left: -256px;
// margin-top: 140px;
// 所以我们要改变一下 loginX 和loginY
loginX += 256;
loginY -= 140;
// 设置盒子的位置即可
login.style.left = loginX + 'px';
login.style.top = loginY + 'px';
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
</body>
</html>
新知识点的说明：
注意这个login对话框 ：
1. 要想要这个盒子使用left：50%；right：50%；实现真正的左右居中 要加margin-left：-256px；
数值为负的盒子的width的一半
width: 512px;
height: 280px;
left: 50%;
right: 50%;
margin-left: -256px;
margin-top: 140px;
2 . 不让 对话框里的文字在挪动的时候被选中
上面三个为处理兼容性问题；
/* 不让文字被选中 */
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
透明度的设置:
/* opacity: 0.3; 这个就是调整透明度的*/
我们把它用于遮盖背景；
鼠标拖拽后盒子位置的确定：
代码中有详细解析；
我们注意登录按钮的居中方法和边框线的写法：
width: 50%;
margin: 30px auto 0px auto；
border: 1px solid #cccccc;
控制盒子的边界：
// 控制盒子的边界
loginX = loginX < 0 ? 0 : loginX;
loginY = loginY < 0 ? 0 : loginY;
// 如何获取页面和盒子的大小
// 盒子的大小？login.offsetWidth
// 页面的大小？ window.innerWidth
if (loginX > window.innerWidth - login.offsetWidth) {
loginX = window.innerWidth - login.offsetWidth;
}
if (loginY > window.innerHeight - login.offsetHeight)
loginY = window.innerHeight - login.offsetHeight;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
