首页 > 代码库 > 第十七节（特效集锦）
第十七节（特效集锦）
1：点击文本框 文字隐藏<body> <input type="text" placeholder="请输入用户名"/> <input type="text" onfocus="if(this.value=http://www.mamicode.com/=‘请输入用户名‘)this.value=‘‘" onblur="if(this.value=http://www.mamicode.com/=‘‘)this.value=‘请输入用户名‘" value=http://www.mamicode.com/"请输入用户名"/> </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=http://www.mamicode.com/"1">小明</label> <label><input type="checkbox" name="coursename" value=http://www.mamicode.com/"2">小牛</label> <label><input type="checkbox" name="coursename" value=http://www.mamicode.com/"3">小杨</label> <label><input type="checkbox" name="coursename" value=http://www.mamicode.com/"4">白羊</label> <label><input type="checkbox" name="coursename" value=http://www.mamicode.com/"5">姓名</label> <label><input type="checkbox" name="coursename" value=http://www.mamicode.com/"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 onl oad="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=http://www.mamicode.com/‘‘>--请选择--"; for(var i=0;i<arr.length;i++){ html += "<option value=http://www.mamicode.com/‘"+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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/ 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 onl oad="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个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。