目录
mouse鼠标移入移出事件——onmouseover和onmouseout
JavaScript对象
对象的创建和使用
JavaScript中的对象分为3种:内置对象、浏览器对象、自定义对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> //1.使用原始的方式创建对象 var obj = new Object(); obj.name='zhangsan'; obj.age = 20; obj.say = function () { console.log(this.name,":",this.age); } //测试 console.log(obj.name); console.log(obj.age); obj.say(); //2.使用工厂模式创建对象 function createObject(name,age) { var obj = new Object(); obj.name = name; obj.age = age; obj.say = function () { console.log(this.name, ":", this.age); } return obj; } //测试 var ob1 = createObject('lisi',20); console.log(ob1.name); ob1.say(); var ob2 = createObject('wangwu',25); console.log(ob2.name); ob1.say(); console.log("==============="); //3.使用自定义构造函数创建对象 function Stu(name,age) { this.name = name; this.age = age; this.say = function () { console.log(this.name,":",this.age); } } //测试 var s1 = new Stu("zhaoliu",28); var s2 = new Stu("xiaoli",21) s1.say(); s2.say(); console.log("==============="); //4.直接创建自定义对象 var ob = {name:'qq',age:25} console.log(ob.name); console.log(obj.age); var obj={}; obj.name="小白"; obj.say=function () { console.log("我叫: "+this.name); }; obj.say(); var obj2={ name:"小明", age:20, say:function () { console.log("我叫: "+this.name+"; 年龄: "+this.age); }, }; obj2.say(); var a = [10,20,30]; console.log(typeof a); //结果为object类型 console.log(a.constructor == Array); // 使用constructor方法判断具体的数值类型 console.log(s1 instanceof Stu);//判断s1是否为STU类的实例 </script> <body> <h1>JavaScript语言实例--对象的定义和使用</h1> </body> </html>
JavaScript内置对象
Array(数组)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //内置对象--Array数组 var a1 = new Array(); //定义一个空数组 var a2 = new Array(10);//定义一个长度为10(值:undefined) var a3 = new Array(10,20,30);//定义一个指定数值的数组 console.log(a1.length); console.log(a2.length); console.log(a3.length); var a4 = [10,20,30,40,50] // 快捷定义数组 //数组的遍历 for(var i=0;i<a4.length;i++){ console.log(i,"=>",a4[i]); } //以for...in的方式遍历 for(var i in a4){ console.log(i,"=>",a4[i]); } //以foreach的方式进行遍历 a4.forEach(function (v) { console.log(v); }) //数组的方法: console.log(a4.toString());//数组转字符串 console.log(a4.join(":"))//以:为分割符来合并字符串 //数组合并 var a = [1,2,3]; console.log(a.concat(4,5)); var b = [10,50,30,20,70,40]; console.log(b.join(":")); console.log(b.sort().join(":")); //数组排序 console.log(b.reverse().join(":")); //数组反序 var aa = new Array(10,20,30); console.log(aa.join(":")); aa.push(50);//往数组内加值 aa.push(40); console.log(aa.join(":")); aa.pop(); //从数组的尾部删除一个值 console.log(aa.join(":")); //清空 console.log(b.join(":")); b.length=3 console.log(b.join(":")); b = []; console.log(b.join(":")); </script> </head> <body> <h1>数组对象</h1> </body> </html>
Date日期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>JavaScript语言实例--内置对象</h1> </body> <script> //内置对象--Date日期对象 function formatDate (d) { if (!d instanceof Date){ return; } var y = d.getFullYear(), m = d.getMonth()+1, day = d.getDate(), hh = d.getHours(), mm = d.getMinutes(), ss = d.getSeconds(); //判断单位数字前补零操作 m = m<10?'0'+m:m; day = day<10?'0'+day:day; hh = hh<10?'0'+hh:hh; mm = mm<10?'0'+mm:mm; ss = ss<10?'0'+ss:ss; return y+"-"+m+"-"+day+" "+hh+":"+mm+":"+ss; } var dd = new Date(); //从1970年1月1日零时零分0秒至今的毫秒数 document.write("时间戳:"+dd.valueOf()); document.write("<h2>"+formatDate(dd)+"</h2>"); </script> </html>
String字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>JavaScript语言实例--内置对象</h1> </body> <script> //内置对象--String字符串对象 var s1 ="ZhangSanFeng"; document.write(s1+"<br/>"); document.write(s1[5]+"<br/>"); document.write(s1.charAt(5)+"<br/>");//查找指定位置上的字符 document.write(s1.substr(5,3)+"<br/>");//substr(5,3):从第5个字符开始,截取3个字符 document.write(s1.substring(5,8)+"<br/>");//substring(5,8):截取第5-7个字符。(5,8):左闭右开 document.write("小写:"+s1.toLowerCase()+"<br/>"); document.write("大写:"+s1.toUpperCase()+"<br/>"); //字符串查找 document.write(s1.indexOf("an")+"<br/>");//从首字母开始查找,查找an的位置 document.write(s1.lastIndexOf("an")+"<br/>");//从最后的字母开始查找,查找an的位置 //替换 document.write(s1.replace("SanFeng","WuJi")+"<br/>"); //全部替换 document.write("10,20,30,40".replace(/,/g,":"));// replace(/,/g,":"):把所有的,替换成: var str = "10:23:45:67:87:65"; console.log(str); console.log(str.split(":")); var s2 = " zhangsan " console.log("#"+s2+"#"); console.log("#"+s2.trim()+"#"); //trim():删除字符串的头尾空格。 </script> </html>
Math
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>JavaScript语言实例--内置对象</h1> </body> <script> //内置对象--Math对象 console.log(Math.abs(-20)); console.log(Math.ceil(10.00000001));//进一取整 console.log(Math.floor(10.9999999));//舍去求整 console.log(Math.round(10.5));//四舍五入取整 console.log(Math.max(10,20));//最大值 console.log(Math.min(10,20))//最小 console.log(Math.random());//0~1的随机数 console.log(Math.ceil(Math.random()*1000000)%10+1);//1~10的随机数 </script> </html>
JavaScript事件
单击事件与元素操作
<h1 id="hid">JavaScript语言实例--单击事件</h1> <!--按钮称为事件源,单击称为事件,双引号里的内容称为事件处理程序--> <button οnclick="fun()">点击我</button> <ul id="uid"> <li>AAAAA</li> <li>BBBBB</li> <li>CCCCC</li> <li>DDDDD</li> </ul> <ol> <li>1111111</li> <li>2222222</li> </ol> </body> <script> function fun() { console.log('hello js'); //获取id属性为hid的元素标签 var hid = document.getElementById("hid"); //输出元素标签之间的文本内容 console.log(hid.innerHTML); hid.innerHTML = "JavaScript语言实例--元素操作事件"; //改变HTML 元素的样式 hid.style.color = "red"; //在js的命名规范中,是不允许有-出现的,但是css样式里很多样式都含有-, // 我们需要把-去掉,然后第二个单词的首字母大写,这样就可以在JS内使用CSS样式 hid.style.backgroundColor="#ddd"; } //获取当前网页中的所有li元素标签 /*var mlist = document.getElementsByTagName("li");*/ var mlist = document.getElementById("uid").getElementsByTagName("li"); //遍历输出 for (var i in mlist){ if (!isNaN(i)) console.log(mlist[i].innerHTML); mlist[i].style.color="red"; } </script>
Timing定时事件
<h1 >JavaScript语言实例--定时器</h1> <h2 id="hid">计数器:0</h2> <button οnclick="doStop()">停止</button> </body> <script> var m=0,mytime=null; function doRun() { m++; document.getElementById("hid").innerHTML="计数器:"+m; mytime = setTimeout(doRun,1000); //以递归的方式调用一次性定时函数从而实现周期性定时 } doRun(); function doStop() { clearTimeout(mytime); } /* m=0; var mytime = setInterval(function () { m++; document.getElementById('hid').innerHTML = "计数器:"+m; },1000) function doStop() { clearInterval(mytime); }*/ /*//一次性定时3秒后执行参数中的函数 setTimeout(function () { console.log("Hello JS!") },3000); //周期性定时,每隔1秒执行参数回调函数一次 var m = 0; setInterval(function () { m++ console.log("Hello"+m); },1000)*/ </script>
简单计算器的实例
<script> //事件处理函数 function doFun(num) { var m1 = parseInt(document.myform.num1.value); var m2 = parseInt(document.myform.num2.value); switch (num) { case 1: var res = m1+"+"+m2+"="+(m1+m2); break; case 2: var res = m1+"-"+m2+"="+(m1-m2); break; case 3: var res = m1+"*"+m2+"="+(m1*m2); break; case 4: var res = m1+"/"+m2+"="+(m1/m2); break; } //将结果放置在第三个输入框中 document.myform.res.value = res; } </script>
简单操作元素标签
<body> <h1>JavaScript语言实例--js操作元素标签属性(放大和缩小)</h1> <button οnclick="dofun(1)">放大</button> <button οnclick="dofun(2)">缩小</button> <button οnclick="dofun(3)">隐藏</button> <br><br/> <div style="width: 200px;height: 200px;background-color: #ddd;" id="did"></div> </body> <script> var width = 200,height = 200; var did = document.getElementById("did"); function dofun(num) { switch (num) { case 1: width+=10; height+=10; did.style.width = width+"px"; did.style.height = height+"px"; break; case 2: width-=10; height-=10; did.style.width = width+"px"; did.style.height = height+"px"; break; case 3: did.style.display = "none"; break; } } </script>
事件绑定方式
事件源:网页可见的标签
事件:如onclick就是一个单击事件
事件处理程序:写在Js内的事件的响应程序
<body> <h1>JavaScript语言实例--事件处理(事件绑定方式)</h1> <button οnclick="fun()">按钮1</button><!--主动绑定--> <button id="bid">按钮2</button> <!--被动绑定,通过id来绑定--> </body> <script> function fun() { console.log("按钮1被点击了"); } document.getElementById("bid").onclick = function () { console.log("按钮2被点击了"); } </script>
获取事件源对象
<body> <h1>JavaScript语言实例--获取事件源对象</h1> <h2 οnclick="fun(this)">2级标题1</h2> <h2 id="hid">2级标题2</h2> </body> <script> function fun(ob) { console.log("aaaaaaa"); ob.style.color="green"; } document.getElementById("hid").onclick = function () { console.log("bbbbbbbb"); //此种事件绑定方式,this就表示当前事件源对象 this.style.color="red"; } </script>
dbclick双击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul,li{margin: 0px;padding: 0px;} ul{list-style:none;} ul li{height: 30px;margin-top: 4px;background-color: #ddd;} ul li:hover{background-color: #fc0;} </style> </head> <body> <h1>JavaScript语言实例--dblcilck双击事件</h1> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> <script> //获取上面所有的li元素节点 var mlist = document.getElementsByTagName("li"); //遍历绑定事件 for (var i=0;i<mlist.length;i++){ mlist[i].ondblclick = function () { //设置背景颜色 this.style.backgroundColor = "#f0c"; }; } </script> </html>
context鼠标右击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> </head> <style> ul,li{margin: 0px;padding: 0px;} ul{list-style:none;width: 100px;text-align: center;position: absolute;display: none} ul li{height: 30px;line-height:30px;margin-top: 4px;background-color: #ddd;} ul li:hover{background-color: #fc0;} </style> <body> <h1>JavaScript语言实例--contextmenu右击事件</h1> <ul id="uid"> <li>剪切</li> <li>复制</li> <li>粘贴</li> </ul> </body> <script> document.oncontextmenu = function (ent) { //获取兼容的事件对象 var event = ent || window.Event;//window.Event:兼容低版本的浏览器 //获取鼠标在网页中的点击位置 var x = event.clientX; var y = event.clientY; console.log(x,y); var uid = document.getElementById("uid"); uid.style.top = y+"px"; uid.style.left = x+"px"; uid.style.display = "block"; return false;//拦截平时鼠标右击能够显示的菜单 } </script> </html>
mouse鼠标移入移出事件——onmouseover和onmouseout
优酷首页图片轮播实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> </head> <style> div,img,ul,li{margin: 0px;padding: 0px;} #did{width: 384px;height: 240px;} #did img{display: none} #did img:first-child{display:block} /*显示第一张*/ </style> <body> <h1>JavaScript语言实例--mouse鼠标移入和移出事件</h1> <div id="did" οnmοuseοver="doStop()" οnmοuseοut="doStart()"> <img src="./images/11.jpg" width="384"/> <img src="./images/22.jpg" width="384"/> <img src="./images/33.jpg" width="384"/> <img src="./images/44.jpg" width="384"/> </div> </body> <script> var m=1; var mytime = null; //定义函数展示对应的图片 function show(x) { var mlist = document.getElementById("did").getElementsByTagName("img"); for (var i=0;i<mlist.length;i++){ if (x==i+1){ mlist[i].style.display = "block"; }else { mlist[i].style.display = "none"; } } } //开启定时轮播图片 function doStart() { if (mytime == null) { mytime = setInterval(function () { m++; show(m); if (m >= 4) { m = 0; } }, 2000) } } //停止轮播图片 function doStop() { if (mytime != null) clearTimeout(mytime); mytime=null; } doStart(); </script> </html>
图片切换
淘宝京东某商品详情页的图片切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> <style> div,img,ul,li{margin: 0px;padding: 0px;} #did{width: 384px;height: 240px;} #list img{width: 85px;border: 2px solid #fff;margin-right: 2px;} #list img:hover{border:2px solid red} </style> </head> <body> <h1>JavaScript语言实例--onmouseovaer鼠标移入事件</h1> <div id="did"> <img id="mid" src="./images/11.jpg" width="384"/> </div> <div id="list"> <img src="./images/11.jpg" width="384"/> <img src="./images/22.jpg" width="384"/> <img src="./images/33.jpg" width="384"/> <img src="./images/44.jpg" width="384"/> </div> </body> <script> //获取所有小图列表 var mlist = document.getElementById("list").getElementsByTagName("img"); //遍历这些图片 for (var i=0;i<mlist.length;i++){ mlist[i].onmouseover = function () { document.getElementById("mid").src =this.src; } } </script> </html>
放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> <style> div,img,ul,li{margin: 0px;padding: 0px;} #did{width: 300px;height: 300px;overflow: hidden;display: none;position: absolute;} </style> </head> <body> <h1>JavaScript语言实例--图片的放大镜效果</h1> <br/><br/><br/> <img id="mid" src="./images/33.jpg" width="384" height="240"/> <div id="did"> <img src="./images/33.jpg"/> </div> </body> <script> //获取被放大图片和放大镜图片对象 var mid = document.getElementById("mid"); //被放大图片 var did = document.getElementById("did"); //放大镜图片 //为图片添加鼠标移入和移出事件 mid.onmouseover = function () { //对放大镜进行定位 did.style.top = this.offsetTop+"px"; //offsetTop:获取当前对象距离上面多大的尺寸 //相当于上对齐 did.style.left = this.offsetLeft+this.offsetWidth+10+"px"; //offsetWidth:本身宽度 did.style.display="block"; } mid.onmouseout = function () { did.style.display="none"; } //添加鼠标移动事件 mid.onmousemove = function (ent) { //先获取兼容的鼠标事件对象 var event = ent || window.Event; //获取鼠标在图片上的位置 var x = event.clientX - this.offsetLeft; var y = event.clientY - this.offsetTop; //定位放大镜位置 did.scrollTop = y*5 -150; did.scrollLeft = x*5 -150; } </script> </html>
拖动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> <style> div{margin: 0px;padding: 0px;} #did{width: 200px;height: 200px;background-color: #ddd;cursor: move;position: absolute} </style> </head> <body> <h1>JavaScript语言实例--拖动效果</h1> <div id="did"></div> </body> <script> //获取div层对象 var did = document.getElementById("did"); //绑定鼠标按下事件 did.onmousedown = function (ent) { //获取兼容的事件对象 var event = ent || window.Event; //获取鼠标在div层上的位置 var x = event.clientX - this.offsetLeft; var y = event.clientY - this.offsetTop; this.style.backgroundColor = "blue"; //绑定鼠标移动事件 /*如果用did来绑定鼠标事件的话,当鼠标速度过快时移动的图片会丢失*/ document.onmousemove = function (e) { var myevent = e || window.Event; //定位 did.style.top = myevent.clientY-y +"px"; did.style.left = myevent.clientX-x +"px"; } } //绑定鼠标松开事件 did.onmouseup = function () { this.style.backgroundColor = "#ddd"; //取消移动事件 document.onmousemove = null; } </script> </html>
keydown键盘事件
<script> document.onkeydown = function (ent) { //获取兼容的事件对象 var event = ent||window.Event; //输出键盘值 console.log(event.keyCode); } </script>
load事件
作用:当页面加载完了才执行JS程序。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> <script> //当页面加载完成后才自动执行的程序 window.onload = function () { var hid = document.getElementById("hid"); hid.style.color = "red"; } </script> </head> <body> <h1 id="hid">JavaScript语言实例--onload事件</h1> </body> </html>
表单事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> </head> <body> <h1 id="hid">JavaScript语言实例--表单事件</h1> <!--οnsubmit="return false"表示不跳转页面--> <form action="mouse.html" name="myform" method="post" οnsubmit="return doSubmit()"> <!--οnblur="checkUname()":当鼠标离开名字输入框时就验证输入是否正确--> 帐号:<input type="text" name="uname" οnblur="checkUname()"/><br/><br/> 密码:<input type="password" name="upass" οnblur="checkUpass()"/><br/><br/> 邮箱:<input type="text" name="email"/><br/><br/> <input type="submit" name="提交"/> </form> </body> <script> //表单提交事件处理程序 function doSubmit() { return checkUname()&&checkUpass(); } //验证帐号 function checkUname() { var name = document.myform.uname.value; if (name.length<=0){ alert("帐号不可以为空") return false } return true; } //验证密码 function checkUpass() { var password = document.myform.upass.value; if (password.length<6){ alert("密码必须大于等于6位") return false } return true; } </script> </html>
change事件
功能:下拉框操作
<html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> </head> <body> <h1 id="hid">JavaScript语言实例--change事件</h1> <select name="sid" id="sid"> <option value="">-请选择-</option> <option value="1">-北京-</option> <option value="2">-河北-</option> <option value="3">-天津-</option> <option value="4">-河南-</option> <option value="5">-山西-</option> </select> <select id="cid"></select> </body> <script> var data = new Array(); data[1] = ["海淀区","朝阳区","丰台区","昌平区"]; data[2] = ["石家庄","保定","邯郸","邢台"]; data[3] = ["河东区","河西区","河北区","南开区"]; data[4] = ["郑州区","洛阳区","开封","驻马店"]; data[5] = ["太原","大同","吕梁","运城"]; //获取两个下拉框元素对象 var sid = document.getElementById("sid"); var cid = document.getElementById("cid"); //绑定change事件 sid.onchange = function () { //获取下拉框中的值 var v = this.value; cid.length = 0; //删除cid的下拉项 //判断并循环对应城市信息 if (v != ""){ for (var i=0;i<data[v].length;i++){ //创建一个下拉项并添加到cid下拉框中 cid.add(new Option(data[v][i],i)); } } } </script> </html>
scroll事件
<html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> </head> <body> <h1 id="hid">JavaScript语言实例--滚动条事件</h1> <div id="aid" style="height: 500px;width: 700px;background-color: #ddd"></div> <div id="bid" style="height: 500px;width: 700px;background-color: #eee"></div> </body> <script> window.onscroll = function () { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop){ scrollTop = document.documentElement.scrollTop; }else if (document.body){ scrollTop = document.body.scrollTop; } document.getElementById("bid").innerHTML = scrollTop; } </script> </html>
JavaScript BOM操作
BOM(浏览器对象模型Browser Object Model(BOM))
作用:允许JS与浏览器对话,比如一些前进后退的操作。
BOM的window
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript语言实例</title> </head> <body> <h1>JavaScript中的BOM--window</h1> <iframe src="../Event/mouse.html" width="500" height="500"></iframe> <button οnclick="window.open('../Event/mouse.html','aa',width=200,height=200);">打开一个新窗口</button> </body> <script> document.write(window.frames.length); window.alert("ok"); b = window.confirm("确定要删除吗?") if(b){ alert("yes"); }else { alert("no"); } var mstr = window.prompt("请输入你的邮箱?") //prompt:代表输入框 alert(mstr); </script> </html>
BOM的navigator
<script> with(document){ write("你的浏览器信息:<ul>"); write("<li>代码:"+navigator.appCodeName+"</li>"); write("<li>名称:"+navigator.appName+"</li>"); write("<li>版本:"+navigator.appVersion+"</li>"); write("<li>语言:"+navigator.language+"</li>"); write("<li>编译平台:"+navigator.platform+"</li>"); write("<li>用户表头:"+navigator.userAgent+"</li>"); } </script>
BOM的Screen
<script> document.write("屏幕宽度:"+screen.width+"px<br>"); document.write("屏幕高度:"+screen.width+"px<br>"); document.write("屏幕可用宽度:"+screen.availWidth+"px<br>"); document.write("屏幕可以高度:"+screen.availHeight+"px<br>"); document.write("宽度:"+window.innerWidth+"px<br>"); document.write("高度:"+window.innerHeight+"px<br>"); </script>
BOM的history
<h1>JavaScript中的BOM--history对象</h1> <button οnclick="window.history.back();">后退一步</button> <button οnclick="window.history.go(-1);">后退一步</button> <button οnclick="window.history.go(-2);">后退二步</button><br> <button οnclick="window.history.forward();">前进一步</button> <button οnclick="window.history.go(1);">前进一步</button> <button οnclick="window.history.go(2);">前进尾部</button><br> <a href="http://www.baidu.com">百度</a><br>
BOM的location
<body> <h1>JavaScript中的BOM--location对象</h1> <button οnclick="window.location.href='http://baidu.com'">点击跳转到百度</button> <button οnclick="window.location.reload()">刷新</button> <script> document.write("<br>当前地址:"+window.location.href); </script>
JavaScript DOM操作
当页面被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model)
通过HYML DOM,JS能够访问和改变HTML文档的所有元素
HTML DOM模型被结构化为对象数:
对象的HTML DOM树
什么是HTML DOM
DOM 节点
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
-
整个文档是一个文档节点
-
每个 HTML 元素是元素节点
-
HTML 元素内的文本是文本节点
-
每个 HTML 属性是属性节点
-
注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
-
在节点树中,顶端节点被称为根(root)
-
每个节点都有父节点、除了根(它没有父节点)
-
一个节点可拥有任意数量的子
-
同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分,以及节点之间的关系:
节点类型
获取节点实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript中的DOM</title> </head> <body> <h1>JavaScript语言中HTML DOM</h1> <h3>我们重点学习HTML DOM的什么操作</h3> <ul> <li class="cc">JS 能改变页面中的所有 HTML 元素</li> <li>JS 能改变页面中的所有 HTML 属性</li> <li>JS 能改变页面中的所有 CSS 样式</li> <li class="cc">JS 能删除已有的 HTML 元素和属性</li> <li>JS 能添加新的 HTML 元素和属性</li> <li>JS 能对页面中所有已有的 HTML 事件作出反应</li> <li>JS 能在页面中创建新的 HTML 事件</li> </ul> <h3>我们重点学习HTML DOM的什么操作:</h3> <ul> <li>如何改变 HTML 元素的内容</li> <li>如何改变 HTML 元素的样式(CSS)</li> <li>如何对 HTML DOM 事件作出反应</li> <li>如何添加和删除 HTML 元素</li> </ul> <h3>W3C DOM 标准被分为3个不同的部分</h3> <ol id="oid"> <li>Core DOM - 所有文档类型的标准模型</li> <li>XML DOM - XML文档类型的标准模型</li> <li>HTML DOM - HTML文档类型的标准模型</li> </ol> <a id="aid" href="http://www.baidu.com" title="百度链接"></a> </body> <script> var aa = document.getElementById("aid"); console.log(aa); console.log(aa.href); console.log(aa.title); aa.title = "百度22";//修改属性 var h1 = document.getElementsByTagName("h1"); console.log(h1[0]); h1[0].style.color = "red"; var clist = document.getElementsByClassName("cc"); for (var i=0;i<clist.length; i++){ console.log(clist[i]); } var ol = document.getElementById("oid"); var olist = ol.childNodes; console.log(olist.length); for (var i=0;i<olist.length;i++){ console.log(olist[i]); } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript中的DOM</title> </head> <body> <h1>JavaScript语言中HTML DOM</h1> <h3 id="hid">我们重点学习HTML DOM的什么操作</h3> <ul id="uid"> <li>如何改变 HTML 元素的内容</li> <li>如何改变 HTML 元素的样式(CSS)</li> <li>如何对 HTML DOM 事件作出反应</li> <li>如何添加和删除 HTML 元素</li> </ul> </body> <script> //获取h3元素节点对象 var hid = document.getElementById("hid"); //输出当前节点的名字,值和类型 console.log(hid.nodeName); //H3 console.log(hid.nodeValue); //null console.log(hid.nodeType); //1 //获取当前节点对象的第一个子节点的值和类型 console.log(hid.childNodes[0].nodeValue); //就是内容 console.log(hid.childNodes[0].nodeType); //3 </script> </html>
DOM之a链操作
<body> <h1>JavaScript语言中 DOM 操作</h1> <ul> <li><a href="https://www.baidu.com">百度</a> </li> <li><a href="https://www.163.com">网易</a> </li> <li><a href="https://www.sina.com">新浪</a> </li> <li><a href="https://www.qq.com">腾讯</a> </li> </ul> </body> <script> //获取当前页面中的所有链接 //var alist = document.getElementsByTagName("a"); var alist = document.links; for (var i=0;i<alist.length;i++) { console.log(alist[i].href,alist[i].innerHTML); alist[i].title = alist[i].innerHTML+"的链接"; } </script>
DOM之img图片操作
<body> <h1>JavaScript语言中HTML DOM 操作--图片延迟加载</h1> <img src="./images/HLL-11_xuandong.gif" res="./images/11.jpg"/> <img src="./images/HLL-11_xuandong.gif" res="./images/22.jpg"/> <img src="./images/HLL-11_xuandong.gif" res="./images/33.jpg"/> <img src="./images/HLL-11_xuandong.gif" res="./images/44.jpg"/> </body> <script> setTimeout(function () { //获取网页中所有的图片 var mlist = document.images; //遍历 for(var i=0;i<mlist.length;i++){ //res不是img本身固有的属性,而是我们自己创造的属性名字,只能通过getAttribute()的方式进行获取 mlist[i].src = mlist[i].getAttribute("res"); mlist[i].width=100; } },3000); </script>
DOM之form表单操作
<body> <h1>JavaScript语言中HTML DOM 操作</h1> <form></form> <form action="img.html" method="post" name="myform"> 账号:<input type="text" name="uname" value="wangwu7"/><br/> </form> <button οnclick="doSubmit()">点击提交</button> </body> <script> console.log(document.forms.length); //获取上面form表单中账号信息 console.log(document.forms[1].uname.value); console.log(document.forms.item(1).uname.value); console.log(document.myform.uname.value); console.log(document['myform'].uname.value); console.log(document.forms.myform.uname.value); console.log(document.forms['myform'].uname.value); function doSubmit() { document.myform.action = "introduction.html"; document.myform.method = "get"; //get:使输入的参数在网页地址栏可见 document.myform.submit(); //获取form表单并执行提交 } </script>
DOM之input多选框操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript中的DOM</title> </head> <body> <h1>JavaScript语言中HTML DOM 操作</h1> <ul> <li><input type="checkbox" name="likes[]" value="篮球">篮球</li> <li><input type="checkbox" name="likes[]" value="足球">足球</li> <li><input type="checkbox" name="likes[]" value="羽毛球">羽毛球</li> <li><input type="checkbox" name="likes[]" value="乒乓球">乒乓球</li> <li><input type="checkbox" name="likes[]" value="棒球">棒球</li> </ul> <button οnclick="dofun()">获取</button> </body> <script> function dofun() { //获取网页中所有input标签 var list = document.getElementsByTagName("input"); var res = new Array(); //遍历 for (var i=0;i<list.length;i++){ //判断是否是多选框并且已选中 if(list[i].type == "checkbox" && list[i].checked){ res.push(list[i].value); } } alert(res); } </script> </html>
DOM之select多选下拉框操作
功能:下拉框选项的移入移出。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript中的DOM</title> <style> select{width: 100px;height: 200px;border: 1px solid #ddd;float: left;} div{width: 100px;height: 200px;float: left;text-align: center;padding-top: 50px;} </style> </head> <body> <h1>JavaScript语言中HTML DOM 操作</h1> <select id="sid1" size="10" multiple> <option value="0">邓丽君</option> <option value="1">张国荣</option> <option value="2">梅艳芳</option> <option value="3">黄家驹</option> <option value="4">迈克尔.杰克逊</option> <option value="5">姚贝娜</option> <option value="6">张雨生</option> </select> <div> <button οnclick="doMove('sid1','sid2')">>></button> <br><br><br><br> <button οnclick="doMove('sid2','sid1')"><<</button> </div> <select id="sid2" size="10" multiple></select> </body> <script> function doMove(d1,d2) { //分别获取两个下拉框的元素节点对象 var select1 = document.getElementById(d1); var select2 = document.getElementById(d2); //获取第一个下拉框中所有的下拉项 var olist = select1.options; //遍历 for (var i=0;i<olist.length;i++){ //console.log(olist[i].value); //判断当前新是否被选中 if (olist[i].selected){ olist[i].selected = false;//取消选中 var ob = olist[i]; select1.remove(i);//从选项框中移除第i个下拉项内容 select2.add(ob);//往选项框中添加下拉项内容 i--; } } } </script> </html>
DOM之table表格操作
功能:表格的增删
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript中的DOM</title> <style> select,option,div,button{margin:0px;padding:0px;} #lid,#rid,div{ width:80px; height:260px; float:left; } div{ text-align:center; padding-top:60px; } </style> </head> <body> <h1>JavaScript语言中HTML DOM 操作-table对象</h1> <table id="tid" width="500" border="1"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1001</td> <td>张三</td> <td>男</td> <td>20</td> <td><button οnclick="dodel(this)">删除</button></td> </tr> <tr> <td>1002</td> <td>李四</td> <td>女</td> <td>21</td> <td><button οnclick="dodel(this)">删除</button></td> </tr> <tr> <td>1003</td> <td>王五</td> <td>男</td> <td>22</td> <td><button οnclick="dodel(this)">删除</button></td> </tr> </tbody> </table> <br/><br/><br/> <h2>添加学生信息</h2> <form action="#" name="myform" οnsubmit="return doAdd()"> 学号:<input type="text" name="sno"/><br/><br/> 姓名:<input type="text" name="name"/><br/><br/> 性别:<input type="text" name="sex"/><br/><br/> 年龄:<input type="text" name="age"/><br/><br/> <input type="submit" value="添加"/> </form> </body> <script> //执行数据删除操作 function dodel(bt) { //获取当前表格元素节点对象 var tab = document.getElementById("tid"); tab.deleteRow(bt.parentNode.parentNode.rowIndex); } function doAdd() { //获取输入框的内容 var sno = document.myform.sno.value; var name = document.myform.name.value; var sex = document.myform.sex.value; var age = document.myform.age.value; //获取当前表格对象并申请添加一行 var row = document.getElementById("tid").insertRow(); //为当前行添加一个个字段信息 row.insertCell(0).innerHTML = sno; row.insertCell(1).innerHTML = name; row.insertCell(2).innerHTML = sex; row.insertCell(3).innerHTML = age; row.insertCell(4).innerHTML = '<button οnclick="dodel(this)">删除</button>'; //情况form表单 document.myform.reset(); return false;//不让表单跳转 } </script> </html>
XML DOM
什么是XML DOM
XML DOM 定义了访问和处理 XML 文档的标准方法。
XML DOM 是 XML Document Object Model 的缩写,即 XML 文档对象模型。
XML DOM 是:
-
用于 XML 的标准对象模型
-
用于 XML 的标准编程接口
-
中立于平台和语言
-
W3C 的标准
XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法(接口)。
nodeName 属性
nodeName 属性规定节点的名称。
-
nodeName 是只读的
-
元素节点的 nodeName 与标签名相同
-
属性节点的 nodeName 是属性的名称
-
文本节点的 nodeName 永远是 #text
-
文档节点的 nodeName 永远是 #document
nodeValue 属性
nodeValue 属性规定节点的值。
-
元素节点的 nodeValue 是 undefined
-
文本节点的 nodeValue 是文本自身
-
属性节点的 nodeValue 是属性的值
XML DOM节点的遍历
<body> <h1>XML DOM:节点的遍历</h1> <ul id="uid"> <li>成龙</li> <li>甄子丹</li> <li>李连杰</li> <li>宋小宝</li> </ul> </body> <script> //获取ul中的所以li节点 var list = document.getElementById("uid").getElementsByTagName("li"); console.log("节点数量:",list.length); //通过子节点获取 var list2 = document.getElementById("uid").childNodes; console.log("节点数量:",list2.length); //节点的遍历 for(var i=0;i<list2.length;i++){ //判断是否为元素节点 if (list2[i].nodeType == 1) { //console.log(list2[i].innerHTML);//HTML DOM获取内容 console.log(list2[i].firstChild.nodeValue);//XML DOM获取内容 } } </script>
XML DOM节点的删除
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript中的XML DOM</title> <style> ul{list-style:none;} ul li{line-height:30px;background-color:#ddd;margin-top:2px;} ul li:hover{background-color:#fc0;} ul li.cc{background-color:#f0c;} </style> </head> <body> <h1>XML-DOM:节点的删除</h1> <ul id="uid"> <li>成龙</li> <li>甄子丹</li> <li>李连杰</li> <li>宋小宝</li> <li>成龙</li> <li>甄子丹</li> <li>李连杰</li> <li>宋小宝</li> </ul> <button οnclick="doDel()">删除</button> </body> <script> //获取所有ul中的li节点并绑定点击事件 var list = document.getElementsByTagName("li"); for (var i=0;i<list.length;i++){ list[i].onclick = function () { this.setAttribute("class","cc") //鼠标点击了之后就会更改属性 } } //执行节点删除函数 function doDel() { var list2 = document.getElementsByTagName("li"); //遍历 for (var i=0;i<list2.length;i++){ //判断当前li是否有class属性值为cc的 if(list2[i].getAttribute("class")=="cc"){ //执行删除 list2[i].parentNode.removeChild(list2[i]); i--; } } } </script> </html>
XML DOM节点属性操作
<body> <h1>XML-DOM:改变节点的属性 </h1> <a id="aid" href="http://www.baidu.com">百度</a> </body> <script> //获取上面超链接a元素节点 var a = document.getElementById("aid"); //通过已知的HTML DOM操作a节点属性 console.log(a.href); a.title = "百度网址"; // a.aa="bb";//添加aa属性值为bb 无效的操作 //使用XML DOM操作节点a的属性 console.log(a.getAttribute("href")); a.setAttribute("aa","bb"); //通过XML DOM可以添加任何属性和值 </script>
XML DOM节点的创建
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript中的XML DOM</title> <style> ul{list-style:none;} ul li{line-height:30px;background-color:#ddd;margin-top:2px;width:100px;} </style> </head> <body> <h1>XML-DOM:节点的创建</h1> <ul id="uid"> <li>成龙</li> <li>甄子丹</li> <li>李连杰</li> <li>宋小宝</li> </ul> 名称:<input id="nid" type="text" size="10" name="name"/> <button οnclick="doAdd()">添加</button> </body> <script> function doAdd() { //获取输入框中的信息 var name = document.getElementById("nid").value; //获取ul元素节点对象 var ul = document.getElementById("uid"); //创建一个文本节点 var tt = document.createTextNode(name); //创建一个元素节点 var li = document.createElement("li"); //相当于创建了一个<li><li> //将文本节点添加到li元素节点中 li.appendChild(tt); //将li节点添加到ul中 //ul.appendChild(li); //后追加 ul.insertBefore(li,ul.firstChild);//前插入 } </script> </html>
XML DOM节点的克隆
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript中的XML DOM</title> <style> #did{width:400px;height:300px;border:1px solid blue;} img{width:80px;border:2px solid #fff;margin:2px;} img:hover{border:2px solid red;} </style> </head> <body> <h1>XML-DOM:节点的克隆</h1> <div id="did"></div> <div id="mid"> <img src="./images/11.jpg"/> <img src="./images/22.jpg"/> <img src="./images/33.jpg"/> <img src="./images/44.jpg"/> </div> <h4>双击图片可实现图片的添加</h4> </body> <script> //获取mid中的所有图片节点 var list = document.getElementById("mid").getElementsByTagName("img"); //遍历添加鼠标双击事件 for (var i =0;i<list.length;i++){ list[i].ondblclick = function () { //获取did节点 var did = document.getElementById("did"); //将当前图片节点克隆一份添加到did元素节点中 did.appendChild(this.cloneNode()); } } </script> </html>
XML DOM节点的替换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript中的XML DOM</title> <style> #did{width:400px;border:1px solid blue;} #did img{width:400px;} #mid img{width:80px;border:2px solid #fff;margin:2px;} #mid img:hover{border:2px solid red;} </style> </head> <body> <h1>XML-DOM:节点的替换</h1> <div id="did"><img src="./images/11.jpg"/></div> <div id="mid"> <img src="./images/11.jpg"/> <img src="./images/22.jpg"/> <img src="./images/33.jpg"/> <img src="./images/44.jpg"/> </div> <h4>双击图片可实现图片的替换</h4> </body> <script> //获取id属性值为did的节点对象 var did = document.getElementById("did"); //获取id属性值为mid节点中的所有图片img元素节点 var list = document.getElementById("mid").getElementsByTagName("img"); //遍历图片节点,并绑定鼠标双击事件 for (var i=0;i<list.length;i++){ list[i].ondblclick = function () { did.replaceChild(this.cloneNode(),did.firstChild); //子节点替换 } } </script> </html>
XML DOM操作select选项
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript中的XML DOM</title> <style> select{width:100px;height:200px;border:1px solid #ddd;float:left;} div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;} </style> </head> <body> <h1>XML DOM 操作-select对象</h1> <select id="sid1" size="10" multiple> <option value="0">邓丽君</option> <option value="1">张国荣</option> <option value="2">梅艳芳</option> <option value="3">黄家驹</option> <option value="4">迈克尔.杰克逊</option> <option value="5">姚贝娜</option> <option value="6">张雨生</option> </select> <div> <button οnclick="doMove('sid1','sid2')">>></button> <br/><br/><br/><br/> <button οnclick="doMove('sid2','sid1')"><<</button> </div> <select id="sid2" size="10" multiple></select> </body> <script> function doMove(d1,d2) { //获取对应的下拉框节点对象 var selece1 = document.getElementById(d1); var selece2 = document.getElementById(d2); //获取第一个下拉框中的所有option下拉项节点对象 var list = selece1.getElementsByTagName("option"); //遍历并判断是否选中 for (var i=0;i<list.length;i++){ if (list[i].selected){ list[i].selected = false; selece2.appendChild(list[i]);//使用XML DOM移动下拉项 i--; } } } </script> </html>
作业
轮播图
htm界面
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" href="mystyle.css"> <!--导入外部样式表--> <!--<style type="text/css"> *{ padding:0; margin:0; list-style:none; border:0;} .all{ height:400px; width:900px; padding:7px; border:1px solid #ccc; margin:100px auto; position:relative; } .screen{ height:400px; width:900px; overflow:hidden; position:relative; } .screen li{height:400px;width:900px; overflow:hidden; float:left;} .screen ul{ position:absolute; left:0; top:0px; width:3000px;} .all ol{ position:absolute; left:10px; bottom:10px; line-height:20px; text-align:center;} .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;} /*每一个圆点的设置*/ .all ol li{float:left; border-radius: 50%; /* border-radius:圆⻆处理 将边框圆角设置为50%即为小圆点*/ width: 10px; height: 10px; background:rgba(225,225,225,0.4); border: 1px #ccc; margin: 0px 4px 0px 4px; cursor: pointer; } .all ol li.current{ background-color:white ; border: 2px #ccc; } #arr {display: none;} #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;} #arr #right{right:5px; left:auto;} </style>--> <script> window.onload = function () { //需求:无缝滚动。 //思路:赋值第一张图片放到ul的最后,然后当图片切换到第五张的时候 // 直接切换第六章,再次从第一张切换到第二张的时候先瞬间切换到 // 第一张图片,然后滑动到第二张 //步骤: //1.获取事件源及相关元素。(老三步) //2.复制第一张图片所在的li,添加到ul的最后面。 //3.给ol中添加li,ul中的个数-1个,并点亮第一个按钮。 //4.鼠标放到ol的li上切换图片 //5.添加定时器 //6.左右切换图片(鼠标放上去隐藏,移开显示) //1.获取屏幕,有序列表,无序列表等事件源以及可见区域宽度 /* screen:轮播图显示区域 ul:原始图片列表 ol:轮播图图片列表 div:左右切换按钮块 imgWidth:可见屏幕宽度 */ var screen = document.getElementById("screen"); /*screen.children是一个collection集合类型*/ var ul = screen.children[0]; var ol = screen.children[1]; var div = screen.children[2];/*左右按钮块*/ var imgWidth = screen.offsetWidth; /*screen.offsetWidth:可见区域的宽(包括边线的宽)*/ //2.复制第一张图片所在的li,添加到ul的最后面。 var tempLi = ul.children[0].cloneNode(true); ul.appendChild(tempLi); //3.给ol中添加li,ul中的个数-1个,并点亮第一个按钮。 for(var i = 0; i < ul.children.length - 1; i++) { var newOlLi = document.createElement("li"); //创建新的li节点 ol.appendChild(newOlLi); } var olLiArr = ol.children;//获取ol>li事件源 olLiArr[0].className = "current"; //将展示的第一张图的class属性设置为current,即点亮圆点 //4.鼠标放到ol的li上切换图片 for(var i = 0, len = olLiArr.length; i < len; i++) { olLiArr[i].index = i; olLiArr[i].onmouseover = function (ev) { for(var j = 0; j < len; j++) { olLiArr[j].className = ""; //移除当前展示图片的class属性,即熄灭圆点 } this.className = "current"; key = square = this.index; animate(ul, -this.index * imgWidth); } } // 5.添加定时器 var key = 0; //熄灭的圆点的索引 var square = 0; //点亮的圆点的索引 var timer = setInterval(autoPlay, 3000); //鼠标移入 screen.onmouseover = function (ev) { clearInterval(timer); //清除定时器,即鼠标移入时,画面停止播放 div.style.display = "block"; //鼠标移入时显示左右div块 } //鼠标移出 screen.onmouseout = function (ev) { timer = setInterval(autoPlay, 3000); //设置定时器,即鼠标移出时,画面自动播放 div.style.display = "none"; //鼠标移出时隐藏左右div块 } //6.左右切换图片(鼠标放上去隐藏,移开显示) var divArr = div.children; //获取左右切换按钮节点 divArr[0].onclick = function (ev) { key--; if(key < 0) { ul.style.left = -(ul.children.length-1) * imgWidth + "px"; //向左移动图片 key = 6; } animate(ul, -key * imgWidth); square--; if(square < 0) { square = 6; } for(var k = 0; k < len; k++) { olLiArr[k].className = ""; } olLiArr[square].className = "current"; } //因为轮播图默认向右移动图片,所有向右移动按钮直接绑定一个自动播放的点击事件 divArr[1].onclick = autoPlay; function autoPlay() { key++; //当不满足下面的条件是时候,轮播图到了最后一个孩子,进入条件中后,瞬移到 //第一张,继续滚动。 if(key > ul.children.length - 1) { ul.style.left = 0; key = 1; } animate(ul, -key * imgWidth); square++; if(square > 6) { square = 0; } for(var k = 0; k < len; k++) { olLiArr[k].className = ""; } olLiArr[square].className = "current"; } function animate(ele,target){ clearInterval(ele.timer); var speed = target>ele.offsetLeft?10:-10; ele.timer = setInterval(function () { var val = target - ele.offsetLeft; ele.style.left = ele.offsetLeft + speed + "px"; if(Math.abs(val)<Math.abs(speed)){ ele.style.left = target + "px"; clearInterval(ele.timer); } },10) } } </script> </head> <body> <div class="all" id='all'> <div class="screen" id="screen"> <ul id="ul"> <li><img src="images/1.jpg" height="200" width="500" /></li> <li><img src="images/2.jpg" height="200" width="500" /></li> <li><img src="images/3.jpg" height="200" width="500" /></li> <li><img src="images/4.jpg" height="200" width="500" /></li> <li><img src="images/5.jpg" height="200" width="500" /></li> <li><img src="images/6.jpg" height="200" width="500" /></li> </ul> <ol> </ol> <div id="arr"> <span id="left"><</span> <span id="right">></span> </div> </div> </div> </body> </html>
CSS样式设置
*{ padding:0; margin:0; list-style:none; border:0;} .all{ width:500px; height:200px; padding:7px; border:1px solid #ccc; margin:100px auto; position:relative; } .screen{ width:500px; height:200px; overflow:hidden; position:relative; } .screen li{ width:500px; height:200px; overflow:hidden; float:left;} .screen ul{ position:absolute; left:0; top:0px; width:3000px;} .all ol{ position:absolute; left:10px; bottom:10px; line-height:20px; text-align:center;} .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;} /*每一个圆点的设置*/ .all ol li{float:left; border-radius: 50%; /* border-radius:圆?处理 将边框圆角设置为50%即为小圆点*/ width: 10px; height: 10px; background:rgba(225,225,225,0.4); border: 1px #ccc; margin: 0px 4px 0px 4px; cursor: pointer; } .all ol li.current{ background-color:white ; border: 2px #ccc; } #arr {display: none;} #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;} #arr #right{right:5px; left:auto;}
文件树
点名器
HTML界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fefje</title> <link rel="stylesheet" href="callerCss.css"> <!--导入外部样式表--> </head> <body> <div id="main"> <div id="box">随机点名器</div> <button id="bt" οnclick="doit()">开始</button> </div> </body> <script> //准备数据,用数组保存学生姓名 var nameArr = ["王一","赵二","张三","李四","吴五","大头六","西洋菜","吕伟杰","李海超"] //获取节点对象 var btNode = document.getElementById("bt"); var boxNode = document.getElementById("box") var timer var flag = 1 //点击开始按钮 function doit() { if (flag) { start(); btNode.style.backgroundColor = "red"; btNode.innerText = "暂停"; flag = 0; }else{ stop(); btNode.style.backgroundColor = "green"; btNode.innerText = "开始"; flag = 1; } } //点击开始后开始做的事 设置定时任务随机抽取学生 function start() { timer = setInterval(function () { var num =random(0,nameArr.length); boxNode.innerText = nameArr[num]; },85) } //点击暂停,清除计时器 function stop() { clearInterval(timer); } //产生随机数 function random(a,b) { return parseInt(Math.random()*(b-a)+a); } </script> </html>
CSS样式设置
*{ margin: 0; padding: 0; } /*外面的长方形*/ #main{ margin: 100px auto; background: #df5000; width: 520px ; padding: 50px; border-radius: 10px; box-shadow:0 2px 12px #666666; /*背景阴影*/ } /*里面显示名字的部分*/ #box{ margin: 20px auto; background: #ddd; width: 300px ; padding: 20px; border-radius: 10px; font-size: 40px; font-weight: bold;/*字体加粗*/ text-align: center; box-shadow:0 2px 12px #666666; /*背景阴影*/ } /*按钮部分*/ #bt{ margin: 20px 220px 5px 220px; background: green; width: 60px ; padding: 5px; border-radius: 5px; font-size: 20px; text-align: center; box-shadow:0 2px 12px #666666; /*背景阴影*/ cursor: pointer; }