<html> <head> <title>js页面</title> <script src="js/old_boy.js"></script> <style type="text/css"> .show{ } .hide{ display:none; } .enter{ color:black; } .leave{ color:gray; } </style> </head> <body> <div id="t1" class="show">内容</div> <input type="button" id = "switch" onclick="hide();" value="隐藏"/> <form action="https://www.sogou.com/web?" id="form" method="GET"> <input type="text" name="query" /> <input type="button" value="伪提交" onclick="mySubmit();" /> </form><br/> <input type="text" name="leave" value="请输入内容" id="tip" onfocus="enter();" onBlur="leave();"/><br/><br/> <div style="border: 1px solid red;width:500px;height:90px" > <div style="background-color:green;width:10%;height:100%" id="tipp"></div> </div> <script type="text/javascript"> var div = document.getElementById("t1"); var button = document.getElementById("switch"); div.innerText += "追加内容"; function hide(){ var className = div.className; if (className == "show"){ div.className = "hide"; button.setAttribute("value","显示"); } else { div.className = "show"; button.setAttribute("value","隐藏"); } console.log(div.className); /*div.className="hide"; console.log(div.className);*/ } function mySubmit(){ document.getElementById("form").submit(); } function enter(){ var tip = document.getElementById("tip"); if (tip.value == "请输入内容" || tip.value.trim() == ""){ tip.className = "enter"; tip.value = ""; } else { tip.className = "enter"; } } function leave(){ var tip = document.getElementById("tip"); if(tip.value.trim()==""){ tip.className = "leave"; tip.value = "请输入内容"; } } pro = 10; function progTipp(){ var prog= document.getElementById("tipp"); console.log(prog.style.width); pro = pro + 10; if (pro > 100){ clearInterval(interval); } else { prog.style.width = pro +"%"; } } interval = setInterval("progTipp()",500); </script> </body> </html>
时间: 2024-10-29 19:06:53