阻止超链接跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <a href="http://www.baidu.com" id="ak">百度</a> <script src="common.js"></script> <script> my$("ak").onclick=function (e) { // 方法一 // alert("被点了"); // 方法二 // return false; // 方法三 window.event.preventDefault();//阻止浏览器的默认的事件 }; </script> </body> </html>
div的滚动条案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { width: 300px; height: 500px; border: 1px solid red; margin: 100px; position: relative; overflow: hidden; } .content { padding: 5px 18px 5px 5px; position: absolute; top: 0; left: 0; } .scroll { width: 18px; height: 100%; position: absolute; top: 0; right: 0; background-color: #eee; } .bar { height: 100px; width: 100%; position: absolute; top: 0; left: 0; background-color: red; border-radius: 10px; cursor: pointer; } </style> </head> <body> <div class="box" id="box"> <div class="content" id="content"> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> <div>大鹏一日同风起，扶摇直上九万里</div> </div><!--文字内容--> <div id="scroll" class="scroll"><!--装滚动条的层--> <div class="bar" id="bar"></div><!--滚动条--> </div> </div> <script src="common.js"></script> <script> //获取需要的元素 //最外面的div var box = my$("box"); //文字div var content = my$("content"); //装滚动条的div---容器 var scroll = my$("scroll"); //滚动条 var bar = my$("bar"); //设置滚动条的高度 //滚动条的高/装滚动条的div的高=box的高/文字div的高 //滚动条的高=装滚动条的div的高*box的高/文字div的高 var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight; bar.style.height = height + "px"; //移动滚动条 bar.onmousedown = function (e) { var spaceY = e.clientY - bar.offsetTop; document.onmousemove = function (e) {//移动事件 var y = e.clientY - spaceY; y=y<0?0:y;//最小值 y=y>scroll.offsetHeight-bar.offsetHeight?scroll.offsetHeight-bar.offsetHeight:y; bar.style.top = y + "px"; //设置鼠标移动的时候,文字不被选中 window.getSelection? window.getSelection().removeAllRanges():document.selection.empty(); //滚动条的移动距离/文字div的移动距离=滚动条最大的移动距离/文字div的最大移动距离 //文字div的移动距离=滚动条的移动距离*文字div的最大移动距离/滚动条最大的移动距离 var moveY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight); //设置文字div的移动距离 content.style.marginTop=-moveY+"px"; }; }; document.onmouseup=function () { //鼠标抬起的时候,把移动事件干掉 document.onmousemove=null; }; </script> </body> </html>
元素隐藏的几种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; border:1px solid red; } </style> </head> <body> <input type="button" value="显示效果" id="btn"/> <div id="dv"></div>哈哈 <script src="common.js"></script> <script> document.getElementById("btn").onclick=function () { //隐藏div //不占位 //my$("dv").style.display="none"; //占位 //my$("dv").style.visibility="hidden"; //占位 //my$("dv").style.opacity=0; //占位 //my$("dv").style.height="0px"; //my$("dv").style.border="0px solid red"; }; </script> </body> </html>
table隔行变色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 500px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 500px; cursor: pointer; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: pink; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>课程</th> <th>成绩</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> 1 </td> <td>中爱心</td> <td>语文</td> <td>100</td> </tr> <tr> <td> 2 </td> <td>奥语</td> <td>日语</td> <td>100</td> </tr> <tr> <td> 3 </td> <td>枫林晚</td> <td>营销学</td> <td>100</td> </tr> <tr> <td> 4 </td> <td>芙蓉妹妹</td> <td>数学</td> <td>10</td> </tr> <tr> <td> 5 </td> <td>性之助</td> <td>英语</td> <td>100</td> </tr> <tr> <td> 6 </td> <td>莫迪卡</td> <td>体育</td> <td>100</td> </tr> <tr> <td> 7 </td> <td>阿拉蕾</td> <td>体育</td> <td>100</td> </tr> </tbody> </table> </div> <script src="common.js"></script> <script> //先获取所有的行 var trs = my$("j_tb").getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { trs[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow"; //鼠标进入 trs[i].onmouseover = mouseoverHandle; //鼠标离开 trs[i].onmouseout = mouseoutHandle; } //当鼠标进入的时候,先把设置后的颜色保存起来,等到鼠标离开再恢复即可 var lastColor = ""; function mouseoverHandle() {//鼠标进入 lastColor = this.style.backgroundColor; this.style.backgroundColor = "green"; } function mouseoutHandle() {//鼠标离开 this.style.backgroundColor = lastColor; } </script> </body> </html>
字符串拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="拼接吧" id="btn"/><br/> <input type="text" value=""/><br/> <input type="text" value=""/><br/> <input type="text" value=""/><br/> <input type="text" value=""/><br/> <input type="text" value=""/><br/> <script src="common.js"></script> <script> // var str="abcef"; // console.log(str[2]); // str[2]="H"; // console.log(str); //字符串特性:不可变性 //点击按钮实现拼接 // document.getElementById("btn").οnclick=function () { // var str=""; // //获取所有的文本框 // var inputs=document.getElementsByTagName("input"); // //每个文本框的value属性值 // for(var i=0;i<inputs.length-1;i++){ // if(inputs[i].type!="button"){ // str+=inputs[i].value+"|"; // } // } // console.log(str+inputs[inputs.length-1].value); // }; //推荐使用数组的方式拼接大量的字符串 document.getElementById("btn").onclick = function () { var str = []; //获取所有的文本框 var inputs = document.getElementsByTagName("input"); //每个文本框的value属性值 for (var i = 0; i < inputs.length; i++) { if (inputs[i].type != "button") { str.push(inputs[i].value); } } console.log(str.join("|"));//字符串 }; </script> </body> </html>
