JS03(节点操作、动态生成小圆点、微博发布、日期函数、日历、定时器、倒计时)
节点操作
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var demo = document.getElementById("demo"); var btn = document.getElementsByTagName("button")[0]; btn.onclick = function(){ // 创建新的节点 var newli = document.createElement("li"); newli.innerHTML = "文字"; // 插入节点 demo.appendChild(newli); // 子节点要放入的是 父亲的最后面 demo.appendChild(demo.cloneNode()); //克隆节点 demo.parentNode.appendChild(demo.cloneNode()); //我的爸爸添加孩子 == 给我的兄弟 } } </script> </head> <body> <button>点击</button> <ul id="demo"> </ul> </body> </html>
动态生成小圆点
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul,ol{list-style:none} .box { width: 730px; height: 454px; margin: 100px auto; overflow: hidden; position: relative; } .circle { position: absolute; left: 50%; margin-left:-50px; bottom:10px; } .circle span { float: left; width: 18px; height: 18px; border-radius: 50%; background-color: pink; text-align: center; line-height: 18px; margin-right: 10px; cursor: pointer; } .circle span.current { background-color: purple; } </style> <script> window.onload = function(){ var scroll = document.getElementById("scroll"); var circle = document.createElement("div"); // 新的 //circle.className = "circle"; // 更改的类名 circle.setAttribute("class","circle"); // 更为常用 scroll.appendChild(circle); var ul = document.getElementById("ul"); var lis = ul.children; // ul 的所有孩子 //alert(lis.length); // 生成了新的大盒子 // 大盒子里面要放入 n个小的span for(var i=0; i<lis.length; i++) { var newspan = document.createElement("span"); // 创建 6次 span newspan.innerHTML = i+1; circle.appendChild(newspan); } var child = circle.children; child[0].setAttribute("class","current"); // 第一个孩子 添加 current } </script> </head> <body> <div class="box" id="scroll"> <div class="slider"> <ul id="ul"> <li><img src="images/11.jpg" alt=""/></li> <li><img src="images/22.jpg" alt=""/></li> <li><img src="images/33.jpg" alt=""/></li> <li><img src="images/44.jpg" alt=""/></li> <li><img src="images/55.jpg" alt=""/></li> <li><img src="images/55.jpg" alt=""/></li> <li><img src="images/66.jpg" alt=""/></li> </ul> </div> </div> </body> </html>
微博发布
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul{ list-style-type: none;} *{margin:0;padding: 0;} .box { margin: 100px auto; width: 600px; height: auto; border:1px solid #333; padding: 30px 0; } textarea { width: 450px; resize: none; /*防止用户拖动 右下角*/ } .box li { width: 450px; line-height: 30px; border-bottom:1px dashed #ccc; margin-left: 80px; } .box li a { float: right; } </style> <script> window.onload = function(){ //获取对象 再次操作对象 var btn = document.getElementsByTagName("button")[0]; var txt = document.getElementsByTagName("textarea")[0]; var ul = document.createElement("ul"); // 创建ul btn.parentNode.appendChild(ul); // 追加到 他的父亲里面 btn.onclick = function(){ if(txt.value == "") { alert("输入不能为空"); return false; // 终止函数执行 } var newli = document.createElement("li"); newli.innerHTML = txt.value + "<a href ='javascript:;'>删除</a>"; // 吧表单的值给 新li txt.value = ""; // 清空 表单 var lis = ul.children; // 获得有多少个li // if else 这个片段 让我们新发布的内容 最上显示 if(lis.length == 0) // 第一次创建 { ul.appendChild(newli); // ul 的后面追加 } else { ul.insertBefore(newli,lis[0]); // 每次生成的新的li 放到第一个li 的前面 } var as = document.getElementsByTagName("a"); // 获得所 a for(var i=0; i<as.length;i++) { as[i].onclick = function(){ //removeChild ul.removeChild(this.parentNode); // UL 他的爸爸 // a 的粑粑是 li } } } } </script> </head> <body> <div class="box"> 微博发布: <textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button> </div> </body> </html>
日期函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> var date = new Date(); // 声明 console.log(date.getTime()); // 提倡使用的 console.log(date.valueOf()); // 直接使用 console.log(Date.now()); console.log(+new Date()); </script> </body> </html>
日历
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ width: 150px; height: 180px; background-color: #369; margin: 100px auto; text-align: center; } .box p {text-align: center; line-height: 60px; font-size:12px; color: #fff; } .box span{ display: block; width: 75px; height: 75px; margin: 0 auto; font-size:50px; color: #000; background-color: yellowgreen; line-height: 75px; } </style> <script> window.onload = function(){ var box = document.getElementById("box"); var boys = box.children; //日期函数 var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); // 声明日期函数 boys[0].innerHTML = date.getFullYear()+"年"+ (date.getMonth()+1) + "月" + date.getDate() + "日" + " " + arr[date.getDay()]; boys[1].innerHTML = date.getDate(); // 今天的日子 } </script> </head> <body> <div class="box" id="box"> <p></p> <span></span> </div> </body> </html>
定时器
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var demo = document.getElementById("demo"); setInterval(fn,1000); // 每隔1秒，就去 调用 一次 fn 这个函数 var num = 1; function fn(){ num++; demo.innerHTML = num ; } } </script> </head> <body> <div id="demo"></div> </body> </html>
倒计时
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ font-size:30px; text-align: center; color:red; } </style> <script> window.onload = function(){ var demo = document.getElementById("demo"); var endTime = new Date("2015/12/12 17:30:00"); // 最终时间 setInterval(clock,1000); // 开启定时器 function clock(){ var nowTime = new Date(); // 一定是要获取最新的时间 // console.log(nowTime.getTime()); 获得自己的毫秒 var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000); // 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整 // console.log(second); // 一小时 3600 秒 // second / 3600 一共的小时数 /24 天数 var d = parseInt(second / 3600 / 24); //天数 //console.log(d); var h = parseInt(second / 3600 % 24) // 小时 // console.log(h); var m = parseInt(second / 60 ); //console.log(m); var s = parseInt(second ); // 当前的秒 console.log(s); /* if(d<10) { d = "0" + d; }*/ d<10 ? d="0"+d : d; h<10 ? h="0"+h : h; m<10 ? m="0"+m : m; s<10 ? s="0"+s : s; demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒"; } } </script> </head> <body> <div id="demo"></div> </body> </html>
