码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-06-01 19:32:42      阅读:409      评论:0      收藏:0      [点我收藏+]

标签:att   turn   单元   height   之间   head   str   onclick   表单提交   

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中表单提交

标签:att   turn   单元   height   之间   head   str   onclick   表单提交   

原文地址:http://www.cnblogs.com/wyingli/p/6928095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!