Question

我对编程很陌生，我正在努力学习新的方法和方法......

你能告诉我一个Javascript，它可以将页面背景颜色的颜色改为另一种颜色。例如，我有一个蓝色背景颜色，我想将其更改为绿色。当用户单击背景并触发事件时，应更改颜色。

同样......对于Div而言，在点击时更改颜色，但在10秒后，它将返回到初始颜色。它是clearInterval的东西，但我不是专家..但是。

谢谢...

Answer 1

如果要在按钮单击时更改背景颜色，则应使用JavaScript功能并在HTML页面中更改样式。

function chBackcolor(color) {
   document.body.style.background = color;
}

它是JavaScript中用于更改颜色的函数，您将在事件中调用此函数，例如：

<input type="button" onclick="chBackcolor('red');">

我建议使用 jQuery 。

如果您只需要几秒钟，则可以使用setTimeout功能：

window.setTimeout("chBackColor()",10000);

Answer 2

您可以使用CSS设置对象的背景颜色。

您还可以使用JavaScript将点击处理程序附加到对象，他们可以使用element.style.property = 'value';更改对象的样式。在下面的示例中，我已将它附加到HTML中的按钮，但处理程序同样可以添加到body元素或完全用JavaScript定义。

＆＃13;

body {
  background-color: blue;
}

＆＃13;

<button onclick="document.body.style.backgroundColor = 'green';">Green</button>

＆＃13;

Answer 3

我建议你了解最流行的JS库Jquery。使用jquery可以很容易地完成你想要的东西。下面的例子：

$(“#DIV_YOU_WANT_CHANGE”).click(function() {
    $(this).addClass(“.your_class_with_new_color”);
});

Answer 4

你可以这样做---

<input type="button" onClic="changebackColor">

function changebackColor(){
document.body.style.backgroundColor = "black";
document.getElementByID("divID").style.backgroundColor = "black";      
window.setTimeout("yourFunction()",10000);
}

Answer 5

在这里，您可以找到解决问题的方法。

document.body.style.height = '500px';
document.body.addEventListener('click', function(e){
    var self = this,
        old_bg = this.style.background;

    this.style.background = this.style.background=='green'? 'blue':'green';
    setTimeout(function(){
        self.style.background = old_bg;
    }, 1000);
})

http://jsfiddle.net/ea1xf3sx/

Answer 6

您可以使用document.body.style.backgroundColor = "red";设置正文的背景颜色，这样就可以将其放入用户点击时调用的函数中。下一部分可以使用document.getElementByID("divID").style.backgroundColor = "red"; window.setTimeout("yourFunction()",10000);来完成，{{1}} {{1}}在10秒内调用yourFunction来改变颜色。

Answer 7

您可以使用setTimeout()：

＆＃13;

var addBg = function(e) {
  e = e || window.event;
  e.preventDefault();
  var el = e.target || e.srcElement;
  el.className = 'bg';
  setTimeout(function() {
    removeBg(el);
  }, 10 * 1000); //<-- (in miliseconds)
};

var removeBg = function(el) {
  el.className = '';
};

＆＃13;

div {
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
}
.bg {
  background: orange;
}

＆＃13;

<body onclick='addBg(event);'>This is body
  <br/>
  <div onclick='addBg(event);'>This is div
  </div>
</body>

＆＃13;

使用jQuery：

＆＃13;

var addBg = function(e) {
  e.stopPropagation();
  var el = $(this);
  el.addClass('bg');
  setTimeout(function() {
    removeBg(el);
  }, 10 * 1000); //<-- (in miliseconds)
};

var removeBg = function(el) {
  $(el).removeClass('bg');
};

$(function() {
  $('body, div').on('click', addBg);
});

＆＃13;

div {
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
}
.bg {
  background: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>This is body
  <br/>
  <div>This is div</div>
</body>

＆＃13;

javascript在点击时更改背景颜色

7 个答案: