http://www.cnblogs.com/wupeiqi/articles/5602773.html
跑马灯案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<marquee behavior="" direction="">alex is sb</marquee>--> <div id="wel"> 欢迎光临 </div> </body> <script> function test() { var mywel = document.getElementById('wel') var content = mywel.innerText; var f_content = content.charAt(0); // 返回字符串中的第0个字符 var l_content = content.substring(1,content.length); var new_content = l_content + f_content; mywel.innerText = new_content; //console.log(new_content) } setInterval('test();',500) </script> </html>
显示时间案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="clock"> </div> </body> <script> function clock() { var mydate = new Date(); var myyear = mydate.getFullYear(); var mymounth = mydate.getMonth() + 1; var myday = mydate.getDate(); var myhour = mydate.getHours() var myminutes = mydate.getMinutes(); var mysec = mydate.getSeconds(); var res = myyear+'-'+mymounth+'-'+myday+' '+myhour+':'+myminutes+':'+mysec; var myclock = document.getElementById('clock'); myclock.innerText = res; // console.log(res) } setInterval('clock();',1000) </script> </html>
表格案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="jquery-3.1.1.js"></script>--> <title>Title</title> </head> <body> <input type="text" id="username" value="dsad"/> <input type="button" value="全选" onclick = "selectAll();"/> <input type="button" value="取消" onclick = "cancelAll();"/> <input type="button" value="反选" onclick = "ReverseAll();"/> <table border="1"> <thead> <tr> <th>操作</th> <th>ip</th> <th>端口</th> </tr> </thead> <tbody id="info"> <tr> <td><input type="checkbox" /></td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" /></td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" /></td> <td> </td> <td> </td> </tr> </tbody> <select name="" id="mySel"> <option value="1">alex</option> <option value="2">is</option> <option value="3">sb</option> </select> </table> </body> <script> function selectAll(){ //1.得到tbody var myTodby = document.getElementById('info'); //2.找下面的孩子 var myTrs = myTodby.children; for(var i=0; i<myTrs.length;i++){ var myInput = myTrs[i].children[0].children[0]; myInput.checked = true; } } function cancelAll(){ //1.得到tbody var myTodby = document.getElementById('info'); //2.找下面的孩子 var myTrs = myTodby.children; for(var i=0; i<myTrs.length;i++){ var myInput = myTrs[i].children[0].children[0]; myInput.checked = false; } } function ReverseAll(){ //1.得到tbody var myTodby = document.getElementById('info'); //2.找下面的孩子 var myTrs = myTodby.children; for(var i=0; i<myTrs.length;i++){ var myInput = myTrs[i].children[0].children[0]; // myInput.checked = false; if(myInput.checked){ myInput.checked = false; }else{ myInput.checked = true; } } } </script> </html>
模态框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <title>Title</title> <style> .one{ position: fixed; top:0; left:0; right:0; bottom:0; background-color: black; opacity: 0.6; } .info{ width: 400px; height:300px; position: fixed; top:50px; left:400px; right:400px; background-color: white; } .hide{ display: none; } .show{ display: block; } </style> </head> <body> <div> <input type="button" value="点击" onclick = "showModel();"/> </div> <!--遮罩层--> <div class="one hide"></div> <div class="info hide"> <p> <input type="text" /><p></p> <input type="text" /><p></p> <input type="button" value="取消" onclick="hideModel();"> <input type="button" value="确定"> </p> </div> </body> <script> function showModel(){ var myone = document.getElementsByClassName("one")[0]; var info = document.getElementsByClassName("info")[0]; // console.log(myone); myone.classList.remove('hide'); info.classList.remove('hide'); } function hideModel(){ var myone = document.getElementsByClassName("one")[0]; var info = document.getElementsByClassName("info")[0]; myone.classList.add('hide'); info.classList.add('hide'); } </script> </html>
创建节点Attribute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <title>Title</title> </head> <body> <div id="myinput"> </div> </body> <script> var myinput = document.getElementById("myinput"); // var tag = "<input type='text' />"; // myinput.insertAdjacentHTML('beforeEnd',tag); var myipt = document.createElement("input"); // <input type=""> myipt.setAttribute("type","button"); myipt.setAttribute("value","点击"); myinput.appendChild(myipt); </script> </html>