<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://jzc.mzhiyin.cn/test/jquery-1.9.1.js"></script>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
<script type="text/javascript">
var countdown=60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="免费获取验证码";
countdown = 60;
} else {
val.setAttribute("disabled", true);
val.value="重新发送(" + countdown + ")";
countdown--;
setTimeout(function() {
settime(val)
},1000)
}
}
</script>
</body>
</html>上面的代码是demo大家好,我现在的问题就是想实现一个电子邮件点击后出现60秒倒计时,倒计时结束之后才能再次点击,百度了一个demo,用的是定时器,我就按他的写了,但是遇到了问题,他的是原生ja
下面的代码是我的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./baidu_ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="./baidu_ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./baidu_ueditor/lang/zh-cn/zh-cn.js"></script>
<style>
div{border:0px solid;}
input{width:300px;height:30px;}
.btn{width:200px;height:40px;border-radius:5px;border:none;background:#FFC125;color:#fff;font-size:18px;}
</style>
</head>
<body>
<div style="width:80%;margin:0 auto;margin-top:2%;">
<div style="width:100%;margin:0 auto;text-align:left;">
填写电子邮箱:<input type="text" name="email" class="email"/><br/><br/>
</div>
<div style="width:100%;margin:0 auto;text-align:left;">
填写邮件主题:<input type="text" name="zhuti" class="zhuti"/><br/><br/>
</div>
<div style="width:100%;margin:0 auto;text-align:left;">
邮件内容:<textarea name="content" id="editor" type="text/plain" style="width:90%;height:35%;" class="content" placeholder="请输入邮件内容"></textarea><br/><br/>
</div>
<div style="width:100%;margin:0 auto;text-align:left;">
<input type="button" id="btn" class="btn" value="免费获取验证码" />
</div>
</div>
<Script>
$(function(){
var countdown=60;
$(".btn").click(function(){
var email = $(".email").val();
var content = UE.getEditor('editor').getAllHtml();
var zhuti = $(".zhuti").val();
var url = "./030101.php";
if(countdown == 0){
$(this).removeAttr('disabled');
$(this).val('免费获取验证码');
$.ajax({
url:url,
data:{'email':email,'content':content,"zhuti":zhuti},
datatype:'json',
type:'post',
success:function(res){
if(res.status == 1){
alert("电子邮件已经发送到您的邮箱中!");
}else{
alert(res.msg);
}
}
})
countdown = 60;
}else{
$(this).attr('disabled',true);
$(this).val('重新发送'+countdown);
countdown--;
}
})
})
</script>
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为:");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
}
$(function(){
$("#editor").blur(function(){
var huoquneirong = UE.getEditor('editor').getContent();
alert(huoquneirong);
$(".content").val(huoquneirong);
alert($(".content").val());
})
})
</script>
</body>
</html> 最佳答案