一.前言
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
二.查找 HTML 元素
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
例;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <p class="intro">你好世界!</p> <p>该实例展示了 <b>getElementsByTagName</b> 方法</p> <div>该实例展示了 <b>getElementsByClassName</b> 方法!</div> <p id="value">该实例展示了 <b>getElementById</b> 方法</p> <script> x=document.getElementsByClassName("intro"); y=document.getElementsByTagName(‘div‘); z=document.getElementById("value"); document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>"); document.write(‘<p>文本来自div标签‘ + y[0].innerHTML + "</p>"); document.write(‘<p>文本来自id为value的内容;‘ + z.innerHTML + "</p>"); </script> </body> </html>
查找HTML元素
2.2间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
三.操作
1.内容
innerText 文本 outerText innerHTML HTML内容 innerHTML value 值
例 :
<html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="新文本!"; </script> </body> </html>
更改HTML元素内容
<!DOCTYPE html> <html> <body> <img id="image" src="smiley.gif"> <script> document.getElementById("image").src="landscape.jpg"; </script> </body> </html>
更改属性
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
更改输出流
2.属性
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性 /* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById(‘n1‘).setAttributeNode(atr); */
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1" > <thead> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> </tbody> </table> <script> function CheckAll(ths){ var tb = document.getElementById(‘tb‘); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0]; inp.checked = true; } } } function CancelAll(ths){ var tb = document.getElementById(‘tb‘); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0]; inp.checked = false; } } } function ReverseCheck(ths){ var tb = document.getElementById(‘tb‘); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0]; if(inp.checked){ inp.checked = false; }else{ inp.checked = true; } } } } </script> </body> </html>
Demo
3.class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
例:
<html> <body id="myid" class="mystyle"> <script type="text/javascript"> x=document.getElementsByTagName(‘body‘)[0]; document.write("Body CSS class: " + x.className); document.write("<br />"); document.write("An alternate way: "); document.write(document.getElementById(‘myid‘).className); </script> </body> </html>
获取类名
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <style> .mystyle { width: 300px; height: 50px; background-color: coral; color: white; font-size: 25px; } </style> </head> <body> <p>点击按钮为 DIV 元素添加 "mystyle" 类。</p> <button onclick="myFunction()">点我</button> <div id="myDIV"> 我是一个 DIV 元素。 </div> <script> function myFunction() { document.getElementById("myDIV").classList.add("mystyle"); } </script> </body> </html>
classList.add
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <style> .mystyle { width: 300px; height: 50px; background-color: coral; color: white; font-size: 25px; } .delcss{ background-color: gray; font-size: 40px; } </style> </head> <body> <p>点击按钮为 DIV 元素添加 "mystyle" 类。</p> <button onclick="myFunction()">点我</button> <div id="myDIV"> 我是一个 DIV 元素。 </div> <div id="delcss" class="delcss"> 删除样式 </div> <script> function myFunction() { document.getElementById("myDIV").classList.add("mystyle"); document.getElementById("delcss").classList.remove("delcss") } </script> </body> </html>
删除类
<!DOCTYPE html> <html lang="en"> <!--弹框--> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{display: none} .c1{ position: fixed; background: rgba(0,0,0,.6); left: 0; top:0; bottom: 0; right: 0; z-index: 2; } .c2{ position: fixed; background-color: white; height: 300px; width: 300px; top:50%; left:50%; margin-top: -150px; margin-left: -150px; z-index: 3; } </style> </head> <body> <div> <table> <tr> <td>1</td> <td>2</td> <td> <input type="button" value="点我" onclick="Show();"> </td> </tr> <tr> <td>1</td> <td>2</td> <td> <input type="button" value="点我" onclick="Show();"> </td> </tr> <tr> <td>1</td> <td>2</td> <td> <input type="button" value="点我" onclick="Show();"> </td> </tr> </table> </div> <div id="shade" class="c1 hide"></div> <div id="modal" class="c2 hide"> <p>用户:<input type="text"/></p> <p>密码:<input type="password"/></p> <p> <input type="button" value="确定"> <input type="button" value="取消" onclick="Hide();"> </p> </div> <script> function Show() { document.getElementById("shade").classList.remove(‘hide‘); document.getElementById("modal").classList.remove(‘hide‘); } function Hide() { document.getElementById("shade").classList.add(‘hide‘); document.getElementById("modal").classList.add(‘hide‘); } </script> </body> </html>
弹框实例
4.标签操作
a.创建标签
// 方式一 var tag = document.createElement(‘a‘) tag.innerText = "Test" tag.className = "c1" tag.href = "http://www.cnblogs.com/test" // 方式二 var tag = "<a class=‘c1‘ href=‘http://www.cnblogs.com/test‘>test</a>"
b.操作标签
// 方式一 var obj = "<input type=‘text‘ />"; xxx.insertAdjacentHTML("beforeEnd",obj); xxx.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘)) //注意:第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘ // 方式二 var tag = document.createElement(‘a‘) xxx.appendChild(tag) xxx.insertBefore(tag,xxx[1])
5、样式操作
改变 HTML 元素的样式
document.getElementById(id).style.property=新样式
例;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script> <p>以上段落通过脚本修改。</p> </body> </html>
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" /> <script> function Focus(ths){ ths.style.color = "black"; if(ths.value == ‘请输入关键字‘ || ths.value.trim() == ""){ ths.value = ""; } } function Blur(ths){ if(ths.value.trim() == ""){ ths.value = ‘请输入关键字‘; ths.style.color = ‘gray‘; }else{ ths.style.color = "black"; } } </script>
demo
6、位置操作
总文档高度 document.documentElement.offsetHeight 当前文档占屏幕高度 document.documentElement.clientHeight 自身高度 tag.offsetHeight 距离上级定位高度 tag.offsetTop 父定位标签 tag.offsetParent 滚动高度 tag.scrollTop /* clientHeight -> 可见区域:height + padding clientTop -> border高度 offsetHeight -> 可见区域:height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高:height + padding scrollTop -> 滚动高度 特别的: document.documentElement代指文档根节点 */
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body style="margin: 0;"> <div style="height: 900px;"> </div> <div style="padding: 10px;"> <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;"> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> </div> </div> <script> var i1 = document.getElementById(‘i1‘); console.log(i1.clientHeight); // 可见区域:height + padding console.log(i1.clientTop); // border高度 console.log(‘=====‘); console.log(i1.offsetHeight); // 可见区域:height + padding + border console.log(i1.offsetTop); // 上级定位标签的高度 console.log(‘=====‘); console.log(i1.scrollHeight); //全文高:height + padding console.log(i1.scrollTop); // 滚动高度 console.log(‘=====‘); </script> </body> </html>
test
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; } </style> <body onscroll="ScrollEvent();"> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div> </div> <script> function ScrollEvent(){ var bodyScrollTop = document.body.scrollTop; if(bodyScrollTop>50){ document.getElementsByClassName(‘catalog‘)[0].classList.add(‘fixed‘); }else{ document.getElementsByClassName(‘catalog‘)[0].classList.remove(‘fixed‘); } } </script> </body> </html>
Demo-滚动固定
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } h1{ padding: 0; margin: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; border: 1px solid red; } </style> <body onscroll="ScrollEvent();"> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog" id="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content" id="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div> </div> <script> function ScrollEvent(){ var bodyScrollTop = document.body.scrollTop; if(bodyScrollTop>50){ document.getElementsByClassName(‘catalog‘)[0].classList.add(‘fixed‘); }else{ document.getElementsByClassName(‘catalog‘)[0].classList.remove(‘fixed‘); } var content = document.getElementById(‘content‘); var sections = content.children; for(var i=0;i<sections.length;i++){ var current_section = sections[i]; // 当前标签距离顶部绝对高度 var scOffTop = current_section.offsetTop + 60; // 当前标签距离顶部,相对高度 var offTop = scOffTop - bodyScrollTop; // 当前标签高度 var height = current_section.scrollHeight; if(offTop<0 && -offTop < height){ // 当前标签添加active // 其他移除 active var menus = document.getElementById(‘catalog‘).children; var current_menu = menus[i]; current_menu.classList.add(‘active‘); for(var j=0;j<menus.length;j++){ if(menus[j] == current_menu){ }else{ menus[j].classList.remove(‘active‘); } } break; } } } </script> </body> </html>
Demo-滚动菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } h1{ padding: 0; margin: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; border: 1px solid red; } </style> <body onscroll="ScrollEvent();"> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog" id="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content" id="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section" style="height: 200px;"> <h1>第三章</h1> </div> </div> </div> </div> <script> function ScrollEvent(){ var bodyScrollTop = document.body.scrollTop; if(bodyScrollTop>50){ document.getElementsByClassName(‘catalog‘)[0].classList.add(‘fixed‘); }else{ document.getElementsByClassName(‘catalog‘)[0].classList.remove(‘fixed‘); } var content = document.getElementById(‘content‘); var sections = content.children; for(var i=0;i<sections.length;i++){ var current_section = sections[i]; // 当前标签距离顶部绝对高度 var scOffTop = current_section.offsetTop + 60; // 当前标签距离顶部,相对高度 var offTop = scOffTop - bodyScrollTop; // 当前标签高度 var height = current_section.scrollHeight; if(offTop<0 && -offTop < height){ // 当前标签添加active // 其他移除 active // 如果已经到底部,现实第三个菜单 // 文档高度 = 滚动高度 + 视口高度 var a = document.getElementsByClassName(‘content‘)[0].offsetHeight + 60; var b = bodyScrollTop + document.documentElement.clientHeight; console.log(a+60,b); if(a == b){ var menus = document.getElementById(‘catalog‘).children; var current_menu = document.getElementById(‘catalog‘).lastElementChild; current_menu.classList.add(‘active‘); for(var j=0;j<menus.length;j++){ if(menus[j] == current_menu){ }else{ menus[j].classList.remove(‘active‘); } } }else{ var menus = document.getElementById(‘catalog‘).children; var current_menu = menus[i]; current_menu.classList.add(‘active‘); for(var j=0;j<menus.length;j++){ if(menus[j] == current_menu){ }else{ menus[j].classList.remove(‘active‘); } } } break; } } } </script> </body> </html>
Demo-滚动高度
7.提交表单
document.geElementById(‘form‘).submit()
8.其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
四.事件
对于事件需要注意的要点:
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签,event封装了当前事件的内容
实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <h1 onclick="this.innerHTML=‘Ooops!‘">点击文本!</h1> </body> </html>
onclick事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <head> <script> function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 输入你的名字: <input type="text" id="fname" onchange="myFunction()"> <p>字母变大写</p> </body> </html>
onchange事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> <script> function mOver(obj){ obj.innerHTML="Thank You" } function mOut(obj){ obj.innerHTML="Mouse Over Me" } </script> </body> </html>
onmouse事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <h1 onmouseover="style.color=‘red‘"onmouseout="style.color=‘black‘">将鼠标移至文部上</h1> </body> </html>
鼠标事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <head> <script> function mymessage(){ alert("消息在 onload 事件触发后弹出。"); } </script> </head> <body onload="mymessage()"></body> </html>
onload事件
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘ /> <title></title> <style> .gray{ color:gray; } .black{ color:black; } </style> <script type="text/javascript"> function Enter(){ var id= document.getElementById("tip") id.className = ‘black‘; if(id.value==‘请输入关键字‘||id.value.trim()==‘‘){ id.value = ‘‘ } } function Leave(){ var id= document.getElementById("tip") var val = id.value; if(val.length==0||id.value.trim()==‘‘){ id.value = ‘请输入关键字‘ id.className = ‘gray‘; }else{ id.className = ‘black‘; } } </script> </head> <body> <input type=‘text‘ class=‘gray‘ id=‘tip‘ value=‘请输入关键字‘ onfocus=‘Enter();‘ onblur=‘Leave();‘/> </body> </html>
搜索框
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘ > <title>欢迎blue shit莅临指导 </title> <script type=‘text/javascript‘> function Go(){ var content = document.title; var firstChar = content.charAt(0) var sub = content.substring(1,content.length) document.title = sub + firstChar; } setInterval(‘Go()‘,1000); </script> </head> <body> </body> </html>
跑马灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .style_before { color: lightgrey; } .style_after { color: black; } </style> </head> <body> <h3>爱好</h3> <div> <ul id="i1"> <li><input type="checkbox" value="1">篮球</li> <li><input type="checkbox" value="2">足球</li> <li><input type="checkbox" value="3">乒乓球</li> </ul> </div> <button onclick="Cheakall()">全选</button> <button onclick="Cancleall()">取消全选</button> <button onclick="Reversall()">反选</button> <script> function Cheakall() { var i1 = document.getElementById("i1"); var cheak = i1.getElementsByTagName("input"); for (i=0;i<cheak.length;i++) { cheak[i].checked = true; } } function Cancleall() { var i1 = document.getElementById("i1"); var cheak = i1.getElementsByTagName("input"); for (i=0;i<cheak.length;i++) { cheak[i].checked = false; } } function Reversall() { var i1 = document.getElementById("i1"); var cheak = i1.getElementsByTagName("input"); for (i=0;i<cheak.length;i++) { if (cheak[i].checked) { cheak[i].checked = false; }else { cheak[i].checked = true; } } } </script> </body> </html>
全选、反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide { display: none; } .c1 { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.6); z-index: 2; } .c2 { position: fixed; width: 400px; height: 300px; top: 50%; left: 50%; z-index: 3; margin-top: -150px; margin-left: -200px; background-color: white; text-align: center; padding-top: 150px; } </style> </head> <body> <div><input type="button" value="登录" onclick="hihi()"></div> <div id="cc1" class="c1 hide"></div> <div id="cc2" class="c2 hide"> <div>用户名:<input type="text"></div> <div>密 码:<input type="text"></div> <input type="button" value="确定"> <input type="button" value="取消" onclick="hisl()"> </div> <script> function hihi() { document.getElementById("cc1").classList.remove("hide"); document.getElementById("cc2").classList.remove("hide"); } function hisl() { document.getElementById("cc1").classList.add("hide"); document.getElementById("cc2").classList.add("hide"); } </script> </body> </html>
模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; background-color: #dddddd; } .w{ margin: 0 auto; width: 980px; } .pg-header{ background-color: black; color: white; height: 48px; } .pg-body .menu{ position: absolute; left: 200px; width: 180px; background-color: white; float: left; } .pg-body .menu .active{ background-color: #425a66; color: white; } .pg-body .fixed{ position: fixed; top: 10px; } .pg-body .content{ position: absolute; left: 385px; right: 200px; background-color: white; float: left; } .pg-body .content .item{ height: 900px; } </style> </head> <body onscroll="Hua();"> <div class="pg-header"> <div class="w"></div> </div> <div class="pg-body"> <div id="menu" class="menu"> <ul> <li>第一章</li> <li>第二章</li> <li>第三章</li> </ul> </div> <div id="content" class="content"> <div class="item">床前明月管</div> <div class="item">疑是地上霜</div> <div class="item" style="height: 100px">我是郭德纲</div> </div> </div> <script> function Hua() { var xo = document.getElementById("menu"); var huaGao = document.body.scrollTop; if (document.body.scrollTop>48){ xo.classList.add("fixed"); }else { xo.classList.remove("fixed"); } var bod = document.body.offsetHeight; var conAbs = document.getElementsByClassName("content")[0].offsetHeight; var ck = document.documentElement.clientHeight; // console.log((bod + conAbs) == (ck + huaGao)); if ((bod + conAbs) == (ck + huaGao)) { var lenLi = xo.getElementsByTagName("li"); for (var i=0;i<lenLi.length;i++){ if (i == lenLi.length - 1){ lenLi[i].className = "active"; }else { lenLi[i].className = ""; } } return } var item = document.getElementById("content").children; for (var i=0;i<item.length;i++){ var currentItem = item[i]; var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop; var currentItemWindowTop = currentItemBodyTop - huaGao; var currentHeight = currentItem.offsetHeight; var bottomHeight = currentItemBodyTop + currentHeight; var ziJi = xo.getElementsByTagName("li")[i]; if (currentItemWindowTop<0 && huaGao < bottomHeight){ ziJi.className = "active"; } else { ziJi.className = ""; } } } </script> </body> </html>
书签章节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ list-style: none; padding: 0; margin: 0; } ul li{ float: left; background-color: #2459a2; color: white; padding: 8px 10px; } .clearfix:after{ display: block; content: ‘.‘; height: 0; visibility: hidden; clear: both; } .hide{ display: none; } .tab-menu .title{ background-color: #dddddd; } .tab-menu .title .active{ background-color: #0099dd; color: black; } .tab-menu .content{ border: 1px solid #dddddd; min-height: 150px; } ul li:hover { cursor: pointer; } </style> </head> <body> <div style="width: 400px; margin: 0 auto;"> <div class="tab-menu"> <div class="title clearfix"> <ul> <li target="h1" class="active" onclick="Show(this);">索尼</li> <li target="h2" onclick="Show(this);">谷歌</li> <li target="h3" onclick="Show(this);">腾讯</li> </ul> </div> <div id="content" class="content"> <div con="h1">1...</div> <div con="h2" class="hide">2...</div> <div con="h3" class="hide">3...</div> </div> </div> </div> <script> function Show(ths) { var Showli = ths; var littarget = Showli.getAttribute("target"); var liclass = Showli.parentNode.children; for (var i=0;i<liclass.length;i++) { if (liclass[i].getAttribute("target") == littarget) { liclass[i].classList.add("active"); }else { liclass[i].classList.remove("active"); } } var liycontent = document.getElementById("content").children; for (var i=0;i<liycontent.length;i++) { if (liycontent[i].getAttribute("con") == littarget) { liycontent[i].className = ""; }else { liycontent[i].className = "hide"; } } } </script> </body> </html>
菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .go-top { position: fixed; right: 28px; bottom: 19px; width: 38px; height: 40px; background-color: aliceblue; } .hide { display: none; } </style> </head> <body onscroll="Func();"> <div style="height: 2000px"></div> <div id="i2" class="go-top hide"> <a onclick="GoTop();">返回顶部</a> </div> <script> function Func() { var scrolltop = document.body.scrollTop; var ii = document.getElementById("i2"); if (scrolltop>300) { ii.classList.remove("hide"); }else { ii.classList.add("hide"); } } function GoTop() { document.body.scrollTop = 0; } </script> </body> </html>
返回顶部
时间: 2024-10-29 19:10:36