怎么用JS实现 按钮功能的循环执行？

JavaScript020

怎么用JS实现 按钮功能的循环执行？,第1张

用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 = '提交'

}

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

var picID = 0//换成网页中那幅图在picURL中的序号(记得要从0开始数)

var picURL = ["images/img1.jpg","images/img2.jpg","images/img3.jpg"]//将图片链接地址放进来，数量随意

function showimg(str){

　if(str=="L"){

if(picID==0){

　picID = picURL.length-1

　document.getElementById("advimg").src = picURL[picID]

}else{

　document.getElementById("advimg").src = picURL[--picID]

}

　}else if(str=="R"){

if(picID==(picURL.length-1)){

　picID = 0

　document.getElementById("advimg").src = picURL[picID]

}else{

　document.getElementById("advimg").src = picURL[++picID]

}

　}

}

使用jQuery的话，相对就比较简单。

jQuery有个toggle(fn, fn2, [fn3, fn4, ...])

其中fn,fn2,fn3....为对应的点击次数所执行的事件。

即第一次点击执行fn函数，第二次点击执行fn2函数，依此类推。

当结束最后一此点击的函数后，继续点击将从第一次点击开始。