Question

Noob here - 我正在研究一个简单的Javascript计算器，我正在使用列表（li）作为按钮。我希望li background-color更改onClick，但之后会自动更改半秒。所以基本上我希望按钮点击闪烁新颜色，而不是切换它。

这可能吗？

编辑：这就是我现在在标题中所拥有的内容，但它仍无效：

$(li).click(function() {
    var $elem = $(this);
    var oldBG = $elem.css('backgroundColor'));
    $elem.css('backgroundColor', '#FFFFFF').delay(1000).css('backgroundColor', oldBG);
});

和我的li标签：

<li class="key" onClick="calc('7')">7</li>

Answer 1

$('.key').click(function() {
  // make a jQ collection of the DOM element from the event
  var $elem = $(this);
  // store the background-color
  var oldBG = $elem.css('background-color');
  // change the background color to what you want
  $elem.css('backgroundColor', '#FF0000');
  // after 1 second, change it back
  setTimeout(function() {
    $elem.css('background-color', oldBG);
  }, 1000);
});

working sample

jQuery-UI将使用jquery-color插件为颜色值设置动画，如果你进入那个

Answer 2

当然可以！

查看setTimeout（）

的文档

这是一个帮助您入门的链接。

http://www.w3schools.com/js/js_timing.asp

Answer 3

如果您愿意更改标记，以便每个按钮都是＆lt; a＆gt;元素（也许在那些li元素中），你可以使用

a:active {

按下时更改按钮的显示方式。 http://www.w3schools.com/CSS/css_pseudo_classes.asp

Answer 4

单击时可以为元素添加背景颜色样式，然后使用setTimeout函数将其删除：

$(function(){
  $('li').click(function(){
    var e = $(this);
    e.css('background-color', 'red');
    window.setTimeout(function(){
      e.css('background-color', '');
    }, 500);
  });
});

（注意：jQquery中有一个delay方法，但这个方法用于动画，而不是setTimeout的替代。）

工作示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(function(){
  $('li').click(function(){
    var e = $(this);
    e.css('background-color', 'red');
    window.setTimeout(function(){
      e.css('background-color', '');
    }, 500);
  });
});

function calc(digit) {
    var lcd = $('#lcd');
    lcd.text(lcd.text() + digit);
}

</script>

</head>
<body>

<div id="lcd"></div>

<ul>
  <li class="key" onClick="calc('1')">1</li>
  <li class="key" onClick="calc('2')">2</li>
  <li class="key" onClick="calc('3')">3</li>
  <li class="key" onClick="calc('4')">4</li>
  <li class="key" onClick="calc('5')">5</li>
  <li class="key" onClick="calc('6')">6</li>
  <li class="key" onClick="calc('7')">7</li>
  <li class="key" onClick="calc('8')">8</li>
  <li class="key" onClick="calc('9')">9</li>
  <li class="key" onClick="calc('0')">0</li>
</ul>

</body>
</html>

可以更改背景颜色onClick，然后自动更改一秒钟后？

4 个答案: