javascript循环点击按钮

JavaScript09

javascript循环点击按钮,第1张

先来看看效果图

实例代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box {margin: 100px auto width: 200px height: 150px line-height: 150px letter-spacing: 10px text-align: center font-size: 30px font-weight: bolder border: 2px solid palegreen word-wrap: break-word border-radius: 5px position: relative } #btn{position: absolute left:50% top:280px }</style> </head> <body> <div id="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <input type="button" id="btn" value="我变了哟!"/> <script> //提取标签var box=document.getElementById("box") var span=document.getElementsByTagName("span") var btn=document.getElementById("btn") var color="" var str="0123456789abcdef" btn.onclick=function(){ for(var i=0i<span.lengthi++){//生成四位数for(var j=0j<6j++){//随机改变每个数字的颜色 color+=str.substr(parseInt(Math.random()*str.length),1)//取颜色(循环,每次提取一位,进行拼接组成6为颜色的值)}span[i].innerHTML=parseInt(Math.random()*10)//生成随机数span[i].style.color=("#"+color)//随机改变每个span的颜色color="" }} </script> </body> </html>

以上就是这篇文章的全部内容,实现代码很简单,希望对大家能有一定的帮助,如果有问题可以留言交流,小编会尽快给大家回复的。

$("."+data[i].ids+"").bind("click", function(){

            $(this).data('divname',''+data[i].ids)

            alert($(this).data('divname'))

        } )

这个是在这个div上绑定了一个数据

对了 报错内容发一下

用JS实现

点击‘提交’

按钮变成

‘继续添加’同时文本框变灰且只可读,

再次点击

‘继续添加’

文本框变回原来可写,按钮变成‘提交’。一直可以循环执行:

var

bbb

=

document.getElementById('btn1')

bbb.onclick

=

function()

{

var

ttt

=

document.getElementById('btn1').value

if

(ttt

==

'提交')

{

isreadonly()

changebutton1()

}

else

if

(ttt

==

'继续添加')

{

readwrite()

changebutton2()

}

}

function

isreadonly()

{

var

obj

=

document.getElementById("in1")

obj.setAttribute("readOnly",

true)

obj.style.backgroundColor

=

"#d2d2d2"

var

obj

=

document.getElementById("in2")

obj.setAttribute("readOnly",

true)

obj.style.backgroundColor

=

"#d2d2d2"

var

obj

=

document.getElementById("in3")

obj.setAttribute("readOnly",

true)

obj.style.backgroundColor

=

"#d2d2d2"

}

function

readwrite()

{

var

obj

=

document.getElementById("in1")

obj.setAttribute("readOnly",

false)

obj.style.backgroundColor

=

"#ffffff"

var

obj

=

document.getElementById("in2")

obj.setAttribute("readOnly",

false)

obj.style.backgroundColor

=

"#ffffff"

var

obj

=

document.getElementById("in3")

obj.setAttribute("readOnly",

false)

obj.style.backgroundColor

=

"#ffffff"

}

function

changebutton1()

{

document.getElementById('btn1').value

=

'继续添加'

}

function

changebutton2()

{

document.getElementById('btn1').value

=

'提交'

}

应用:可将上诉代码中的文字替换,实现其它类型的循环执行。