<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <input type="button" value="确定(9)" id="o1" disabled="disabled" /> </body> </html> <script type="text/javascript"> var a = document.getElementById("o1"); var t = 9; var hh = window.setInterval(function () { t--; if (t == 0) { a.removeAttribute("disabled"); a.value = "确定"; window.clearInterval(hh); } else { a.value = "确定(" + t + ")"; } }, 1000); </script>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/css5.css" rel="stylesheet" /> </head> <body> <textarea id="txt1"></textarea> <input type="button" value="发表" id="btn1" /> 发表人：<input type="text" id="txt_name" /> <div id="context"> </div> </body> </html> <script type="text/javascript"> document.getElementById('btn1').onclick = function () { var user = document.getElementById("txt_name").value; var con = document.getElementById('txt1').value; var boss = document.getElementById('context'); //创建容器 var oItem = document.createElement('div'); oItem.setAttribute('class', 'item'); //创建标题 var oTitle = document.createElement('div'); oTitle.setAttribute('class', 'item-title'); oTitle.innerText = user; //标题嵌入 oItem.appendChild(oTitle); //创建内容 var oContext = document.createElement('div'); oContext.setAttribute('class', 'item-context'); oContext.innerText = con; //内容嵌入 oItem.appendChild(oContext); //创建时间 var oTime = document.createElement('div'); oTime.setAttribute('class', 'item-bottom'); oTime.innerHTML = "<input type='button' onclick='del(this);' value='删除' />"; //内容嵌入 oItem.appendChild(oTime); if (boss.children.length <= 0) { boss.appendChild(oItem); } else { boss.insertBefore(oItem, boss.children[0]); } } function del(a) { var chi = a.parentNode.parentNode; chi.parentNode.removeChild(chi); } </script>
body { width: 500px; margin: 0 auto; } #txt1 { width: 500px; height: 150px; } #context { width: 100%; background-color: gray; padding: 30px 0; } .item { width: 80%; margin-left: 10%; background-color: white; margin-bottom: 20px; } .item-title { width: 80%; margin-left: 10%; font-size: 18px; border-bottom: 1px solid black; padding: 10px 0; } .item-context { width: 80%; margin-left: 10%; font-size: 15px; padding: 10px 0; word-wrap:break-word; } .item-bottom { width: 80%; margin-left: 10%; font-size: 15px; text-align: right; border-top: 1px solid black; padding: 10px 0; }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/css6.css" rel="stylesheet" /> </head> <body> <div class="div1">我的好友</div> <div class="div2"></div> <div class="div1">陌生人</div> <div class="div2"></div> <div class="div1">黑名单</div> <div class="div2"></div> <div class="div1">二货们</div> <div class="div2"></div> </body> </html> <script type="text/javascript"> var oDiv1s = document.getElementsByClassName('div1'); for (var i = 0; i < oDiv1s.length; i++) { oDiv1s[i].onclick = function () { if (this.nextSibling.nextSibling.style.display != "block") this.nextSibling.nextSibling.style.display = 'block'; else this.nextSibling.nextSibling.style.display = 'none'; } } </script>
好友栏
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .div1 { width: 200px; height: 300px; border: 1px solid black; float: left; margin-right: 30px; margin-bottom: 30px; } </style> </head> <body> <div style=" 100%; height: 100px;"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> </body> </html> <script type="text/javascript"> var oDiv1s = document.getElementsByClassName('div1'); for (var i = 0; i < oDiv1s.length; i++) { oDiv1s[i].index = i; oDiv1s[i].onmouseover = function () { up(this, this.index); } oDiv1s[i].onmouseout = function () { down(this, this.index); } } //放置所有元素的定时器数组 var timers = new Array(); //浮起，a:要执行动画的对象，ind:对象的索引 function up(a, ind) { //清空此对象当前所有的动画效果 window.clearInterval(timers[ind]); //获取此对象当前的上边距 var mtop = a.style.marginTop; var t = 0;//设置默认值为 if (mtop.length > 0) {//如果当前对象有上边距，那么修改默认值 //将“25px”这样的格式数据截取出值 t = parseInt(mtop.substr(0, mtop.length - 2)); } //当前阴影值获取，思路同上 var bshadow = a.style.boxShadow; var b = 0; if (bshadow.length > 0) { var bb = bshadow.split(' '); b = parseInt(bb[bb.length - 1].substr(bb[bb.length - 1] - 2)); } //定时器开启，并将此定时器放入定时器集合中 timers[ind] = window.setInterval(function () { t--;//上边距改变 b++;//阴影扩散程度改变 if (t <= -25 && b >= 25) {//停止条件 //停止时将元素锁定在目标位置 a.style.marginTop = '-25px'; a.style.boxShadow = "0 0 25px gray"; window.clearInterval(timers[ind]); } else { //动画执行 a.style.marginTop = t + 'px'; a.style.boxShadow = "0 0 " + b + "px gray"; } }, 20); } //下降，a:要执行动画的对象，ind:对象的索引 function down(a, ind) { //清空此对象当前所有的动画效果 window.clearInterval(timers[ind]); //获取此对象当前的上边距 var mtop = a.style.marginTop; var t = -25;//设置默认值为 if (mtop.length > 0) {//如果当前对象有上边距，那么修改默认值 //将“25px”这样的格式数据截取出值 t = parseInt(mtop.substr(0, mtop.length - 2)); } //当前阴影值获取，思路同上 var bshadow = a.style.boxShadow; var b = 0; if (bshadow.length > 0) { var bb = bshadow.split(' '); b = parseInt(bb[bb.length - 1].substr(bb[bb.length - 1] - 2)); } //定时器开启，并将此定时器放入定时器集合中 timers[ind] = window.setInterval(function () { t++;//上边距改变 b--;//阴影扩散程度改变 if (t >= 0 && b <= 0) {//停止条件 a.style.marginTop = '0px'; a.style.boxShadow = "0 0 0px gray"; window.clearInterval(timers[ind]); } else { //动画执行 a.style.marginTop = t + 'px'; a.style.boxShadow = "0 0 " + b + "px gray"; } }, 20); } </script>