Javascript 是否可以在单击时更改背景色，然后在一秒钟后自动更改回背景色？_Javascript_Jquery_Background_Jquery Animate

Javascript 是否可以在单击时更改背景色，然后在一秒钟后自动更改回背景色？

javascript jquery

Javascript 是否可以在单击时更改背景色，然后在一秒钟后自动更改回背景色？,javascript,jquery,background,jquery-animate,Javascript,Jquery,Background,Jquery Animate,我正在开发一个简单的Javascript计算器，并使用列表（li）作为按钮。我希望li背景色在单击时更改，但半秒钟后自动更改回原色。所以基本上我希望点击按钮来闪烁新的颜色，而不是切换它这可能吗编辑：这是我现在的标题，但它仍然不起作用： $(li).click(function() { var $elem = $(this); var oldBG = $elem.css('backgroundColor')); $elem.css('backgroundColor',

我正在开发一个简单的Javascript计算器，并使用列表（li）作为按钮。我希望li背景色在单击时更改，但半秒钟后自动更改回原色。所以基本上我希望点击按钮来闪烁新的颜色，而不是切换它

这可能吗

编辑：这是我现在的标题，但它仍然不起作用：

$(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>

当然可以

查看setTimeout（）的文档

这里有一个链接让你开始

当然可以

查看setTimeout（）的文档

这里有一个链接让你开始

如果您对此感兴趣，jQuery UI将使用jQuery颜色插件设置颜色值的动画

jQuery UI将使用jQuery颜色插件设置颜色值的动画，如果您喜欢该插件

，如果您愿意更改标记，使每个按钮都是一个

，您可以在单击时向元素添加背景颜色样式，然后使用

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>


测验
$（函数（）{
$（'li'）。单击（函数（）{
var e=$（本）；
e、 css（“背景色”、“红色”）；
setTimeout（函数（）{
e、 css（‘背景色’，“”）；
}, 500);
});
});
函数计算（数字）{
变量lcd=$（“#lcd”）；
lcd.text（lcd.text（）+数字）；
}

1
2
3
4
5
6
7
8
9
0

您可以在单击元素时向元素添加背景色样式，然后使用

设置超时

功能将其删除：

$(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>


测验
$（函数（）{
$（'li'）。单击（函数（）{
var e=$（本）；
e、 css（“背景色”、“红色”）；
setTimeout（函数（）{
e、 css（‘背景色’，“”）；
}, 500);
});
});
函数计算（数字）{
变量lcd=$（“#lcd”）；
lcd.text（lcd.text（）+数字）；
}

1
2
3
4
5
6
7
8
9
0

您使用的是jquery还是纯javascript？为了更好地理解您的问题，还发布了示例代码。我在计算器中使用纯javascript，但我在标题中链接了jQuery框架，这样应该可以让我两者都正确吗？抱歉，我没有任何示例代码-我正在尝试编写它。您使用的是jquery还是纯javascript？为了更好地理解您的问题，还发布了示例代码。我在计算器中使用纯javascript，但我在标题中链接了jQuery框架，这样应该可以让我两者都正确吗？很抱歉，我没有任何示例代码-我正在尝试编写它。非常感谢链接，我将通读它并尝试我的运气。有人请代表我投票给基思。非常感谢你的链接，我会通读它，试试我的运气。请有人代表我投票给Keith。@Dan不是“backgroundColor”而不是“backgroundColor”吗？css属性是背景色-jquery可以同时使用这两种颜色，但对于一个对象，它使用backgroundColor（因为对象名中不能有hiphens）。。这两种方法都有效。这段代码很有意义，但它不起作用！这就是我修改它的方式：[编辑：参见我原始帖子中的代码]我不知道为什么它不起作用。我的li类是“key”，但在li括号内还有一个单独的onClick函数。这可能会造成一些干扰吗？我的延迟功能不好-它从红色变为oldBG，没有延迟。修改了代码，更新了答案，这真是了不起的工作。它对我来说仍然不起作用，但既然小提琴能起作用，我确信问题出在我的代码上。我会解决的，但是非常感谢你的帮助@Dan不是“backgroundColor”而不是“backgroundColor”吗？css属性是背景色-jquery可以同时使用这两种颜色，但是对于一个对象，它使用backgroundColor（因为在对象名称中不能有hiphens）。。这两种方法都有效。这段代码很有意义，但它不起作用！这就是我修改它的方式：[编辑：参见我原始帖子中的代码]我不知道为什么它不起作用。我的li类是“key”，但在li括号内还有一个单独的onClick函数。这可能会造成一些干扰吗？我的延迟功能不好-它从红色变为oldBG，没有延迟。修改了代码，更新了答案，这真是了不起的工作。它对我来说仍然不起作用，但既然小提琴能起作用，我确信问题出在我的代码上。我会解决的，但是非常感谢你的帮助！对，所以我用了你的代码，但它不起作用。你认为我做错了什么？你的代码是有意义的。我的li标记如下所示：

，那么我在标题中有脚本标记中的代码。o