1
我的意思是“始终改变”？ 好吧，例如，Windows 8的安装屏幕，你会在中间看到一个文字，上面写着：'你可以从商店得到新的应用程序'，背景从红色变成橙色，从黄色变成绿色变成青色变成蓝色到紫色再到红色。 我的意思是，如何使用JavaScript对HTML背景执行此操作？使HTML背景始终在变化
A
回答
1
最代码的简单，有效，最短为做到这一点使用一些CSS和JS
CSS：
#myDiv {
transition: background-color 2s;
}
然后，您可以在数组中设置一些颜色，并在您需要或经常使用时调用它们，或使用下面的函数来生成随机颜色。
JS：
function randomColor() {
return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6)
}
这里是产生随机颜色每2秒
https://jsfiddle.net/mLyyxmr1/2/
function randomColor() {
return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6)
}
function setColor(){
document.getElementById('myDiv').style.backgroundColor = randomColor();
setTimeout(setColor, 2000);
}
setColor();#myDiv {
background-color: red;
transition: background-color 2s;
}<div id='myDiv' style='width:200px;height:200px;'>
</div>+1
谢谢。你的代码实际上工作:) –
1
你可以使图像阵列，并选择一个随机本
var images = ['Imag1','Imag2','Imag3','Imag4',];
var random = images[Math.floor(Math.random() * randomarray.length)];
然后用SetInterval，做的全过程再次每隔10秒或取决于你想要什么20秒。
+0
感谢回答我的职位，但我想要的是逐渐的变化这是非常光滑 –
1
我可以建议学习HTML5 Canvas吗？你将能够做你需要的一切+更多。
+0
OK，因为我工作的一个在线动画时钟 –
0
在这里，我们可以根据您的需要使用和定制的代码。
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"> </script>
<script type="text/javascript">
var num;
var temp=0;
var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
var preloads=[];
/* add any number of images here */
preload(
'uploads/bg1.jpg',
'uploads/bg2.jpg',
'uploads/bg3.jpg'
);
function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
function rotateImages() {
num=Math.floor(Math.random()*preloads.length);
if(num==temp){
rotateImages();
}
else {
document.body.style.backgroundImage='url('+preloads[num].src+')';
temp=num;
setTimeout(function(){rotateImages()},speed);
}
}
if(window.addEventListener){
window.addEventListener('load',rotateImages,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',rotateImages);
}
}
</script>
</head>
<body>
<div>
</div>
</body>
</html>
变化预紧将图像的图像路径。
+0
谢谢你花了这么多时间，在我的岗位写代码:)但我想渐变你知道 –
1
如果你想改变颜色，这里是我写的一个脚本，用CSS过渡产生天空效果。
它确实在目标元素上创建了一个新的div并应用于径向渐变。然后上层的不透明度变为0，显示背景层，而前景层变更值。它确实产生了平稳的过渡效果。
您可以以数组形式传递限制颜色，以数字形式传递速度变量以及目标元素的标识。
您也可以省略所有这些参数。
我写的很久以前，它可能需要大量的改进，但我希望你能twirk它，让它对你有用：
function Sky() {
var sky = {};
function rand(x) {
if (!x) x = 1;
return Math.round(Math.random() * x);
}
var isArray = function(arr) {
if (isArray in Array) return Array.isArray(arr);
else return arr instanceof Array;
}
var Chuck = function(arr) {
var total = 0;
arr.forEach(function(e) {
total += e
})
return (total/arr.length == 0 || total/arr.length == 255);
}
function nightDay() {
var RGB = sky.RGB;
var shouldChange = Chuck(RGB);
if (shouldChange) sky.toNight = !sky.toNight;
for (var i = 0; i < RGB.length; i++) {
RGB[i] += (sky.toNight) ? 10 : -10;
if (RGB[i] < 0) {
RGB[i] = 0;
}
if (RGB[i] > 255) {
RGB[i] = 255;
}
}
return "radial-gradient(" +
"rgba(" + (rand(RGB[0]) + RGB[1]) + " ," + (rand(RGB[2]) + RGB[3]) + " ," + rand(RGB[4] + RGB[5]) + ", 0.9) " + rand(25) + "%, " +
"rgba(" + (rand(RGB[6]) + RGB[7]) + " ," + (rand(RGB[8]) + RGB[9]) + " ," + (rand(RGB[10]) + RGB[11]) + ", 0.9) " + (rand(25) + 500) + "%) " +
"rgba(0, 0, 0, 0) repeat scroll " + rand(50) + "px " + rand(50) + "px/cover";
}
function changeOp(e) {
var val = nightDay();
var op = +sky.over.style.opacity;
if (op > 0) {
// First div is opaque
if (!sky.isWebkit) {
sky.el.style.background = val;
if (!sky.el.style.background)
sky.isWebkit = true;
}
if (sky.isWebkit)
sky.el.style.background = "-webkit-" + val;
} else {
//first div is transparent
if (!sky.isWebkit)
sky.over.style.background = val;
else
sky.over.style.background = "-webkit-" + val;
};
sky.over.style.opacity = +!op;
};
function setCSS() {
if (sky.el.parentNode) sky.el.parentNode.style.position = 'relative';
var hasHeight = parseInt(getComputedStyle(sky.el.parentNode).height) > 0;
sky.el.style.height = hasHeight ? "100%" : "100vh";
sky.el.style.overflow = 'auto';
sky.el.style.width = hasHeight ? "100%" : "100vh";
sky.el.style.margin = "0";
sky.el.style.zIndex = -2;
sky.el.webkitTransform = 'translate3d(0,0,0);'
sky.el.transform = 'translate3d(0,0,0);'
sky.over = document.createElement('div');
sky.el.insertBefore(sky.over, sky.el.firstChild);
sky.over.setAttribute('style', 'z-index: -1; position: absolute; pointer-events:none; height:100%; width:100%; opacity:1; -webkit-transition : opacity linear ' + sky.speed/1000 + 's; transition : opacity linear ' + sky.speed/1000 + 's;');
if (sky.el === document.body) {
sky.over.style.position = 'fixed';
sky.over.style.top = 0;
}
}
sky.stop = function() {
sky.over.removeEventListener('transitionend', changeOp, false);
}
sky.start = function() {
sky.over.addEventListener('transitionend', changeOp, false);
changeOp();
}
function checkLength(arr) {
if (arr.length < 13) {
for (var i = arr.length - 1; i < 13; i++) arr[i] = 0;
};
}
function init(args) {
for (var a = 0; a < args.length; a++) {
switch (typeof(args[a])) {
case "string":
var getEl = document.getElementById(args[a]);
sky.el = getEl || document.body;
case "number":
sky.speed = args[a];
case "object":
if (isArray(args[a])) {
sky.RGB = args[a];
checkLength(sky.RGB);
};
case "boolean":
sky.auto = args[a];
}
}
if (!sky.el) sky.el = document.body;
if (!sky.speed) sky.speed = 9000;
if (!sky.RGB) sky.RGB = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
if (sky.auto === undefined) sky.auto = true;
if (sky.el.style.opacity === undefined) {
var RGB = sky.RGB;
sky.el.style.backgroundColor = "rgb(" + (rand(RGB[0]) + RGB[1]) + " ," + (rand(RGB[2]) + RGB[3]) + " ," + rand(RGB[4] + RGB[5]) + ")";
return;
}
setCSS();
if (sky.auto)
sky.start();
setTimeout(changeOp, 200);
}
init(arguments);
return sky;
}
new Sky([255, 120, 255, 120, 255, 120, 255, 120, 255, 120, 255, 120], 5000);#content{width:100vw; height: 100vh}<div id="content">Here is some content</div>+0
刚刚意识到我只能标记一个答案。但是你必须在这上面花费很多时间。谢谢！只是没有足够的信誉来投票你的答案:) –
相关问题
- 1. html与BxSlider背景变化
- 2. 变化背景
- 3. Mootools背景变化
- 4. 变化的背景
- 5. 在背景虚化的动态变化值，生成HTML表格
- 6. 页脚背景始终处于底部
- 7. 背景位置始终是底部
- 8. CardView背景颜色始终为白色
- 9. 背景图片始终对齐顶部
- 10. Bootstrap始终保持背景可见
- 11. HTML背景渐变重复
- 12. CSS HTML背景渐变
- 13. 背景颜色变化Java
- 14. libgdx背景图片变化
- 15. 变化CAMetalLayer背景颜色
- 16. jQuery和CSS背景变化
- 17. onclick背景颜色变化
- 18. Raphael JS背景变化
- 19. 变化的ListView行背景：
- 20. ListView背景变化onFling
- 21. 背景颜色变化
- 22. 变化背景*不*与matplotlib
- 23. 变化背景jQuery的
- 24. 背景变化徘徊
- 25. setInterval的变化背景格
- 26. android背景颜色变化
- 27. jQuery的CSS背景变化
- 28. 身体背景变化？
- 29. 渐进背景变化 - JavaScript
- 30. jQuery Span - OnClick变化背景
你尝试过什么提琴？您可以使用“window.setInterval”来创建一个重复调用JavaScript函数的计时器。 – David