1：点击文本框 文字隐藏 <body> <input type="text" placeholder="请输入用户名"/> <input type="text" onfocus="if(this.value=='请输入用户名')this.value=''" onblur="if(this.value=='')this.value='请输入用户名'" value="请输入用户名"/> </body>
2：点击全选跟反选功能 <body> <p> <label><input type="checkbox" onclick="checkAll(this)" id="checkall">全选</label> <label><input type="checkbox" onclick="objectAll(this)" id="checkall">反选</label> </label> </p> <p><label><input type="checkbox" name="coursename" value="1">小明</label> <label><input type="checkbox" name="coursename" value="2">小牛</label> <label><input type="checkbox" name="coursename" value="3">小杨</label> <label><input type="checkbox" name="coursename" value="4">白羊</label> <label><input type="checkbox" name="coursename" value="5">姓名</label> <label><input type="checkbox" name="coursename" value="6">人民</label> </p> <script type="text/javascript"> /*全选*/ function checkAll(obj){ var courseName = document.getElementsByName("coursename"); if(obj.checked){//判断当前全选选中 for(var i=0;i<courseName.length;i++){ courseName[i].checked = true; } }else{ for(var i=0;i<courseName.length;i++){ courseName[i].checked = false; } } }; /*反选*/ function objectAll(obj){ var courseName = document.getElementsByName("coursename"); if(obj.checked){ for(var i=0;i<courseName.length;i++){ if(courseName[i].checked){ courseName[i].checked = false; }else{ courseName[i].checked = true; } } }else{ for(var i=0;i<courseName.length;i++){ if(courseName[i].checked){ courseName[i].checked = false; }else{ courseName[i].checked = true; } } } } </script> </body>
3：省市区级联 <body onload="tm_init_pronince()"> <select id="province" onchange="tm_city_change(this)"></select> <select id="city" onchange="tm_areas_change(this)"></select> <select id="area"></select> <script type="text/javascript"> function tm_init_pronince(){ var selectDom = document.getElementById("province"); var arr = [{"id":1001,"name":"广东省"},{"id":1002,"name":"湖北省"}]; /*var html = "<option value=''>--请选择--</option>"; for(var i=0;i<arr.length;i++){ html += "<option value='"+arr[i].id+"'>"+arr[i].name+"</option>"; } selectDom.innerHTML = html; */ var optionEmpty = document.createElement("option"); optionEmpty.value = ""; optionEmpty.text = "请选择"; selectDom.appendChild(optionEmpty); for(var i=0;i<arr.length;i++){ var option = document.createElement("option"); option.value = arr[i].id; option.text = arr[i].name; selectDom.appendChild(option); } }; //城市数据 var cityDatas = { "1001":"100101#中山,100102#广州,100103#河源", "1002":"100201#武汉,100202#太远,10023#十堰" }; var areasDatas = { "100101" :"10010101#紫金,10010102#龙川", "100102" :"10010201#连平,10010202#和平", "100201" :"10020101#源城,10020102#东源,10020103#北京" }; //1:了解数据层级接口 //2:javascript元素创建，定义和追加 function tm_city_change(obj){ var value = obj.value; var datas = cityDatas[value]; var cityDom = document.getElementById("city"); cityDom.innerHTML = ""; var optionEmpty = document.createElement("option"); optionEmpty.value = ""; optionEmpty.text = "请选择"; cityDom.appendChild(optionEmpty); if(datas){ var citys = datas.split(","); for(var i=0;i<citys.length;i++){ var option = document.createElement("option"); var v = citys[i].split("#"); option.value = v[0]; option.text = v[1]; cityDom.appendChild(option); } } }; function tm_areas_change(obj){ var value = obj.value; var datas = areasDatas[value]; var areaDom = document.getElementById("area"); areaDom.innerHTML = ""; var optionEmpty = document.createElement("option"); optionEmpty.value = ""; optionEmpty.text = "请选择"; areaDom.appendChild(optionEmpty); if(datas){ var areas =areasDatas[value].split(","); for(var i=0;i<areas.length;i++){ var option = document.createElement("option"); var v = areas[i].split("#"); option.value = v[0]; option.text = v[1]; areaDom.appendChild(option); } } }; </script> </body>
4：鼠标移到文本框表色 凸显可观效果 <style> .tm_hover:hover{border:2px solid red;} </style> <body onload="init(border:2px solid #141414)"> <form> <input class="tm_hover" type="text"> <input class="tm_hover" type="password"> <select class="tm_hover"></select> <textarea class="tm_hover"></textarea> </form> <script type="text/javascript"> function init(color){ var form = document.forms[0]; var elements = form.elements;//获取所有的表单元素 for(var i=0;i<elements.length;i++){ var e = elements[i]; e.onfocus = function(){ this.style.border = color; } e.onblur = function(){ this.style.border = ""; } } } </script> </body>
5：页面前进后退 <body> <input type="button" onclick="goForward()" value="前进"/> <input type="button" onclick="goBack()" value="后退"/> <!--<button>前进</button> <button>前进xxxx</button>--> <script type="text/javascript"> /*前进*/ function goForward(){ window.history.forward(); } /*后退*/ function goBack(){ window.history.back(); } </script> </body>
6：页面关闭 <body> <input type="button" onclick="closeWin()" value="关闭浏览器"/> <script type="text/javascript"> /*关闭浏览器*/ function closeWin(){ window.close(); } </script> </body>
7：页面加载 <style> #loading{z-index:1;left:0px;top:0px;display:none;100%;position:absolute;height:100%;background:gray;} </style> <body> <div id="loading"> <br><br>页面加载中，请等待...... </div> <input type="button" onclick="tm_submit()" value="提交表单"/> <script type="text/javascript"> function tm_submit(){ var loadingDom = document.getElementById("loading"); loadingDom.style.display = "block";//取消loading的隐藏 window.location.reload();//重新加载当前页面. } </script> </body>
8：页面跳转 <body> <a href="back.html">跳转到back.html页面</a> <input type="button" value="跳转到back.html页面" onclick="tm_back()"> <br> <hr> <a href="back.html" target="_blank">跳转打开新页面到back.html页面</a> <input type="button" value="跳转到back.html页面" onclick="tm_open()"> <script type="text/javascript"> /*window.location.href = "页面"*/ function tm_back(){ window.location.href = "back.html"; }; function tm_open(){ window.open("back.html"); } </script> </body>
9：页面登录时间可用网站限时抢购 <body> <div id="timer"></div> <script type="text/javascript"> var h = 0,m = 0 ,s = 0; init(); function init(){ window.setInterval(function(){ s++; if(s==60){ s = 0; m++; } if(m==60){ m = 0; h++; } document.getElementById("timer").innerHTML = "您已经登陆了:<br>"+h+"小时"+m+"分钟"+s+"秒"; },1000); } </script> </body>
10：div拖动（窗口拖动） <style> #box{border:1px solid #ccc;position:absolute;480px;height:240px;} #box h4{margin:0px;padding:3px;background:#141414;color:#fff;height:32px;line-height:32px;font-size:12px;cursor:move} </style> <body onload="init()"> <div id="box" style="left:200px;top:100px;480px;height:240px;"> <h4 id="title">这是标题</h4> </div> <script type="text/javascript"> //onmousedown,onmouseover onmouseup onmousemove onmousepress function $(id){ return document.getElementById(id); }; function init(){ //鼠标按下去 var titleDom = $("title"); /*第一种*/ titleDom.onmousedown = mousedown;//鼠标按下去的时候 document.onmousemove = mousemove; //鼠标移动的事件 document.onmouseup = mouseup;//鼠标松开的事件 var boxDom = $("box"); var width = parseInt(boxDom.style.width); var height = parseInt(boxDom.style.height); var bodyWidth = getWidth(); var bodyHeight = getHeight(); var newTop = (bodyHeight - height)/2; var newLeft = bodyWidth /2 - width / 2; boxDom.style.top = newTop+"px"; boxDom.style.left = newLeft+"px"; /*第二种*/ /* titleDom.onmousedown = function(){ mousedown(); }; document.onmousemove = function(){ mousemove(); }; //鼠标移动的事件 document.onmouseup = function(){ mouseup(); };//鼠标松开的事件 */ } var l = 0,t=0,x=0,y=0; var isOver = false; function mousedown(event){ var e = event || window.event;//为了兼容ie和火狐 //var e = (event) ? event : ((window.event) ? window.event : null); var boxDom = $("box"); x = e.clientX;//鼠标所在的x坐标 y = e.clientY;//鼠标所在的y坐标 l = parseInt(boxDom.style.left);//距离浏览器左边的位置left t = parseInt(boxDom.style.top);//距离浏览器顶部的位置top isOver = true; }; function mousemove(event){ if(isOver){ var e = event || window.event;//为了兼容ie和火狐 //var e = (event) ? event : ((window.event) ? window.event : null); var newLeft = l + e.clientX - x;//新的左边距 var newTop = t + e.clientY - y;//新的顶部边距 var boxDom = $("box"); boxDom.style.left = newLeft+"px"; boxDom.style.top = newTop+"px"; } } function mouseup(event){ if(isOver){ isOver = false; } } function getHeight() { return window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body.clientHeight; }; function getWidth() { return window.innerWidth || document.documentElement && document.documentElement.clientWidth || document.body.clientWidth; } </script> </body>
11：弹出层居中 <style> #box{border:1px solid #ccc;position:absolute;} #box h4{margin:0px;padding:3px;background:#141414;color:#fff;height:32px;line-height:32px;font-size:12px;cursor:move} </style> <body onload="init()"> <div id="box" style="left:200px;top:100px;480px;height:240px;"> <h4 id="title">这是标题</h4> </div> <script type="text/javascript"> //onmousedown,onmouseover onmouseup onmousemove onmousepress function $(id){ return document.getElementById(id); }; function init(){ var boxDom = $("box"); var width = parseInt(boxDom.style.width); var height = parseInt(boxDom.style.height); var bodyWidth = getWidth(); var bodyHeight = getHeight(); var newTop = (bodyHeight - height)/2; var newLeft = bodyWidth /2 - width / 2; boxDom.style.top = newTop+"px"; boxDom.style.left = newLeft+"px"; } function getHeight() { return window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body.clientHeight; }; function getWidth() { return window.innerWidth || document.documentElement && document.documentElement.clientWidth || document.body.clientWidth; } </script> </body>
12：图片延时加载 <body onload="init();"> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <img lazy_src="1.jpg" src="2.jpg" width="150" height="100" id="img"/> <script type="text/javascript"> function init() { setTimeout("checkHeight()",100); } function checkHeight(){ var pic = document.getElementById("img"); //获取滚动条距离顶部的位置 var stop = document.documentElement.scrollTop; //获取浏览器的可见高度 var cheight = document.documentElement.clientHeight; var top = pic.offsetTop;//获取图片距离最左上角的top值 if(stop+cheight < top){ //如果滚动条还未到可见区域,定时任务继续工作 setTimeout("checkHeight()",100); }else{ pic.src = pic.getAttribute("lazy_src"); //pic.src = pic.attributes["lazy_src"].value; } } </script> </body>
13：CSS3通过Javascript事件的方式实现旋转 <style> #img,#divbox{border-radius:50%;padding:0px;margin:0px;border:0px;display:block;overflow:hidden;} .box{ -webkit-transform:rotate(99deg); -moz-transform:rotate(99deg); transform:rotate(99deg); } </style> <body> <div class="box" style="200px;height:200px;background:red;">xxxxxxxxxxxxxx</div> <div class="box" style="200px;height:200px;background:green;">xxxxxxxxxxx</div> <div id="divbox" style="margin:80px auto;background:red;300px;overflow:hidden;"><img src="1.jpg" id="img" width="300" height="300"></div> <input type="button" value="顺时针旋转" onclick="goRate(1)"/> <input type="button" value="逆时针旋转" onclick="goRate(0)"/> <script type="text/javascript"> var deg = 0; var timer = null; function goRate(flag){ var imgDom = document.getElementById("img"); clearInterval(timer); timer = setInterval(function(){ if(flag==1){ deg++; }else{ deg--; } imgDom.style.webkitTransform = "rotate("+deg+"deg)";//谷歌 imgDom.style.mozTransform = "rotate("+deg+"deg)";//火狐 imgDom.style.transform = "rotate("+deg+"deg)";//其他浏览 },10); } </script> </body>
14：图片的放大扭曲
<body style="text-align:center;padding:50px;"> <img src="1.jpg" id="img" width="400" height="400" style="border-radius:400px;"> <input type="button" value="放大" onclick="goRate(1)"/> <input type="button" value="缩小" onclick="goRate(0)"/> <script type="text/javascript"> var x = 10; var y = 10; var timer = null; function goRate(flag){ var imgDom = document.getElementById("img"); clearInterval(timer); timer = setInterval(function(){ if(flag>0){ x++; }else{ y++; } //imgDom.style.transform = "scale("+x+","+y+")";//放大缩小 imgDom.style.transform = "skew("+x+"deg,"+y+"deg)"//图片的扭曲 },10); } </script> </body>
15：arguments动态参数 <body> <input type="button" onclick="test('小明')" value="传入一个参数"> <input type="button" onclick="test('小龙','小芳')" value="传入二个参数"> <input type="button" onclick="test('小心','小山羊','小兔')" value="传入三个参数"> <script type="text/javascript"> function test(){ var length = arguments.length; for(var i=0;i<arguments.length;i++){ alert(arguments[i]); } } </script> </body>