javascript css3每2秒更改一次背景颜色
javascript css3 change background color every 2 seconds
如何每2秒自动更改HTML背景色?HTML5与CSS3淡入淡出?
我尝试使用定时器和CSS目标的转换,但没有任何成功
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display: block;
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
input[type=checkbox]:checked ~ .to-be-changed {
color: red;
}
一些更改如果您提前知道颜色和颜色数量,那么在现代浏览器中应该可以使用这种变体:
.animate-me {
-webkit-animation: bgcolorchange 4s infinite; /* Chrome, Safari, Opera */
animation: 4s infinite bgcolorchange;
}
@keyframes bgcolorchange {
0% {
background-color: red;
}
25% {
background-color: green;
}
50% {
background-color: yellow;
}
75% {
background-color: yellow;
}
100% {
background-color: red;
}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes bgcolorchange {
0% {background: red;}
25% {background: yellow;}
75% {background: green;}
100% {background: blue;}
}
<div class="animate-me">Trippy! Give me a headache!</div>
http://jsfiddle.net/nnw7xza2/1/
单击此处演示!
用以下公式计算:-css3-html5-javascript计时器
var arrColor = ["#45c1bf", "#f0593e", "#aeacd4", "#bdd630", "#4479bd", "#f5b11e"];
var footer = document.getElementById("footer");
var header = document.getElementById("header");
//helper function - get dark or lighter color
function LightenDarkenColor(col, amt) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col, 16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
}
//random new color
function GetNewColor() {
var index = Math.floor((Math.random() * 5) + 1);
return arrColor[index];
}
// set new color
function SetNewColor(color) {
document.body.style.background = color;
var NewColor = LightenDarkenColor(color, -20);
footer.style.backgroundColor = NewColor;
header.style.backgroundColor = NewColor;
//footer.style.opacity = 1.2;
}
// on document load function start
(function() {
var colorSelected = GetNewColor();
SetNewColor(colorSelected);
})();
//change color timer
window.setInterval(function() {
var colorSelected = GetNewColor();
SetNewColor(colorSelected);
}, 2000);
* {
margin: 0;
padding: 0;
}
body {
background: #bdd630;
transition: background-color 0.5s ease;
color: #fff;
}
#header {
background: #000;
height: 40px;
text-align: center;
}
#content {
/* Now, to activate scrollbars
and compensate #footer height: */
padding-bottom: 40px;
}
#footer {
background: #000;
position: fixed;
bottom: 0px;
width: 100%;
/* cause of fixed pos */
height: 40px;
text-align: center;
}
<div id="header">header</div>
<div id="content">
<p>content here</p>
</div>
<div id="footer">footer</div>
享受
如果您正在寻找一种易于理解的方法,请查看Basecacti。当然,Basecacti目前还不包括将背景嵌入到您自己的html页面上,所以只需查看其背后的源代码即可
var clr1 = renderColors("clr1");
var clr2 = renderColors("clr2");
var clr3 = renderColors("clr3");
var speed = renderColors("speed");
var deb = document.body;
var circle = 0;
deb.style.backgroundColor = clr1;
setInterval(function(){
if (circle == 0) {
deb.style.backgroundColor = clr2;
circle = 1;
}
else if (circle == 1) {
deb.style.backgroundColor = clr3;
circle = 2;
}
else {
deb.style.backgroundColor = clr1;
circle = 0;
}
}, speed);
要使其适用,请将3种不同的颜色定义为clr1
、clr2
和clr3
。然后将速度变量设置为2000
,持续2秒,它应该可以工作。(在上面的代码中定义这些值的renderColors函数是Basecacti用来获取用户从不同网页定义的颜色的函数。)此外,Basecacti目前是开源的,所以你可能想尽快转到他们的网站并获取此代码。如果您只想在2秒钟后更改背景一次,请将函数从setInterval
更改为setTimeout
,但不要更改其他任何内容。如果Basecacti网站关闭或停止工作,或者我在代码中有错误,请对此帖子发表评论。
相关文章:
- Javascript返回值只在循环中返回一次
- Jquery FadeIn FadeOut 只工作一次
- Javascript html每点击一次就会更改url
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- Rails操作只调用一次,但我在ajax中每秒钟都调用一次
- jQuery滚动功能只工作一次
- 网络摄像头图片作为背景每60秒更新一次
- 使用CSS或JavaScript更改背景图像一次
- 背景图像旋转器.php + jQuery每4秒显示一次随机照片
- 动画 GIF 背景仅显示一次
- 使JavaScript每5秒更改一次背景图像
- javascript css3每2秒更改一次背景颜色
- JQuery背景颜色更改(.animate或.css)在重新启动后只能工作一次
- 慢慢地去除背景颜色,而且只能一次
- 使用Javascript更改背景图像,只显示第一个图像一次
- 使用Jquery背景改变css -如何一次只允许一个链接
- Javascript:下载图像一次,将其设置为src或背景几个对象
- jPicker重置重置按钮上的背景颜色,以及我如何一次打开单个jPicker对话框
- 我怎样才能制作一个“;循环一次”;在每次刷新/加载页面时播放GIF动画背景
- 加载所有的背景图像一次与JS或CSS