60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动(定时器) js中获取元素的方法 js中表单提交

Posted 樱栗之歌

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="免费获取验证码";
countdown = 60;
} else {
val.setAttribute("disabled",true);
//val.disabled=true;
val.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(val)
},1000);
}
//document.getElementById("btn").onclick=settime(this);
</script>

</head>
<body >
<input type="button" id="btn" value="免费获取验证码" 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].value=="") {
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中表单提交的主要内容,如果未能解决你的问题,请参考以下文章

C#实现发送验证码倒计时60秒

jquery实现手机发送验证码的倒计时代码

js倒计时60秒获取验证码

JS实现验证码倒计时效果

js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证码

js 短信60秒倒计时