<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>
