消息在一段时间后消失
Message disappear after some time
对于其中一个项目,我准备了一个HTML表单和代码工作良好。我需要的是错误或成功消息应该在几秒钟后消失。有谁能帮我把代码更正一下吗?代码如下:
HTML表单<div class="form">
<form id="form" name="form" method="post" action=" ">
<div id="fc">
<div id="error"></div>
<label>Name: </label>
<input type="text" name="name" id="name" />
<label>Place: </label>
<input type="text" name="name" id="place" />
</div>
<div id="btn">
<input type="submit" id="submit" value="SUBMIT" onClick="Submit(event)" />
</div>
</form>
</div>
CSS代码.form{ margin:0 auto;width:280px;
padding:10px;border:solid 2px #b7ddf2;
background:#f5fffa;
}
#fc{
font-family:"Lucida Grande", "Lucida Sans Unicode",
Verdana, Arial, Helvetica, sans-serif; font-size:12px;
}
#fc label{display:block;font-weight:bold;
text-align:right; width:120px;float:left;
font-size:14px;
}
#fc input{float:left;font-size:12px;
padding:3px 3px; border:solid 1px #aacfe4;
width:130px; margin:2px 0 10px 10px;
}
#btn{clear:both;font-size:13px;font-weight:bold;
text-align:center; margin-bottom: 2px;
}
#error{ font-weight:bold;
text-align:left;
height: 20px;
color: red;font-size:15px;
}
JS代码<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function Submit(e){
e.preventDefault();
var name = $("#name").val();
var place = $("#place").val();
if($("#name").val() == "" ){
$("#name").focus();
$("#error").html("Enter the Name.");
return false;
}
else if($("#place").val() == "" ){
$("#place").focus();
$("#error").html("Enter the Place.");
return false;
}
else if($(name != '' && place != '' )){
$("#error").html("Form submitted successfully.")
$("#form")[0].reset();
// Returns successful data to php.
$.post(" ", {name: name, place: place},
function(data)
{
$("#form").append(data);
});
}
}
</script>
add:
setTimeout(function(){
$('#error').hide()
}, 3000) // time in millisecond for as long as you like
裁判:http://www.w3schools.com/jsref/met_win_settimeout.asp
对于alert来说这是不可能的,但是你可以使用div创建你自己的alert例如:
function tempAlert(msg,duration)
{
var el = document.createElement("div");
el.setAttribute("style","position:absolute;top:40%;left:20%;background-color:white;");
el.innerHTML = msg;
setTimeout(function(){
el.parentNode.removeChild(el);
},duration);
document.body.appendChild(el);
}
现在像这样使用这个自定义警报
tempAlert("Your message",1000);
上述方法中的数字描述了警报将显示的总时间
我希望这将解决你的问题
欢呼
可以对condition使用setTimeout函数。把你的JS代码改成
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function Submit(e){
e.preventDefault();
var name = $("#name").val();
var place = $("#place").val();
if($("#name").val() == "" ){
$("#name").focus();
$("#error").html("Enter the Name.");
return false;
}
else if($("#place").val() == "" ){
$("#place").focus();
$("#error").html("Enter the Place.");
return false;
}
else if($(name != '' && place != '' )){
$("#error").html("Form submitted successfully.")
$("#form")[0].reset();
//this will hide message after 3 seconds
setTimeout(function(){
$("#error").hide();
},3000)
// Returns successful data to php.
$.post(" ", {name: name, place: place},
function(data)
{
$("#form").append(data);
});
}
}
</script>
相关文章:
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 收集一段时间内的EMG数据.建议JS
- 在一段时间内切换文本
- 如何停止字幕文本一段时间,然后继续
- HTTP服务器在一段时间后停止(Node.js)
- Hammer.js过了一段时间就停止工作了
- Meteor-在一段时间内解锁模板(按日期)
- 画布在一段时间后开始滞后
- JS-在一段时间后水平移动图像
- AJAX 调用在获得响应并成功执行时会冻结浏览器一段时间
- 表单提交在一段时间循环PHP,jquery
- 一段时间后生成回发
- 一段时间后自动点击提交按钮
- 如何每隔一段时间更改我网站的背景颜色
- 一段时间后调用函数,但只调用一次
- 一段时间后使用Javascript加载网页ASP.net
- 在for循环中另一个音频结束后播放一段时间的音频
- jQuery:使子菜单在一段时间后出现和消失
- 消息在一段时间后消失
- 使用jQuery覆盖内联CSS应用了一段时间,然后就消失了.为什么