一.DOM 文档对象模型
javascript 由三部分组成:ECMAScript,DOM,BOM
浏览器不会执行JS代码,是通过JS内置引擎(解释器)来执行代码.
1.1 获取标签元素方式
1.根据id获取元素
var div = document.getElementById('main');
注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。
2.根据标签名获取元素(获取的是多个标签)
var divs = document.getElementsByTagName('div');
3.根据name获取元素(获取多个元素)
var inputs = document.getElementsByName('hobby');
4.根据类名获取元素(获取多个元素)
var mains = document.getElementsByClassName('main');
5.根据选择器获取元素
var text = document.querySelector('#text'); ---通过id获取元素 var boxes = document.querySelectorAll('.box'); ---通过类名获取元素
其他:
获取内容时候,如果内容中标签 会把标签过滤掉,把前后 的空白和换行去掉了
console.log(box.textContent);
获取内容时候,如果内容中标签,会把标签页获取到
console.log(box.innerHTML);
获取内容时候,如果内容中标签,会把标签过滤掉(最早出现在IE浏览器中,当属性不存在时候返回undefined)
console.log(box.innerText)
//会打印出一堆的对象，这些对象是如何实现的呢
console.dir(box);
1.2 注册事件
1.事件三要素:
事件源 ----- 谁
事件名称 ------ 做了什么
事件处理程序 ------结果怎么样
事件:
onclick 单击
onmouseover 鼠标移入
onmouseout 鼠标移出
ondblclick 双击
onfocus 获得焦点
onblur 失去焦点
onmouseup 鼠标按键放开时触发
onmousdown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发
添加事件监听方式可以给一个标签同时添加多个事件box.addEventListener('click', function(){});
注册事件方法
事件名称: click
事件源 : 谁触发的事件
事件执行函数
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('你好');
}
1.3 标签属性操作
操作标签属性href、title、id、src、className
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
console.log(link.id);
console.log(link.className);
var pic = document.getElementById('pic');
console.log(pic.src);
总结：基本属性操作方法：找到标签跟点属性名
1.4 取消a标签的默认效果
<a id="link" href="http://www.baidu.com">百度</a>
<script>
var link = document.getElementById('link');
link.onclick = function () {
alert('点击我了');
// 取消a标签的默认行为（跳转到href）
return false;
}
// 取消默认行为执行
return false;
// DOM标准方法
e.preventDefault();
// IE的老版本，非标准方式
e.returnValue = false;
取消a标签跳转 return false;
取消A链接跳转 javascript:void(0)
1.5 表单属性操作
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
// 获取元素
var btn = document.getElementById('btn');
btn.onclick = function () {
var txt = document.getElementById('txt');
console.log(txt.value);
console.log(txt.type);
console.log(txt.disabled);
txt.disabled = true;
}
1.6 自定义属性操作
获取自定义属性的值 getAttribute()获取标签行内属性
console.log(box.getAttribute('age'));
console.log(box.getAttribute('personId'));
设置自定义属性 setAttribute() 设置标签行内属性
box.setAttribute('sex', 'male');
box.setAttribute('class', 'test');
移除属性 removeAttribute() 移除标签行内属性
box.removeAttribute('age');
box.removeAttribute('id');
1.7 样式操作,类名操作
1.样式操作
使用style方式设置的样式显示在标签行内
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
box.style.height = '100px';
2.类名操作
修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'show';
box.classList 可以获得标签上的所有类
box.classList.add('a') 添加一个类
box.classList.remove('a') 移除一个类
1.8 三元表达式的另类用法
三元表达式的另类用法：
this.className = options.className || '';
如果第一个值是存在，那么返回第一个值，如果不存在，返回第二个值.
var a = 1||'123';
console.log(a); //返回1
var b = 0||'123';
console.log(b); //返回123
1.9 节点相关概念
一个节点有三个属性： nodeType nodeName nodeValue
- nodeType 节点的类型
- 1 元素节点
- 2 属性节点
- 3 文本节点
- nodeName 节点的名称(标签名称)
- nodeValue 节点值
- 元素节点的nodeValue始终是null
节点： 包括 空格 + 标签
元素： 就是标签
了解什么是节点和元素
节点： 有很多东西，包括 元素，属性 ，文本
元素： 就是一个标签
1.10 动态创建元素
一: document.write()
var btn = document.getElementById('btn');
btn.onclick = function () {
// 当点击按钮的时候使用document.write()输出内容，会把之前的整个页面覆盖掉
document.write('Hello <p>World</p>');
}
可以向页面中写入内容(认识标签),但是在事件点击写入后，会导致原内容清除。
多个内容可以直接使用
二: element.innerHTML
element.innerHTML
var box = document.getElementById('box');
box.innerHTML = 'Hello <p>World</p>';
//可以向元素中添加内容，也可以通过事件添加，但是大量内容时性能不好
//多个innerHTML内容需要使用字符串拼接方式
//向页面中添加内容，可以在事件中添加, 如果频繁的拼上接标签.innerHTML会导致页面卡顿（dom树频繁更新）
三: document.createElement()
// 在内存中创建一个DOM对象
var p = document.createElement('p');
// 设置对象的属性
p.innerText = 'hello';
p.style.color = 'red';
// 把p元素，放到DOM树上
var box = document.getElementById('box');
box.appendChild(p);
document.createElement() // 通过对象的方式创建标签，并添加属性
// 说的好,我选择document.createElement()
1.11 元素操作方法
createElement() //创建元素
insertBefore(新元素，哪个元素之前) //插入到某个元素之前
removeChild() //移除元素
replaceChild(新元素，旧元素) //替换元素
appendChild(新元素) //添加元素
注意：如果appendChild插入的新元素在文档中存在，则会将之前的移除，如果不想移除，先克隆一份添加。标签.cloneNode()
1.12 添加事件监听
添加事件监听方式可以给一个标签同时添加多个事件box.addEventListener('click', function(){});
// btn.addEventListener(事件类型,执行代码)
// btn.addEventListener('click',function(){});
兼容性在IE9以后.
IE老版本事件方法：IE6-10
// btn.attachEvent('onclick',function(){});
1.13 子节点,子元素的属性方法
1.节点属性和方法
parentNode 父节点
childNodes 所有子节点（2*i+1）
firstChild 第一个子节点
lastChild 最后一个字节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
hasChildNodes() 是否有子节点
2.元素属性和方法
children 所有子元素
firstElementChild 第一个子元素
lastElementChild 最后一个字元素
nextElementSibling 下一个兄弟元素
previousElementSibling 上一个兄弟元素
二.BOM 浏览器对象模型
BOM是浏览器对象模型,可以用来操作浏览器的一些功能.比如：刷新浏览器、后退、前进、在浏览器中输入URL等
BOM的顶级对象:window,调用window下的属性和方法时，可以省略window
注意：window下一个特殊的属性 window.name window.top
对话框:
- alert()
- prompt()
- confirm()
1.1 移除事件
移除事件：
removeEventListener()
detachEvent() IE兼容性写法
//移除事件需要指定执行函数名字，所以添加事件监听时就不能用匿名函数.
function btnClick () {
alert('hello world');
// 移除事件
btn.removeEventListener('click', btnClick);
}
btn.addEventListener('click', btnClick);
1.2 事件三个阶段
// addEventListener 的第三个参数为false的时候 ： 事件冒泡（从内到外）
// addEventListener 的第三个参数为true的时候 ： 事件捕获（从外到内）
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
事件对象.eventPhase属性可以查看事件触发时所处的阶段
// box.onclick 只有事件冒泡
// box.attachEvent
// attachEvent只有两个参数， 只有事件冒泡
1.3 事件对象
e.eventPhase 获取当前时间阶段
e || window.event; 事件对象
event.target || event.srcElement 用于获取真正触发事件的元素（有时候有冒泡）
e.curentTarget和this一样 获取事件处理函数所属的对象
e.type 获取时间名称
// 获取的鼠标在浏览器的可视区域的坐标
console.log(e.clientX);
console.log(e.clientY);
// 鼠标在当前页面的位置
console.log(e.pageX);
console.log(e.pageY);
e.pageX 鼠标点击相对于页面的距离
e.pageY 鼠标点击相对于页面的距离
e.clientX 鼠标点击，相对于可视区(浏览器窗口左端)的距离
e.clientY 鼠标点击，相对于可视区(浏览器窗口顶端)的距离
1.4 获取 页面滚动距离
// 输出页面滚动出去的距离
console.log(document.body.scrollLeft);
console.log(document.body.scrollTop);
// documentElement 文档的根元素 html标签
// console.log(document.documentElement);
// 有些浏览器 是使用这两个属性来获取的
console.log(document.documentElement.scrollLeft);
console.log(document.documentElement.scrollTop);
1.5 阻止冒泡
--------------阻止冒泡方法---------------------
// Propagation 传播
// 停止事件传播 取消冒泡
// 标准的DOM方法
// e.stopPropagation();
// 取消冒泡 非标准的方式 老版本的IE支持
e.cancelBubble = true;
1.6 键盘事件
// 键盘事件
// keydown 键盘按下的时候
// keyup 键盘弹起的时候
// keydown 和 keyup的区别 keydown的时候我们所按的键还没有落入文本框
// keyup键盘弹起的时候按的键已经落入文本框
var txt = document.getElementById('txt');txt.onkeydown = function (e) {
// 判断当前用户按下的键是否是数字
e = e || window.event;
// 如果e.keyCode 的值在 48-57 是数字
// e.keyCode 键盘码
// console.log(e.keyCode);
// 按下后退键 8，删除一个字符
if ((e.keyCode < 48 || e.keyCode > 57) && e.keyCode !== 8) { // 非数字
// 取消默认行为
e.preventDefault();
// return false;
}
}
1.7 页面加载事件
onload事件:
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}
onunload事件:
window.onunload = function () {
// 当用户退出页面时执行
}
//注意： 一般我们写写代码都会带上window.onload方法，因为将来大部分代码都是外链式。
//另外： 函数需要放在window.onload的外部，才能被标签上调用到，因为会改变作用域。
1.8 location对象
herf 跳转地址
assign() 让页面跳转到指定的网页(可以后退)
replace() 替换地址栏中的地址（不能后退）
reload() 重新加载页面(true强制服务器获取，false可以缓存获取)
location对象是window对象下的一个属性，时候的时候可以省略window对象,可以获取或者设置浏览器地址栏的URL.
URL的组成:
URL的组成:
scheme://host:port/path?query#fragment
location的常用属性和方法:
href // 跳转地址
hash // 设置或返回从井号 (#) 开始的 URL（锚）
host // 设置或返回主机名和当前 URL 的端口号
port // 设置或返回当前 URL 的端口号。
protocol // 设置或返回当前 URL 的协议
search // 设置或返回从问号 (?) 开始的 URL(查询部分)
assign() // 让页面跳转到指定的网页(可以后退)
replace() // 替换地址栏中的地址（不能后退）
reload() // 重新加载页面(true强制服务器获取，false可以缓存获取)
URL:统一资源定位符 (Uniform Resource Locator, URL)
URL的组成:
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等
host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径
由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询
可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zsfragment:信息片断
字符串，锚点.
1.9 history对象
history对象的方法:
length // 返回浏览器历史列表中的 URL 数量
back() // 加载 history 列表中的前一个 URL。
forward() // 加载 history 列表中的下一个 URL。
go() // 加载 history 列表中的某个具体页面。 1 前进 -1后退
1.10 navigator对象
- userAgent:通过userAgent可以判断用户浏览器的类型
- platform:通过platform可以判断浏览器所在的系统平台类型.
1.11页面偏移量
- offsetParent用于获取最近的定位父级元素，没有定位就是body
- offsetParent和parentNode的区别
var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft); //border外面到父盒子的左边距离
console.log(box.offsetTop); //border外面到父盒子的上面距离
console.log(box.offsetWidth); //内容宽度 border+padding+width
console.log(box.offsetHeight); //内容高度 border+padding+height
1.12 client客户区大小
var box = document.getElementById('box');
console.log(box.clientLeft); //左边框距离
console.log(box.clientTop); //上边框距离
console.log(box.clientWidth); // width+padding
console.log(box.clientHeight); //height+padding
1.13 scroll滚动偏移
var box = document.getElementById('box');
console.log(box.scrollLeft) //左边滚动距离（隐藏的内容+边框）
console.log(box.scrollTop) //上面滚动距离(隐藏的内容+边框)
console.log(box.scrollWidth) //内容宽度+隐藏的内容（不包含滚动条）
console.log(box.scrollHeight) //内容高度+隐藏的内容(不包括滚动条)
offsetTop 相对于父元素的上边距
offsetHeight 盒子大小+ 边框
clientTop 上边框
clientHeight 盒子大小 不包括边框
scollTop 滚动出盒子的距离 (理论上边框的距离也算在内，但是不好算)
scrollHeight 盒子的内容宽度(不含边框)+隐藏距离
1.14 定时器
//单次多次定时器
var timer = setTimeout(fn,时间);
clearTimeout(timer);
var timer = setInterval(fn,时间);
clearInterval(timer);
单次定时器:
setTimeout(执行函数,执行时间);
清除单次定时器:
var time = setTimeout(执行函数,执行时间);
clearTimeout(time);
多次定时器:
setInterval(执行函数,执行时间);
清除多次定时器:
var time = setInterval(执行函数,执行时间);
clearInterval(time);
注意事项:
执行的函数可以是匿名函数也可以是有名函数,是有名函数不能加();
执行时间是过多少毫秒执行一次(毫秒为单位1000毫秒=1秒)
1.15 页面偏移量
offsetTop 距离定位父元素的顶部距离
offsetHeight 当前盒子的高度，包括边框
clientTop 上边框
clientHeight 当前盒子的内容高度，不包括边框
scrollTop 页面滚出的距离
scrollHeight 页面内容高度+隐藏高度
offset偏移量:
var box = document.getElementById('box');
box.offsetParent // 用于获取最近的定位父级元素，没有定位就是body
box.offsetLeft // border外面到父盒子的左边距离
box.offsetTop // border外面到父盒子的上面距离
box.offsetWidth // 内容宽度 border+padding+width
box.offsetHeight // 内容高度 border+padding+height
client客服区大小:
var box = document.getElementById('box');
box.clientLeft // 左边框距离
box.clientTop // 上边框距离
box.clientWidth // width+padding
box.clientHeight // height+padding
scroll滚动偏移
var box = document.getElementById('box');
box.scrollLeft // 左边滚动距离（隐藏的内容+边框）
box.scrollTop // 上面滚动距离(隐藏的内容+边框)
box.scrollWidth // 内容宽度+隐藏的内容（不包含滚动条）
box.scrollHeight // 内容高度+隐藏的内容(不包括滚动条)
单词
onclick 单击
onmouseover 鼠标移入
onmouseout 鼠标移出
ondblclick 双击
onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发
onfocus 获得焦点
onblur 失去焦点
getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
parentNode 父节点
childNodes 所有子节点（2*i+1）
firstChild 第一个子节点
lastChild 最后一个字节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
hasChildNodes() 是否有子节点
children 所有子元素
firstElementChild 第一个子元素
lastElementChild 最后一个字元素
nextElementSibling 下一个兄弟元素
previousElementSibling 上一个兄弟元素
createElement() 创建元素
insertBefore() 插入到某个元素之前
removeChild() 移除元素
replaceChild() 替换元素
appendChild() 添加元素
addEventListener() 添加事件
attachEvent() 添加事件
removeEventListener() 移除事件
detachEvent() 移除事件
e.eventPhase 事件冒泡所处的阶段
e.target 触发事件的对象
e.type 获取事件名称
e.pageX 鼠标点击相对于页面的距离
e.pageY 鼠标点击相对于页面的距离
e.clientX 鼠标点击，相对于可视区(浏览器窗口左端)的距离
e.clientY 鼠标点击，相对于可视区(浏览器窗口顶端)的距离
e.keyCode 获取键盘码
preventDefault 取消默认
stopPropagation 阻止冒泡
onload 加载页面
onunload 卸载页面
setTimeout() 设置单次定时器
clearTimeout() 取消单次定时器
setInterval() 设置多次定时器
clearInterval() 取消多次定时器
location 位置,地址
href 跳转地址
assign() 让页面跳转到指定的网页
replace() 替换地址栏中的地址
reload() 重新加载页面
history.back() 网页后退
history.forward() 网页前进
navigator.userAgent 获取浏览器信息
navigator.platform 获取当前系统平台
offsetParent 用于获取最近的定位父级元素，没有定位就是body
offsetLeft border外面到父盒子的左边距离
offsetTop border外面到父盒子的上面距离
offsetWidth 内容宽度 border+padding+width
offsetHeight 内容高度 border+padding+height
clientLeft 左边框距离
clientTop 上边框距离
clientWidth width+padding
clientHeight height+padding
scrollLeft 左边滚动距离
scrollTop 上面滚动距离
scrollWidth 内容宽度+隐藏的内容
scrollHeight 内容高度+隐藏的内容
案例
1.检测用户名密码长度
var btn = document.getElementById('btn');
var data = document.getElementsByTagName('input');
var span = document.getElementsByTagName('span');
btn.onclick = function (){
span[0].innerHTML='';
span[1].innerHTML='';
var user = data[0];
var pass = data[1];
if(user.value.length<6 || user.value.length>12){
span[0].innerHTML = '长度不合格';
return false;
}
if(pass.value.length<6 || pass.value.length>12){
span[1].innerHTML = '长度不合格';
return false;
}
alert('登入成功');
}
2.设置下拉框选中
var btn = document.getElementById('btn');
var selects = document.getElementsByTagName('option');
btn.onclick = function(){
var num = parseInt(Math.random()*selects.length);
for(var i = 0; i<selects.length; i++){
if(num == i){
selects[i].selected = 1;
}
}
}
3.搜索文本框
var btn = document.getElementById('btn');
var input = document.getElementsByTagName('input')[0];
input.style.color = '#ccc';
input.onfocus = function(){
if(input.value == '请输入搜索关键字'){
input.value = '';
input.style.color = '#333';
}
}
input.onblur = function(){
if(input.value == '' || input.value == '请输入搜索关键字'){
input.value = '请输入搜索关键字';
input.style.color = '#ccc';
}
}
4.全选反选
var inputs = document.getElementsByTagName('input');
var qx = inputs[inputs.length-1];
var fx = document.getElementById('btn1');
qx.onclick=function (){
for(var i = 0; i<inputs.length-1; i++){
if(qx.checked == 1){
inputs[i].checked = 1;
}else{
inputs[i].checked = 0;
}
}
}
fx.onclick=function(){
for(var i = 0; i<inputs.length-1; i++){
inputs[i].checked = !inputs[i].checked;
}
isChecked();
}
for(var i = 0;i<inputs.length-1; i++){
inputs[i].onclick=function(){
isChecked();
}
}
function isChecked(){
var cdk = 1;
for(var i = 0; i<inputs.length-1;i++){
if(inputs[i].checked==0){
cdk = 0
}
}
qx.checked = cdk;
}
5.开关灯效果
var num = 1;
document.getElementById('btn').onclick = function (){
if(num){
document.body.bgColor = '#000';
this.innerHTML = '开灯';
num = 0;
}else{
document.body.bgColor = '#fff';
this.innerHTML = '关灯';
num = 1;
}
}
6.高亮显示文本框
var inputs = document.getElementsByTagName('input');
var btn = document.getElementById('btn');
for(var i = 0;i<inputs.length; i++){
inputs[i].onfocus = function(){
this.style.backgroundColor = 'red';
inputs[i].onblur = function(){
this.style.backgroundColor = '';
}
}
7.Tab切换
var lisUl = document.getElementById('lis');
var lis = lisUl.getElementsByTagName('li');
var div_bd = document.getElementById('bd');
var divs = div_bd.getElementsByTagName('div');
for(var i = 0; i<lis.length; i++){
lis[i].setAttribute('index',i);
lis[i].onclick = function (){
for(var i = 0; i<lis.length; i++){
lis[i].removeAttribute('class');
lis[i].style.backgroundColor = '';
}
this.style.backgroundColor = '#ccc';
for(var i = 0; i<divs.length; i++){
divs[i].className = '';
if(this.getAttribute('index')==i){
divs[i].className = 'div';
}
}
}
}
8.动态创建表格
var datas = [
{name:'zs','id':1,num:'500'},
{name:'ls','id':2,num:'500'},
{name:'ww','id':3,num:'500'},
{name:'zl','id':4,num:'500'},
{name:'dc','id':4,num:'500'}
];
var arr = ['姓名','学号','成绩','操作'];
var box = document.getElementById('box');
var table = document.createElement('table');
table.border='1';
table.rules ='all';
table.width='300';
box.appendChild(table);
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
table.appendChild(thead);
table.appendChild(tbody);
tbody.style.textAlign = 'center';
var tr,th,td,links;
tr = document.createElement('tr');
thead.appendChild(tr);
for(var i = 0; i<arr.length; i++){
th = document.createElement('th');
tr.appendChild(th);
th.innerHTML = arr[i];
}
for(var i = 0; i<datas.length; i++){
var data = datas[i];
tr = document.createElement('tr');
tbody.appendChild(tr);
for(var key in data){
//console.log(key,data[key]);
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = data[key];
}
td = document.createElement('td');
tr.appendChild(td);
links = document.createElement('a');
td.appendChild(links);
links.href="javascript:void(0)";
links.innerHTML = '删除';
// td.innerHTML = '<a href="javascript:void(0)">删除</a>';
links.onclick = deleteTr;
}
function deleteTr(){
if(confirm('您是否要删除')){
tr = this.parentNode.parentNode;
tbody.removeChild(tr);
}
return false;
9.跟着鼠标飞的天使
var img = document.getElementsByTagName('img')[0];
document.onmousemove = function(e){
// console.log(e);
img.style.top = e.pageY-50+'px';
img.style.left = e.pageX-30+'px';
}
10.鼠标在盒子中的位置
var box = document.getElementById('box');
box.onclick=function(e){
var box_left = box.offsetLeft;
var box_top = box.offsetTop;
var x = e.pageX - box_left;
var y = e.pageY - box_top;
console.log(x);
console.log(y);
}
11.光棍节倒计时案例
function getCountTime(endTime) {
var day, hour, minute, second;
var countTime = parseInt((new Date(endTime) - new Date()) / 1000);
day = parseInt(countTime / 60 / 60 / 24);
hour = parseInt(countTime / 60 / 60 % 24) < 10 ? '0' + parseInt(countTime / 60 / 60 % 24) : parseInt(countTime / 60 / 60 % 24);
minute = parseInt(countTime / 60 % 60) < 10 ? '0' + parseInt(countTime / 60 % 60) : parseInt(countTime / 60 % 60);
second = parseInt(countTime % 60) < 10 ? '0' + parseInt(countTime % 60) : parseInt(countTime % 60);
var arr = [day,hour,minute,second,countTime];
return arr;
}
function setTime(){
arr = getCountTime('2018-11-11 00:00');
var str = '距离光棍节还有<br /><span>'+arr[0]+'天</span><span>'+arr[1]+'小时</span><span>'+arr[2]+'分钟</span><span>'+arr[3]+'秒</span><br >秒数倒计时:'+arr[4];
var div = document.getElementById('time');
div.innerHTML = str;
}
setInterval(setTime,1000);
12.定时器简单动画(上下左右键移动圆球)
window.onload = function(){
var box = document.getElementById('box');
var timeIsLeft,timeIsRight,timeIsTop,timeIsBottom;
onkeydown = function(e){
console.log(box.offsetLeft);
clearInterval(timeIsBottom);
clearInterval(timeIsRight);
clearInterval(timeIsTop);
clearInterval(timeIsLeft);
if(e.keyCode == 39){
timeIsLeft = setInterval(isLeft,10);
}else if(e.keyCode == 37){
clearInterval(timeIsLeft);
timeIsRight = setInterval(isRight,10);
}else if(e.keyCode == 38){
timeIsTop = setInterval(isTop,10);
}else if(e.keyCode == 40){
timeIsBottom = setInterval(isBottom,10);
}else{
alert('暂停');
}
}
}
function isLeft(){
box.style.left = box.offsetLeft - 7 + 'px';
}
function isRight(){
box.style.left = box.offsetLeft - 9 + 'px';
}
function isBottom(){
box.style.top = box.offsetTop - 7 + 'px';
}
function isTop(){
box.style.top = box.offsetTop - 9 + 'px';
}
13.拖拽案例
var box = document.getElementById('box');
var gb = document.getElementById('gb');
var boxX,boxY;
box.onmousedown = function(e){
var x = e.pageX - box.offsetLeft;
var y = e.pageY - box.offsetTop;
document.onmousemove = function(e){
boxX = e.pageX - x;
boxY = e.pageY - y;
box.style.left = boxX + 'px';
box.style.top = boxY + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
gb.onclick = function(){
box.style.display = 'none';
}
59
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
