js运行时间比较长,怎么才能在它运行之前页面置灰并且有请等待的提示

JavaScript016

js运行时间比较长,怎么才能在它运行之前页面置灰并且有请等待的提示,第1张

看得出来你不太懂 JS,先把代码给你,做了很多注释,先仔细看看,然后后面讲解为什么:

// 检查表单的函数

function checkForm() {

/** @type {string} 数据容器 */

var merArr=""

/** @type {number} 局部循环指针 */

var p=0

/** @type {Array.<Element>} 获取待提交的表单元素 */

var items = document.getElementsByName("add_mer")

// 遮罩

Ext.getBody().mask("数据保存中,请稍等...") //这里没有起作用

// 开始检查

doCheck()

function doCheck(){

/**

 * 循环构造字符串

 * 为了避免长时间阻塞,每一段仅允许循环 100 次

 * 如果一次不能完成,则分组完成

 */

for(var i=0 i<100 && p<items.length i++, p++) {

if (items[x].checked) {

merArr =merArr+Trim(items[x].value)+","

}

}

// 如果循环结束

if (p === items.length) complete()

// 如果循环没有完成,则用 setTimeout 交出控制权,延迟循环

else setTimeout(doCheck, 1)

}

// 检查结束,真正的处理表单

function complete(){

document.getElementById("merArray").value = merArr

if(merArr==""){

alert("请勾选!")

Ext.getBody().unmask()

return false

}

document.forms['listForm'].action = 'addGroupMer.action'

document.forms['listForm'].submit()

}

return false

}

下面是讲解:

1、 JS 是阻塞式的。在一个 JS 函数正在执行的时候,对 DOM 的渲染其实对于用户来说是不可见的。也就是说,你在一个 JS 循环中不论对 DOM 做了什么,用户都是看不到中间过程,只能看到一个最终的结果。

2、 所以,上面代码的核心是,把耗时特别长的操作部分,使用 setTimeout 延迟。 setTimeout 可以把控制权还给浏览器,留出足够的页面渲染时间。

3、 setTimeout 的过程中,要注意变量的处理。对于闭包的应用是一个需要注意的地方。

以上,请采纳,请给分。

JavaScript禁用文本框或者禁止文本框的输入方法仅供参考:

方法1、设置文本框的ReadOnly选项

<input type="text" value="此处文本不可修改" readonly/>

在JavaScript中,可以使用以下代码启用或禁用问框框的输入功能:

document.all.textInputID.readOnly = false

采用这种方法的好处是在基于SSH(Struts + Spring + HIbernate)框架的设计中,我们能够通过Form调用到该文本框。当然,其它方法也调用不到,本文结尾处将略作介绍。

方法2、设置文本框的Disable属性

<input type="text" value="该文本框不可用" disabled/>

相应的JavaScript代码如下:

document.all.textInputID.disabled = true

方法3、在对象focus时立刻让它blur,使它无法获得焦点

<input type="text" value="onfocus=this.blur()" onfocus="this.blur()"/>

提示:readonly和disabled的区别在于后者完全禁止与该对象的交互(表现为不可改写、不可提交等),而readonly是可以提交的

js中对按钮进行置灰和恢复

//按钮置灰不可用

$("#download").attr('disabled',true)//jquery写法,设置按钮不可用

document.getElementById("download").setAttribute("disabled", true)//原生js写法,设置按钮不可用

document.getElementById("download").style.backgroundColor = 'silver'//设置背景色为灰色

//按钮恢复使用,并设置了背景色

 document.getElementById("download").removeAttribute("disabled")

document.getElementById("download").style.backgroundColor = '#428BCA'//设置背景色

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

'silver' 的颜色为:

1.

按钮置灰、input域赋值_原生js

'#428BCA'的颜色为:

1.

按钮置灰、input域赋值_取值_02

2、js里面对jsp某个input域赋值(根据 id和name都是该种形式,只需要把id换成name)

1.

2.

3.

(1)input域显示:

1.

ocument.getElementById('countSize').value = Data['countSize']//原生js显示

1.

$.input("[id='countsize']").val(Data['countSize'])//jquery显示

1.

(2)显示一个html

document.getElementById("Btn").innerHTML ="html里面的内容"//原生html显示

1.

2.

 $(#显示区域的id).html("html里面的内容");//jquery显示

(3)取input域的值

1.

var countSize = document.getElementById('countSize').val()//原生js取值

1.

var countSize = $.input("[id='countSize']").val()//jquery取值