首页 > 代码库 > 60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动（定时器） js中获取元素的方法 js中表单提交
60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动（定时器） js中获取元素的方法 js中表单提交
60秒验证码倒计时js代码
<script type="text/javascript">
var countdown=60;
function settime(val) {
if (countdown == 0) {
//removeAttribute() 方法删除指定的属性。 disabled属性规定应该禁用 input 元素。
val.removeAttribute("disabled");
val.value="http://www.mamicode.com/免费获取验证码";
countdown = 60;
} else {
val.setAttribute("disabled",true);
//val.disabled=true;
val.value="http://www.mamicode.com/重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(val)
},1000);
}
//document.getElementById("btn").onclick=settime(this);
</script>
</head>
<body >
<input type="button" id="btn" value="http://www.mamicode.com/免费获取验证码" onclick="settime(this)" />
</body>
js样式代码
document.body.style.backgroundColor=#ff0000;//js中样式代码不允许出现“-”连接符，“-”后面的第一个字母改为大写，“-”省略不写。
document.body.style.fontSize="14px";//注意js样式代码与css样式代码的区别。
方块上下左右随机移动（定时器）
<div style="border:1px solid #ff0000;position:relative;background-color:#666;width:50px;height:50px;" id="time">
方块
</div>
<script type="text/javascript">
var leftnum=0;
var topnum=0;
var leftAciton=true;
var topAciton=true;
function show () {
var obj=document.getElementById("time");
if(leftAciton){
leftnum+=10;
if(leftnum>=300){
leftAciton=false;
}
}else{
leftnum-=10;
if (topnum<=0) {
leftAciton=true;
}
}
if(topAciton){
topnum+=15;
if(topnum>=300){
topAciton=false;
}
}else{
topnum-=15;
if (topnum<=0) {
topAciton=true;
}
}
obj.style.left=leftnum+‘px‘;
obj.style.top=topnum+‘px‘;
}
function start () {
setInterval(‘show()‘,50);
}
start ();
</script>
</body>
js中获取元素的方法
var obj=document.getElementById(‘time‘);//通过id获取,得到的是对象
var obj=document.getElementsByClassName(‘time‘);//通过class获取，得到的也是一维数组 要用的话用obj[i] 注意element有s，不只有一个
var obj=document.getElementsByTagName(‘img‘); //通过标签获取，得到的是一个一维数组 要用的话用obj[i] 注意element有s，不只有一个
js中表单提交-> form默认提交方式是get 提交到哪里用action
return 类似break，退出循环
onclick事件必须要加return ，同时事件也要加return ，否则页面会跳转。
例子：
<!--form表单 onclick事件必须要加return ，同时事件也要加return ，否则页面会跳转-->
<form action="http://sohu.com" method="post">
用户名：<input type="text" class="hh" value="" /><br />
手机号：<input type="text" class="hh" value="" /><br />
<input type="submit" onclick="return check()" />
</form>
<script type="text/javascript">
var inputobj=document.getElementsByClassName("hh");
function check () {
for(var i in inputobj){
if (inputobj[i].valuehttp://www.mamicode.com/=="") {
alert("不能为空");
return false; //return相当于break，会退出循环
}
}
}
</script>
</body>
table 属性 cellspacing ->属性规定单元格之间的空间;cellpadding-> 属性规定单元边沿与其内容之间的空白。
对象获得焦点 obj.focus();
<table border="1px" cellspacing="0px" cellpadding="0px" width="300px">
<tr>
<td>用户名</td>
<td>密码</td>
</tr>
</table>
表单非法字符验证
<script type="text/javascript">
function check () {
//思路：先把字符串的每个字符取出，再一一和非法字符数组一一对比，如果有一个相等，马上return
var arr=["*","@","#"];
for (var i=0;i<obj.value.length;i++) {
var str=obj.value.charAt(i);//获取字符串的每一个元素charAt(i)
for (var j=0;j<arr.length;j++) {
if (str==arr[j]) {
alert("含有非法字符");
obj.value="";//清空表单内的内容
obj.focus();
return false;
}
}
}
}
</script>
60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动（定时器） js中获取元素的方法 js中表单提交