祝愿墙
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0 auto;
padding: 0px;
font-size: 12px;
background: url(image/bg.gif) repeat center 36px;
text-align: center;
background-color: #c30230;
}
#content {
margin: 0 auto;
width: 960px;
background: url(image/content_bg.jpg) no-repeat left top;
height: 627px;
position: relative;
}
#content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
position: absolute;
width: 227px;
left: 200px;
top: 100px;
}
#content .tip1 .tip_h {
background: url(image/tip1_h.gif) no-repeat left top;
}
#content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h {
width: 227px;
padding-top: 45px;
height: 23px;
text-align: left;
cursor: move;
}
#content .tip1 .tip_c {
background: url(image/tip1_c.gif) repeat-y;
}
#content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c {
width: 200px;
padding-left: 12px;
padding-right: 15px;
min-height: 40px;
text-align: left;
line-height: 20px;
max-height: 160px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
#content .tip1 .tip_f {
background: url(image/tip1_f.gif) no-repeat left top;
}
#content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f {
width: 227px;
height: 53px;
padding-top: 20px;
}
#content .close, #content .close2 {
float: left;
font-size: 12px;
cursor: pointer;
color: #000000;
}
.clr {
clear: both;
overflow: auto;
display: block;
height: 0px;
}
#content .icon {
float: left;
width: 35px;
padding-left: 15px;
height: 35px;
text-align: center;
}
#content .name {
float: right;
padding-right: 15px;
text-align: right;
font-size: 14px;
line-height: 35px;
color: #C0F;
}
#content .num {
float: left;
padding-left: 7px;
width: 195px;
}
</style>
</head>
<body>
<!--纸条墙-->
<div id="content">
<!--纸条-->
<div class="tip1" id="tip" >
<div class="tip_h" title="双击关闭纸条">
<div class="num">第[49568]条 2016-07-7 22:51:52</div>
<div class="close" title="关闭纸条" >×</div>
<div class="clr"></div>
</div>
<div class="tip_c">
普天同庆，天下大同！
</div>
<div class="tip_f">
<div class="icon">
<img src="image/bpic_1.gif" alt="" title="">
</div>
<div class="name">不愿意透露姓名的吕先生</div>
<div class="clr"></div>
</div>
</div>
</div>
<script>
//需求：克隆盒子，然后随机位置，点击纸条的时候压住其他的纸条。
//思路：获取纸条，克隆，随机数值绑定到纸条上，添加到父盒子中，然后绑定事件层级最高。
//步骤：
//1.获取纸条，克隆
//2.随机数值绑定到纸条上
//3.添加到父盒子中
//4.然后绑定事件层级最高
//0.创建多张纸条
for(var i=1;i<=10;i++){
//1.获取纸条，克隆
var tip = document.getElementById("tip");
var content = document.getElementById("content");
var newTip = tip.cloneNode(true);
//问题：id问题。
newTip.id = newTip.id+i;
//2.随机数值绑定到纸条上(top不要超过400，left不要超过700)
var topValue = parseInt(Math.random()*400);//(取值是0-1，那么乘以400,取值就是0-400)
var leftValue = parseInt(Math.random()*700);//小数取整
newTip.style.top = topValue+"px";
newTip.style.left = leftValue+"px";
//3.添加到父盒子中
content.appendChild(newTip);
//4.然后绑定事件层级最高
newTip.onclick = fn;
}
//tip本身有问题，没有绑定事件。（1.删除。 2.在绑定一次）
tip.onclick = fn;
// tip.parentNode.removeChild(tip);
//获取所有类名叫做的tip1标签，然后绑定事件。
var index = 1;
function fn() {
//计数器
this.style.zIndex = index;
index++;
}
</script>
</body>
</html>
元素的操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li id="li1">我是参照标签</li>
</ul>
<script>
//document.write();不常用，因为容易覆盖原来的页面。
//innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
//document.createElement;也是比较多的，指定数量的时候一般用它。
var ul = document.getElementsByTagName("ul")[0];
var li1 = document.getElementById("li1");
//创建，添加，删除，替换
var li2 = document.createElement("li");
li2.innerText = "我是createElement创建的标签，用的是appendChild的方法添加的";
ul.appendChild(li2);
//用insertBefore添加
var li3 = document.createElement("li");
li3.innerText = "我是createElement创建的标签，用的是insertBefore的方法添加的"
//父节点.insertBefore(新节点，参照节点);
ul.insertBefore(li3,li1);
//删除，替换
ul.removeChild(li3);
//父节点.replaceChild(newNode,oldNode);
ul.replaceChild(li3,li2);
//克隆node.cloneNode(true);深层复制。
for(var i=0;i<=3;i++){
var newLi = li3.cloneNode(true);
ul.appendChild(newLi);
}
</script>
</body>
</html>
创建列表高亮显示美女
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
cursor: pointer;
}
</style>
</head>
<body>
<button>创建列表</button>
<ul></ul>
<script>
//需求：点击列表，添加四大美女，然后鼠标放到谁上面，谁高亮显示。
//思路：创建一个数组，添加内容。利用for循环穿件li标签在添加内容，高亮显示。
//步骤：（指定多少个元素的创建最好用for循环）
//老三步
var btn = document.getElementsByTagName("button")[0];
//获取相关元素并定义内容
var arr = ["昭君出塞","西施浣纱","贵妃醉酒","貂蝉拜月"];
var ul = document.getElementsByTagName("ul")[0];
btn.onclick = function () {
// ul.innerHTML = "";
for(var i=0;i<arr.length;i++){
//创建li元素
var newLi = document.createElement("li");
// newLi.innerHTML += "<li>"+arr[i]+"</li>";
//添加到ul中
ul.appendChild(newLi);
}
//获取所有的li标签然后，为他绑定事件，排他思想，高亮显示
var liArr = ul.children;
//为所有的li绑定事件
for(var i=0;i<liArr.length;i++){
liArr[i].onmouseover = function () {
//排他思想，高亮显示
for(var j=0;j<liArr.length;j++){
liArr[j].style.backgroundColor = "";
}
this.style.backgroundColor = "red";
}
}
}
</script>
</body>
</html>
选择水果
选择水果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">鸭梨</option>
<option value="3">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple>
</select>
<script>
//需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input");
//如果不带参数，我们可以直接绑定一个函数名。但是因为带有参数，所以我们需要匿名函数去调用这个函数。
inpArr[0].onclick = function () {
fn1(sel1,sel2);
}
inpArr[1].onclick = function () {
fn1(sel2,sel1);
}
inpArr[2].onclick = function () {
fn2(sel1,sel2);
}
inpArr[3].onclick = function () {
fn2(sel2,sel1);
}
//封装的时候要注意，第一个按钮先获取的是sel1，第二个按钮先获取的是sel2;
function fn1(ele1,ele2) {
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
ele2.appendChild(arr[0]);
}
}
//把sel1和sel2设置成两个形参，通过调用的时候先后传递达成不一样的需求
function fn2(ele1,ele2) {
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
arr[i].selected = false;
ele2.appendChild(arr[i]);
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 150px;
height: 200px;
background-color: #7bff68;
}
</style>
</head>
<body>
<select size="10" name="aaa" id="sel1" multiple="multiple">
<option value="0">1香蕉</option>
<option value="1">2苹果</option>
<option value="2">3大鸭梨</option>
<option value="3">4草莓</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select size="10" name="bbb" id="sel2" multiple="multiple">
</select>
<script>
//需求：点击按钮把对应的选中项移动到另一侧。
//技术点：如果移动单一的选项，那么看看哪个选项是有selected的。
//如果移动所有的选项，那么直接把sel1中的所有选项放入sel2中。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//步骤：
//1.获取事件源和相关元素
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input");
//2.绑定事件(push和appendChild用法相似：但是一个是控制数组，一个是控制元素节点)
inpArr[0].onclick = function () {
var optArr = sel1.children;
for(var i=0;i<optArr.length;){
sel2.appendChild(optArr[i]);
}
}
//为第二个按钮绑定事件
inpArr[1].onclick = function () {
var optArr = sel2.children;
for(var i=0;i<optArr.length;){
sel1.appendChild(optArr[i]);
}
}
inpArr[2].onclick = function () {
var optArr = sel1.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
optArr[i].selected=false;
sel2.appendChild(optArr[i]);
}
}
//获取sel2中的子元素变成真数组，然后排序
var aaa = Array.from(sel2.children).sort(function (a,b) {
return a.value-b.value;
});
//删除素有子元素
for(var i=0;i<sel2.children.length;i++){
sel2.removeChild(sel2.children[i]);
}
//把排好序的数组添加到sel2中
for(var i=0;i<aaa.length;i++){
sel2.appendChild(aaa[i]);
}
}
inpArr[3].onclick = function () {
var optArr = sel2.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
optArr[i].selected=false;
sel1.appendChild(optArr[i]);
}
}
var aaa = Array.from(sel1.children).sort(function (a,b) {
return a.value-b.value;
});
for(var i=0;i<sel1.children.length;i++){
sel1.removeChild(sel1.children[i]);
}
for(var i=0;i<aaa.length;i++){
sel1.appendChild(aaa[i]);
}
}
</script>
</body>
</html>
在线用户
在线用户
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
word-wrap: break-word;
}
.wp {
width: 730px;
margin: 0px auto;
}
.mtn {
margin-top: 5px!important;
}
#ct .frame {
margin: 0;
border: none;
}
.xfs_2 .frame-title, .xfs_2 .frametitle, .xfs_2 .tab-title {
background-color: #A90000;
background-position: 0 -99px;
}
.xfs .frame-title, .xfs .frametitle, .xfs .tab-title, .xfs .frame-title a, .xfs .frametitle a, .xfs .tab-title a {
color: #FFF!important;
}
.xfs .frame-title, .xfs .frametitle, .xfs .tab-title {
border: none;
background: transparent url(images/mu.png) repeat-x 0 95;
}
.title {
padding: 0 10px;
height: 32px;
font-size: 14px;
font-weight: 700;
line-height: 32px;
overflow: hidden;
}
.block {
margin: 10px 10px 0;
}
ul, menu, dir {
display: block;
list-style: none;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 25px;
}
.mls li {
padding: 0 0 5px;
width: 66px;
height: 85px;
}
.ml li {
float: left;
text-align: center;
overflow: hidden;
}
a {
color: #333;
text-decoration: none;
font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun';
}
.mls p {
margin-top: 5px;
}
.ml p, .ml span {
display: block;
width: 100%;
height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mls img {
width: 48px;
height: 48px;
}
.ml img {
display: block;
margin: 0 auto;
}
a img {
border: none;
}
</style>
</head>
<body>
<div class="wp mtn">
<div id="diy3" class="area"><div id="frameipq7f2" class="xfs xfs_2 frame move-span cl frame-1"><div
class="title frame-title"><span class="titletext">当前在线用户</span></div><div id="frameipq7f2_left"
class="column frame-1-c"><div
id="frameipq7f2_left_temp" class="move-span temp"></div><div id="portal_block_695"
class="block move-span"><div
id="portal_block_695_content" class="dxb_bc">
<div class="module cl ml mls" id="users">
<ul>
<!--<li>-->
<!--<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>-->
<!--<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>-->
<!--</li>-->
</ul>
</div>
</div></div></div></div></div>
</div>
<script>
//模拟从服务器获取数据
var users = [
{"name": "tdxy01","icon":"images/noavatar_small.gif"},
{"name": "沉眠楚人","icon":"images/noavatar_small.gif"},
{"name": "爱上karina","icon":"images/75_avatar_small.jpg"},
{"name": "tdxy01","icon":"images/89_avatar_small.jpg"},
{"name": "today","icon":"images/noavatar_small.gif"},
{"name": "hlg","icon":"images/noavatar_small.gif"},
{"name": "itcast","icon":"images/noavatar_small.gif"},
{"name": "heima","icon":"images/noavatar_small.gif"},
{"name": "nima","icon":"images/noavatar_small.gif"},
{"name": "gege","icon":"images/noavatar_small.gif"},
{"name": "nimei","icon":"images/noavatar_small.gif"},
{"name": "goodman","icon":"images/noavatar_small.gif"},
{"name": "haoren","icon":"images/noavatar_small.gif"},
{"name": "yuanxiaojie","icon":"images/noavatar_small.gif"},
{"name": "zhengyue","icon":"images/noavatar_small.gif"},
{"name": "qishi","icon":"images/noavatar_small.gif"},
{"name": "qqtang","icon":"images/noavatar_small.gif"},
{"name": "wawawa","icon":"images/noavatar_small.gif"},
{"name": "haha","icon":"images/noavatar_small.gif"},
{"name": "robot","icon":"images/noavatar_small.gif"},
{"name": "XFlute","icon":"images/noavatar_small.gif"},
{"name": "lovmilan","icon":"images/noavatar_small.gif"},
{"name": "johnny670","icon":"images/noavatar_small.gif"},
{"name": "xiaobinbin02","icon":"images/noavatar_small.gif"},
{"name": "axxxxx","icon":"images/noavatar_small.gif"}
];
//需求：页面显示所有的在线用户。
//思路：模拟服务器获取数据（数组中装着json）.获取ul，把ul的innerHTML属性获取到，然后不间断的往innerHTML属性中赋值。
//赋值要求：li标签的内容。
//步骤：(获取元素)
var div = document.getElementById("users");
var ul = div.firstElementChild || div.firstChild;
// var ul = div.children[0];
//1.模拟服务器获取数据（定义数组），通过循环添加元素（定义for）
//数组中有多少元素，我们就创建多少个li标签
for(var i=0;i<users.length;i++){
//2.模拟实验的操作方式。
ul.innerHTML += '<li>'+
'<a href="#" target="blank"><img src="'+users[i].icon+'" width="48" height="48" alt="'+users[i].name+'"></a>'+
'<p><a href="#" title="'+users[i].name+'" target="_blank">'+users[i].name+'</a></p>'+
'</li>';
}
// var str = "b";
// var str2 = "a"+str+"c";
//实验；
//获取ul
// var div = document.getElementById("users");
// var ul = div.firstElementChild || div.firstChild;
// var ul = div.children[0];
//往ul中添加li元素以及li元素中的内容
// ul.innerHTML += '<li>'+
// '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
// '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
// '</li>';
// ul.innerHTML += '<li>'+
// '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
// '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
// '</li>';
// ul.innerHTML += '<li>'+
// '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
// '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
// '</li>';
// str = 'a'+
// 'b'+
// 'c'+
// 'd';
</script>
</body>
</html>
模拟百度搜索
模拟百度所搜
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
margin: 200px auto;
}
ul {
width: 392px;
padding: 5px;
list-style: none;
border: 1px solid red;
}
li:hover {
background-color: red;
}
input {
width: 400px;
}
button {
width: 70px;
}
</style>
</head>
<body>
<div class="box">
<input type="text"/>
<button>索搜</button>
<!--<ul>-->
<!--<li>aaaa</li>-->
<!--<li>bbb</li>-->
<!--<li>ccc</li>-->
<!--</ul>-->
</div>
<script>
//需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
//模拟服务器获取内容
var arr = ["a","ab","abc","abcd","aa","aaa"];
var box = document.getElementsByTagName("div")[0];
var inp = box.children[0];
// var inp = document.getElementsByTagName("input")[0];
//2.绑定事件(输入内容(输入事件，键盘弹起事件))
inp.onkeyup = function () {
//创建一个字符串，里面添加满了li和对应的内容。
var newArr = [];
//我要从数组中查询以input中输入内容为开头的信息，然后添加到li中，转换成字符串。
//遍历老数组，然后判断每一项，哪项是以input内容为开头的穿件一个li，塞进去。
for(var i=0;i<arr.length;i++){
//判断当前项，是否已input内容为开头
//获取输入内容input标签的value属性值。
var val = this.value;
if(arr[i].indexOf(val)===0){
newArr.push("<li>"+arr[i]+"</li>");
}
}
var str = newArr.join("");
//Bug1.每次创建新的ul之前，先删除旧的ul
//只有ul存在我们才能删除ul
// var aaa = box.getElementsByTagName("ul")[0];
if(box.children[2]){
//只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
box.removeChild(box.children[2]);
}
//Bug2.如果input中内容为空，那么久不能在生成ul了。
//如果input为空，那么切断函数
//Bug3.如果arr数组中没有以input为开头的元素。那么切断函数
//newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
if(this.value.length === 0 || newArr.length === 0){
//切断函数(不在产生新的ul)
return;
}
//3.书写事件驱动程序
var ul = document.createElement("ul");
//把创建好的内容添加到ul中。
ul.innerHTML = str;
box.appendChild(ul);
}
</script>
</body>
</html>
判断字符以某个字符串开头
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = "abcdefg";
//判断str是否以a为开头？（给定字符串然后他的索引值为0）
var num = str.indexOf("ab");
//只有返回值为0，那么字符串才是以参数为开头
//如果查询不到，返回值为-1；
alert(num);
</script>
</body>
</html>
表格操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<script>
// rows:返回值是数组 (只读，table和textarea能用)
var tab = document.getElementsByTagName("table")[0];
//// insertRow() (只有table能调用)
//// var tr = document.createElement("tr");
// var aaa = tab.insertRow(2);//指定索引值之前插入
//// deleteRow() (只有table能调用)
// tab.deleteRow(2);
//
//// console.log(aaa == tr);
// console.log(aaa);
// console.log(tab.rows);
//// cells (只读，tr和textarea能用)
// var ce = tab.children[0];
// console.log(ce.children[0].cells);
//// insertCell() (只有tr能调用)
// ce.children[0].insertCell(0);
//
//// deleteCell() (只有tr能调用)
// ce.children[0].deleteCell(0);
</script>
</body>
</html>
window对象操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//window是bom的顶级对象。通常情况下，可以省略
// window.alert(1);
// alert(2);
// prompt();
// confirm();
// //成员变量也是window的一个属性而已
// var aaa = 1;
// alert(aaa);
// alert(window.aaa);
// alert(aaa === window.aaa);
//自定义函数也是window的一个方法
function fn(){
console.log(1);
console.log(1);
console.log(1);
console.log(1);
}
console.log(window.fn);
</script>
</body>
</html>
BOM的内置方法对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="javascript:;">点击我可以穿件一个新的页面</a>
<a href="javascript:;">点击我可以关闭本页面</a>
<div>点击我跳转到百度</div>
<script>
//新窗口 = window.open(地址,是否开新窗口,新窗口的参数);
var a1 = document.getElementsByTagName("a")[0];
// var a2 = document.getElementsByTagName("a")[1];
a1.onclick = function () {
// window.open("http://www.jd.com","_blank");
var json = {"name":"helloworld","fullscreen":"no","location":"no","width":"100px","height":"100px","top":"100px","left":"100px"};
// var newWin = window.open("demo.html","_self",json);
var newWin = window.open("demo.html","_blank",json);
newWin.moveTo(500,500);
// name：新窗口的名称，可以为空
// featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
// fullscreen= { yes/no/1/0 } 是否全屏，默认no
// channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
// toolbar= { yes/no/1/0 } 是否显示工具条，默认no
// location= { yes/no/1/0 } 是否显示地址栏，默认no
// directories = { yes/no/1/0 } 是否显示转向按钮，默认no
// status= { yes/no/1/0 } 是否显示窗口状态条，默认no
// menubar= { yes/no/1/0 } 是否显示菜单，默认no
// scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
// resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
// width=number 窗口宽度（像素单位）
// height=number 窗口高度（像素单位）
// top=number 窗口离屏幕顶部距离（像素单位）
// left=number 窗口离屏幕左边距离（像素单位）
}
//
// //关闭本页面
// a2.onclick = function () {
// window.close();
// }
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com";
// window.open("http://www.baidu.com","_blank");
}
// console.log(location.href ) //
// console.log(location.hash ) // 返回url中#后面的内容，包含#
// console.log(location.host ) // 主机名，包括端口
// console.log(location.hostname) // 主机名
// console.log(location.pathname) // url中的路径部分
// console.log(location.protocol) // 协议 一般是http、https
// console.log(location.search ) // 查询字符串
//navigator
// console.log(navigator.userAgent);
// console.log(navigator.platform);
//回退
//history.go(-1);
// history.back();
</script>
</body>
</html>
体验定时器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//setInterval(); setTimeout();
// var num = 0;
// setInterval(function () {
// console.log(num);
// num++;
// },1000);
//用途：setInterval()循环定时器；周而复始的执行（循环执行）
//用途：setTimeout() 炸弹定时器；用完以后立刻报废（只执行一次）
//定义方法1(匿名函数)
// setInterval(function () {
// console.log(1);
// },1000);
// //定义方法2
// setInterval(fn,1000);
// function fn(){
// console.log(2);
// }
//定义方法3
// setInterval("fn(3)",1000);
// function fn(aaa){
// console.log(aaa);
// }
</script>
</body>
</html>
定时器的高级
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//返回值，清除定时器。
var num = 1;
//setInterval他的返回值就是定时器的名字
var timer = setInterval(function () {
console.log(num);
num++
if(num===10){
//如何停止定时器呢？？？
clearInterval(timer);
}
},500);
</script>
</body>
</html>
5秒钟关闭广告
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
img {
position: fixed;
top: 50%;
margin-top: -220px;
}
.img1 {
left: 10px;
}
.img2 {
right: 10px;
}
div {
width: 800px;
margin: 150px auto;
color: red;
text-align: center;
font: 700 40px/50px "simsun";
}
</style>
<script>
window.onload = function () {
//获取相关元素
var imgArr = document.getElementsByTagName("img");
//设置定时器
setTimeout(fn,5000);
function fn(){
imgArr[0].style.display = "none";
imgArr[1].style.display = "none";
}
}
</script>
</head>
<body>
<img class="img1" src="images/1.gif" alt=""/>
<img class="img2" src="images/2.gif" alt=""/>
<div>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
</div>
</body>
</html>
模拟京东关闭广告
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.site-nav {
height: 30px;
background-color: #ccc;
}
.top-banner {
background-color: blue;
}
.w {
width: 1210px;
height: 80px;
background-color: pink;
margin: 0 auto;
position: relative;
}
.search {
width: 1210px;
height: 80px;
background-color: red;
margin: 0 auto;
}
a {
position: absolute;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
background-color: #000;
color: #fff;
text-decoration: none
}
</style>
</head>
<body>
<div class="site-nav"></div>
<div class="top-banner" style="opacity: 1">
<div class="w">
<a href="#">×</a>
</div>
</div>
<div class="search">
<script>
//需求：点击关闭按钮，先让top-banner这个盒子透明度变为0，紧接着display：none;
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
//1.获取事件源
var topBaner = document.getElementsByClassName("top-banner")[0];
var a = topBaner.children[0].firstElementChild || topBaner.children[0].firstChild ;
//定义定时器
var timer = null;
//2.绑定事件
a.onclick = function () {
//3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
timer = setInterval(function () {
topBaner.style.opacity -= 0.1;
if(topBaner.style.opacity<0){
topBaner.style.display = "none";
clearInterval(timer);
}
},50);
}
</script>
</div>
</body>
</html>
Date定义和体验
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//第一种
var date1 = new Date();
console.log(date1);
//第二种
var date2 = new Date("2016/09/06 00:00:00");
console.log(date2);
//后两种兼容性不好，不推荐使用
//第三种
var date3 = new Date('Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)');
//第四种
var date4 = new Date(2016, 1, 27);
console.log(date1.getDate() ) //获取日 1-31
console.log(date1.getDay () ) //获取星期 0-6（0代表周日）
console.log(date1.getMonth () ) //获取月 0-11（1月从0开始）
console.log(date1.getFullYear () ) //获取完整年份（浏览器都支持）
console.log(date1.getHours () ) // 获取小时 0-23
console.log(date1.getMinutes () ) //获取分钟 0-59
console.log(date1.getSeconds () ) //获取秒 0-59
console.log(date1.getMilliseconds () ) //获取毫秒 （1s = 1000ms）
console.log(date1.getTime () ) //返回累计毫秒数(从1970/1/1午夜)
//获取当前时间距离1970/01/01的毫秒值
// var date11 = Date.now();
// var date22 = +new Date();
// var date33 = new Date().getTime();
// var date44 = new Date().valueOf();
//
// console.log(date11);
// console.log(date22);
// console.log(date33);
// console.log(date44);
</script>
</body>
</html>
模拟日历
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 800px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
//模拟日历
//需求：每天打开这个页面都能定时显示年月日和星期几
//步骤：（创建一个当前日期的日期对象，然后获取其中的年月日和星期，赋值给div）
//1.创建一个当前日期的日期对象
//2.然后获取其中的年月日和星期
//3.赋值给div
//1.创建一个当前日期的日期对象
var date = new Date();
//2.然后获取其中的年月日和星期
var year = date.getFullYear();
var month = date.getMonth();
var hao = date.getDate();
var week = date.getDay();
// console.log(year+" "+month+" "+hao+" "+week);
//3.赋值给div
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var div = document.getElementsByTagName("div")[0];
div.innerText = "今天是："+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];
</script>
</body>
</html>
苹果发布会倒计时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 1210px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.getElementsByTagName("div")[0];
var timer = setInterval(fn,1);
function fn(){
var nowtime = new Date();
var future = new Date("2016/09/05 18:23:15");
var timeSum = future.getTime() - nowtime.getTime();
var day = parseInt(timeSum/1000/60/60/24);
var hour = parseInt(timeSum/1000/60/60%24);
var minu = parseInt(timeSum/1000/60%60);
var sec = parseInt(timeSum/1000%60);
var millsec = parseInt(timeSum%1000);
day=day<10?"0"+day:day;
hour=hour<10?"0"+hour:hour;
minu=minu<10?"0"+minu:minu;
sec=sec<10?"0"+sec:sec;
if(millsec<10){
millsec="00"+millsec;
}else if(millsec<100){
millsec="0"+millsec;
}
//
// console.log(day);
// console.log(parseInt(timeSum/1000/60/60/24));
if(timeSum<0){
div.innerHTML="距离苹果发布会还有00天00小时00分00秒000毫秒";
clearInterval(timer);
return;
}
div.innerHTML="距离苹果发布会还有"+day+"天"+hour+"小时"+minu+"分"+sec+"秒"+millsec+"毫秒";
}
</script>
</body>
</html>
string内置对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//简单数据类型无法绑定属性和方法
var str = "abc";
var strObj = new String("abc");
strObj.aaa = 111;
console.log(strObj);
console.log(typeof strObj);
console.log(strObj.aaa);
str.aaa = 111;
console.log(str.aaa);
console.log(str.length);
console.log(str.indexOf("c"));
</script>
</body>
</html>
给索引查字符
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = new String("abcd");
// console.log(str);
// for(var i=0;i<str.length;i++){
// console.log(str.charAt(i));
// }
// console.log(str.charAt(0));
// console.log(str.charAt(1));
// console.log(str.charAt(2));
// console.log(str.charAt(3));
//返回unicode中的码表值。
console.log(str.charCodeAt(0));
</script>
</body>
</html>
打印字符串的占位长度
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// sort(); 底层用到了charCodeAt();
var str = "I love my country!我你爱中国！";
//"我爱你"：一汉字占两个字符位。
//需求：求一个字符串占有几个字符位。
//思路；如果是英文，站一个字符位，如果不是英文占两个字符位。
//技术点：判断该字符是否在0-127之间。（在的话是英文，不在是非英文）
alert(getZFWlength(str));
alert(str.length);
function getZFWlength(string){
//定义一个计数器
var count = 0;
for(var i=0;i<string.length;i++){
//对每一位字符串进行判断，如果Unicode编码在0-127，计数器+1；否则+2
if(string.charCodeAt(i)<128 && string.charCodeAt(i)>=0 ){
count++;
}else{
count+=2;
}
}
return count;
}
</script>
</body>
</html>
给字符查索引
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = "abcdea";
//给字符查索引(索引值为0,说明字符串以查询的参数为开头)
console.log(str.indexOf("c"));
console.log(str.lastIndexOf("c"));
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));
//了解；数据传递的时候经常需要通过编码后在传递，接收后还需要反编译回来。
var url = "http://www.itcast.cn?username='aaa'&password='123'";
console.log(encodeURIComponent(url));
console.log(decodeURIComponent(encodeURIComponent(url)));
</script>
</body>
</html>
字符串连接和截取
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//concat 连接两个字符串返回一个新字符串，并且不会被修改
// var str1 = "abc";
// var str2 = "123";
// var str3 = str1.concat(str2);
// console.log(str1);
// console.log(str2);
// console.log(str3);
var str = "I love my family!";
console.log(str);
// //slice(); 跟剧索引值和索引值截取字符串
// console.log(str.slice(2));//从索引截取到最后
// console.log(str.slice(2,5));//从索引截,包左不包右
// console.log(str.slice(-3));//后几个
// console.log(str.slice(5,2));//空字符串
// //substr(); 跟剧索引值和长度值截取字符串
// console.log(str.substr(2));//从索引截取到最后
// console.log(str.substr(2,6));//从索引截,长度个字符串
// console.log(str.substr(-3));//后几个
// //substring(); 跟剧索引值和索引值截取字符串
// console.log(str.substring(2)); //从索引截取到最后
// console.log(str.substring(2,5));//从索引截,长度个字符串
// console.log(str.substring(-1)); //全部截取
// console.log(str.substring(5,2));//只能调换
</script>
</body>
</html>
特殊方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//去除前后空格，trim();
// var str1 = " a b c ";
// console.log(str1);
// console.log(str1.trim());
//replace()替换
// var str2 = "Today is fine day,today is fine day a!!!"
// console.log(str2);
// console.log(str2.replace(/today/gi,"tomorrow"));
//字符串变数组split(); 无参，是把字符串作为一个元素添加进数组中。空字符串，分隔字符串中每一个字符，分别添加进入数组中
//指定字符分隔数组：特殊符号将不会出现在数组的任意一个元素中
var str3 = "关羽|张飞|刘备";
console.log(str3);
console.log(str3.split("|"));
</script>
</body>
</html>
大小写和创建标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file"/>
<script>
var str = "abcdEFG";
//转换成小写
console.log(str.toLowerCase());
//转换成大写
console.log(str.toUpperCase());
//校验上传文件格式（图片img/png/jpg/gif）(查找最后一个.截取到最后，判断value属性值)
// document.getElementsByTagName("input")[0].onchange = function () {
// alert(this.value);
// }
var str = "你好";
console.log(str.anchor())
console.log(str.big())
console.log(str.sub())
console.log(str.sup())
console.log(str.link("http://www.baidu.com"));
console.log(str.bold())
</script>
</body>
</html>
字符串案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 截取字符串"我爱你中国，我亲爱的母亲"，中的"中国，我亲爱的"；
var str1 = "我爱你中国，我亲爱的母亲";
var index1 = str1.indexOf("中");
var index2 = str1.indexOf("的");
console.log(str1.slice(index1,index2+1));
// "abcoefoxyozzopp"查找字符串中所有o出现的位置
var str2 = "abcoefoxyozzopp";
for(var i=0;i<str2.length;i++){
//如果指定位置的符号=== "o"
//str2[i]
if( str2.charAt(i)==="o"){
console.log(i);
}
}
// 把字符串中所有的o替换成!
console.log(str2);
console.log(str2.replace(/o/g,"!"));
// 判断一个字符串中出现次数最多的字符，统计这个次数
//定义一个json，然后判断json中是够有该属性，如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
var json = {};
for(var i=0;i<str2.length;i++){
//判断：如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
var key = str2.charAt(i);
if(json[key] === undefined){
json[key] = 1;
}else{
json[key] += 1;
}
}
console.log(json);
//获取json中属性值最大的选项
// var maxKey = "";
// var maxValue = 0;
// for(var k in json){
//// if(maxKey == ""){
//// maxKey = k;
//// maxValue = json[k];
//// }else{
// if(json[k]>maxValue){
// maxKey = k;
// maxValue = json[k];
// }
//// }
// }
// console.log(maxKey);
// console.log(maxValue);
</script>
</body>
</html>
获取节点元素的封装
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
}
</style>
</head>
<body>
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>
<script>
//需求：一个方法，包含三种获取元素节点的功能。通过传递参数的不同，来决定使用哪种获取方法。
//例如： "ibox": getElementById();
//例如： "cbox": getElementsByClassName();
//例如： "tbox": getElementsByTagName();
//化简：使用类似css获取的方式表明使用哪种方式来获取：
// "#box" getElementById();
// ".box" getElementsByClassName();
// "div" getElementsByTagName();
//验证：
getEle("#box").style.backgroundColor = "red";
var claArr = getEle(".box");
for(var i=0;i<claArr.length;i++){
claArr[i].style.backgroundColor = "yellow";
}
var divArr = getEle("div");
for(var i=0;i<divArr.length;i++){
divArr[i].style.border = "2px solid #000";
}
//思路：封装一个方法，然后判断第一个字符，如果是#用id，如果是.用className,否则用tagName
//步骤：
//1.封装一个方法，获取参数的第一个字符
//2.判断第一个字符是#走第一个逻辑，是.走第二个逻辑，如果都不是那么走最后一个逻辑
//3.隐藏：
//1.封装一个方法，获取参数的第一个字符
function getEle(str){
//2.判断第一个字符是#走第一个逻辑，是.走第二个逻辑，如果都不是那么走最后一个逻辑
var str1 = str.charAt(0);
if(str1==="#"){
//3.隐藏：
//返回获取的元素。（因为传递过来的值带有#，所以我们要从第二项开始截取并搜索）
return document.getElementById(str.slice(1));
}else if(str1 === "."){
return document.getElementsByClassName(str.slice(1));
}else{
return document.getElementsByTagName(str);
}
}
</script>
</body>
</html>
获取节点元素的封装
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
}
</style>
</head>
<body>
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>
<script>
//需求：一个方法，包含三种获取元素节点的功能。通过传递参数的不同，来决定使用哪种获取方法。
//例如： "ibox": getElementById();
//例如： "cbox": getElementsByClassName();
//例如： "tbox": getElementsByTagName();
//化简：使用类似css获取的方式表明使用哪种方式来获取：
// "#box" getElementById();
// ".box" getElementsByClassName();
// "div" getElementsByTagName();
//验证：
getEle("#box").style.backgroundColor = "red";
var claArr = getEle(".box");
for(var i=0;i<claArr.length;i++){
claArr[i].style.backgroundColor = "yellow";
}
var divArr = getEle("div");
for(var i=0;i<divArr.length;i++){
divArr[i].style.border = "2px solid #000";
}
//思路：封装一个方法，然后判断第一个字符，如果是#用id，如果是.用className,否则用tagName
//步骤：
//1.封装一个方法，获取参数的第一个字符
//2.判断第一个字符是#走第一个逻辑，是.走第二个逻辑，如果都不是那么走最后一个逻辑
//3.隐藏：
//1.封装一个方法，获取参数的第一个字符
function getEle(str){
//2.判断第一个字符是#走第一个逻辑，是.走第二个逻辑，如果都不是那么走最后一个逻辑
var str1 = str.charAt(0);
if(str1==="#"){
//3.隐藏：
//返回获取的元素。（因为传递过来的值带有#，所以我们要从第二项开始截取并搜索）
return document.getElementById(str.slice(1));
}else if(str1 === "."){
return document.getElementsByClassName(str.slice(1));
}else{
return document.getElementsByTagName(str);
}
}
</script>
</body>
</html>
Math对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//
// var num = 1.4;
var num = -0.6;
console.log(Math.abs(num)); //取绝对值
console.log(Math.floor(num)); //向下取整 //向小取
console.log(Math.ceil(num)); //向上取整 //向大取
console.log(Math.round(num)); //四舍五入取整 //正数四舍五入，负数五舍六入
console.log(Math.random()); //随机数0-1
</script>
</body>
</html>
事件的概述
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//第一种事件绑定的方法容易被层叠。
// btn.onclick = function () {
// console.log("九尺龙泉万卷书，上天生我意何如。");
// }
//
// btn.onclick = function () {
// console.log("不能报国平天下，枉为男儿大丈夫。");
// }
//addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
//第二种事件绑定的方法不会出现层叠。（更适合团队开发）
btn.addEventListener("click",fn1);
btn.addEventListener("click",fn2);
function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}
//调用这是事件源，参数1事件名(不带on) ，参数2事件名(执行函数) 参数3事件名(捕获或者冒泡)
</script>
</body>
</html>
事件的监听原理
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
// btn.addEventListener("click",fn1);
// btn.addEventListener("click",fn2);
fn("click",fn1,btn);
fn("click",fn2,btn);
fn("click",fn3,btn);
function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}
function fn3(){
console.log("111111。");
}
//原理（了解）（自己封装一个）(click)
function fn(str,fn,ele){
//判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
//所以获取旧的事件必须在新的事件绑定之前
var oldEvent = ele["on"+str];
ele["on"+str] = function () {
//不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
//进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
//如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
//如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
if(oldEvent){
//因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
oldEvent();
fn();
}else{
//没有绑定过事件
fn();
}
}
}
</script>
</body>
</html>
事件添加的兼容写法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//火狐谷歌IE9+支持addEventListener
// btn.addEventListener("click",fn1);
// btn.addEventListener("click",fn2);
//IE678支持attachEvent
// btn.attachEvent("onclick",fn1);
// btn.attachEvent("onclick",fn2);
//兼容写法
EventListen = {
addEvent: function (ele,fn,str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
if(ele.addEventListener){
//直接调用
ele.addEventListener(str,fn);
}else if(ele.attachEvent){
ele.attachEvent("on"+str,fn);
}else{
//在addEventListener和attachEvent都不存在的情况下，用此代码
ele["on"+str] = fn;
}
}
}
EventListen.addEvent(btn,fn1,"click")
EventListen.addEvent(btn,fn2,"click")
function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}
</script>
</body>
</html>
事件绑定的兼容写法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
EventListen = {
addEvent: function (ele,fn,str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
if(ele.addEventListener){
//直接调用
ele.addEventListener(str,fn);
}else if(ele.attachEvent){
ele.attachEvent("on"+str,fn);
}else{
//在addEventListener和attachEvent都不存在的情况下，用此代码
ele["on"+str] = fn;
}
},
removeEvent: function (ele,fn,str) {
if(ele.removeEventListener){
ele.removeEventListener(str,fn);
}else if(ele.detachEvent){
ele.detachEvent("on"+str,fn);
}else{
ele["on"+str] = null;
}
}
}
// btn.addEventListener("click",fn);
EventListen.addEvent(btn,fn,"click");
EventListen.removeEvent(btn,fn,"click");
function fn(){
alert(1);
}
//第一种
// btn.onclick = function () {
// alert(1);
// }
// btn.addEventListener("click",fn);
// btn.attachEvent("onclick",fn);
// btn.onclick = null;
//第二种
// btn.removeEventListener("click",fn);
// btn.detachEvent("onclick",fn);
</script>
</body>
</html>
网友评论