问题描述
在下面的javaScript代码中:
In the below javaScript code:
function webSocketStart()
{ //onclick() of a button
document.getElementById("button").disabled = true;
var wsock = new WebSocket("ws://127.0.0.1:1234/websock");
wsock.onmessage = function (evt)
{
var map = JSON.parse(evt.data)
var myTable = document.getElementById("myTable");
var rows = myTable.getElementsByTagName("tr")
var existing = false
for (var i = 1; i < rows.length; i++) {
if (rows[i].getElementsByTagName("td").length > 0) {
if (rows[i].cells[0].textContent.trim().localeCompare(map['Key'].trim()) == 0){
rows[i].cells[1].textContent = map['Value'] // cell color should change and unchange for two seconds
existing = true
break
}
}
}
if (!existingApp){
var row = myTable.insertRow(1); // New row at the first position
var keyCell = row.insertCell(0)
keyCell.textContent = map['Key']
keyCell.style.backgroundColor = 'yellow'
setInterval(function(){
keyCell.style.backgroundColor = 'white'
}, 2000);
var valueCell = row.insertCell(1)
valueCell.textContent = map['Value']
valueCell.style.backgroundColor = 'yellow'
setTimeout(function(){
valueCell.style.backgroundColor = 'white'
}, 2000);
}
第17、26和&行27条有更改和更改颜色的评论
Line 17, 26 & 27 have comments for color change and unchange
使用 setTimeout()
更改了代码,但某些单元格没有变回 white
Made code changes with setTimeout()
but some cells does not change back to white
for (var i = 1; i < rows.length; i++) {
if (rows[i].getElementsByTagName("td").length > 0) {
if (rows[i].cells[0].textContent.trim().localeCompare(map['Key'].trim()) == 0){
rows[i].cells[1].textContent = map['Value']
rows[i].cells[1].style.backgroundColor = 'yellow' // color change
existing = true
setTimeout(function(){
rows[i].cells[1].style.backgroundColor = 'white'
}, 2000);
break
}
}
}
if (!existing){
var row = myTable.insertRow(1);
keyObj = row.insertCell(0)
keyObj.textContent = map['Key']
keyObj.style.backgroundColor = 'yellow' // color change
setInterval(function(){
keyObj.style.backgroundColor = 'white'
}, 2000);
keyObj = row.insertCell(1)
keyObj.textContent = map['Value']
keyObj.style.backgroundColor = 'yellow' // color change
setTimeout(function(){
keyObj.style.backgroundColor = 'white'
}, 2000);
}
使用CSS&JavaScript
Using CSS & JavaScript,
1)如何在2秒钟内更改和更改表格单元格中背景的颜色?在表格单元格中设置值后
1) How to change and unchange the color of the background in table cell, for 2 seconds? after setting of values in table cell
2)由于 table
元素具有样式属性,如果没有CSS规则,是否可以实现相同的功能? rows [i] .cells [1] .style.backgroundColor ='黄色'
2)As table
element has style properties, Can we achieve the same without CSS rules? rows[i].cells[1].style.backgroundColor = 'yellow'
推荐答案
您已经在获取元素,因此您可以在JS中添加一个类,如下所示: el.classList.add('className');
然后,您需要设置一个计时器 setInterval(function,milliseconds)
,该计时器会在设置的时间后删除该类.然后,CSS将恢复为默认值.我在颜色上添加了CSS过渡,因此颜色变化时不会造成震撼.
You're already getting the element so you would add a class in JS like this:el.classList.add('className');
Then you need to set a timer setInterval(function, milliseconds)
that removes the class after a set amount of time. The CSS will then revert back to default. I added a CSS transition to the color so it's not as jarring when it changes.
(点击处理程序仅用于示例)
(click handler is just for the example)
var removeClass = function(targ){
if(targ.classList.contains('highlight')){
targ.classList.remove('highlight');
}
}
document.getElementById('myEl').addEventListener('click', function () {
var myEl = this
myEl.classList.add('highlight');
var myTimer = setInterval(function(){removeClass(myEl)},2000);
});
#myEl {
width: 30px;
height: 30px;
margin: 10px;
background-color: aqua;
transition: background 0.25s ease;
}
#myEl.highlight {
background-color: orange;
}
<div id='myEl'></div>
Click the box to activate the timer
这篇关于如何更改表格单元格中背景的颜色两秒钟?并返回默认值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!