在刷新时按顺序更改背景颜色
Have background change color on refresh in sequence?
我有一点麻烦串在一起的东西，会改变背景的颜色，每次刷新页面，但在一个顺序。我精通很多基本的HTML，但不太懂java/css。我试图有我的背景变化随着一些图片的页面，我正在工作，我已经想出了一个代码的图片改变刷新，但我非常困惑与背景得到类似的结果。下面是我为图片编写的代码:
<script type="text/javascript">
function loadNextImage1() {
//get image object
var myImg = document.getElementById('ImageRefresh');
//declare image directory path and image array
var thePath = "http://";
var theImages = new Array();
theImages[0] = "url";
theImages[1] = "url";
theImages[2] = "url";
//get current cookie value
var currentIndex = parseInt(getCookie());
var imgPath = thePath + theImages[currentIndex];
myImg.src = imgPath;
//set next cookie index
currentIndex += 1;
if(currentIndex > (theImages.length - 1)) {
currentIndex = 0;
}
setCookie(currentIndex);
}
function setCookie(someint) {
var now = new Date();
var addDays = now.getDate() + 7
now.setDate(addDays); // cookie expires in 7 days
var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
document.cookie = theString;
}
function getCookie() {
var output = "0";
if(document.cookie.length > 0) {
var temp = unescape(document.cookie);
temp = temp.split(';');
for(var i = 0; i < temp.length; i++) {
if(temp[i].indexOf('imgID') != -1) {
temp = temp[i].split('=');
output = temp.pop();
break;
}
}
}
return output;
}
</script>
<body onload="loadNextImage1();">
<img id="ImageRefresh">
是否有一些类似的我可以做的事情，使背景改变刷新以及?我想我可以把背景做成我想要的颜色，但是我不能把img id应用到头部。如果这是一些超级简单的东西请原谅我，很多东西对我来说就像一门外语。
编辑:这是我当前的编码与背景颜色改变，完全停止序列。
<script type="text/javascript">
function loadNextImage1() {
//get image object
var myImg = document.getElementById('Sidebar1');
//declare image directory path and image array
var thePath = "http://";
var theImages = new Array();
theImages[0] = "URL";
theImages[1] = "URL";
theImages[2] = "URL";
//get current cookie value
var currentIndex = parseInt(getCookie());
var imgPath = thePath + theImages[currentIndex];
myImg.src = imgPath;
//set next cookie index
currentIndex += 1;
if(currentIndex > (theImages.length - 1)) {
currentIndex = 0;
}
setCookie(currentIndex);
}
function setCookie(someint) {
var now = new Date();
var addDays = now.getDate() + 7
now.setDate(addDays); // cookie expires in 7 days
var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
document.cookie = theString;
}
function getCookie() {
var output = "0";
if(document.cookie.length > 0) {
var temp = unescape(document.cookie);
temp = temp.split(';');
for(var i = 0; i < temp.length; i++) {
if(temp[i].indexOf('imgID') != -1) {
temp = temp[i].split('=');
output = temp.pop();
break;
}
}
}
return output;
}
</script>
<script type="text/javascript">
function loadNextImage2() {
//get image object
var myImg = document.getElementById('Sidebar2');
//declare image directory path and image array
var thePath = "https://";
var theImages = new Array();
theImages[0] = "URL";
theImages[1] = "URL";
theImages[2] = "URL";
//get current cookie value
var currentIndex = parseInt(getCookie());
var imgPath = thePath + theImages[currentIndex];
myImg.src = imgPath;
//set next cookie index
currentIndex += 1;
if(currentIndex > (theImages.length - 1)) {
currentIndex = 0;
}
setCookie(currentIndex);
}
function setCookie(someint) {
var now = new Date();
var addDays = now.getDate() + 7
now.setDate(addDays); // cookie expires in 7 days
var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
document.cookie = theString;
}
function getCookie() {
var output = "0";
if(document.cookie.length > 0) {
var temp = unescape(document.cookie);
temp = temp.split(';');
for(var i = 0; i < temp.length; i++) {
if(temp[i].indexOf('imgID') != -1) {
temp = temp[i].split('=');
output = temp.pop();
break;
}
}
}
return output;
}
</script>
<script type="text/javascript">
function changeColor() {
//declare image directory path and image array
var colors = ["#00ffff", "#ff00ff", "ffff00"];
colors[0] = "#00ffff";
colors[1] = "#ff00ff";
colors[2] = "#ffff00";
//get current cookie value
var currentIndex = parseInt(getCookie());
var background = colors[currentIndex];
document.body.style.backgroundColor = background;
//set next cookie index
currentIndex += 1;
currentIndex %= colors.length;
setCookie(currentIndex);
}
function setCookie(someint) {
var now = new Date();
var addDays = now.getDate() + 7
now.setDate(addDays); // cookie expires in 7 days
var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
document.cookie = theString;
}
function getCookie() {
var output = "0";
if(document.cookie.length > 0) {
var temp = unescape(document.cookie);
temp = temp.split(';');
for(var i = 0; i < temp.length; i++) {
if(temp[i].indexOf('imgID') != -1) {
temp = temp[i].split('=');
output = temp.pop();
break;
}
}
}
return output;
}
</script>
<body onload="loadNextImage1(); loadNextImage2(); changeColor();">
与backgroundColor相同的脚本:
<script type="text/javascript">
function loadNextImage1() {
//declare image directory path and image array
var colors = ["#eee", "#123123", "red"];
colors[0] = "#eee";
colors[1] = "#123";
colors[2] = "red";
//get current cookie value
var currentIndex = parseInt(getCookie());
var background = colors[currentIndex];
document.body.style.backgroundColor = background;
//set next cookie index
currentIndex += 1;
currentIndex %= colors.length;
setCookie(currentIndex);
}
function setCookie(someint) {
var now = new Date();
var addDays = now.getDate() + 7
now.setDate(addDays); // cookie expires in 7 days
var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
document.cookie = theString;
}
function getCookie() {
var output = "0";
if(document.cookie.length > 0) {
var temp = unescape(document.cookie);
temp = temp.split(';');
for(var i = 0; i < temp.length; i++) {
if(temp[i].indexOf('imgID') != -1) {
temp = temp[i].split('=');
output = temp.pop();
break;
}
}
}
return output;
}
</script>
<body onload="loadNextImage1();">
<img id="ImageRefresh">
您可以使用HTML5 localStorage(或使用sessionStorage，如果你想保持会话)来保存索引:
<script type="text/javascript">
function loadNextImage1()
{
//get image object
var myImg = document.getElementById('ImageRefresh');
//declare image directory path and image array
var thePath = "http://";
var theImages = new Array();
theImages[0] = "url";
theImages[1] = "url";
theImages[2] = "url";
// Remember to JSON parse it later
var local = localStorage.getItem('backgroundImageIndex');
// If local is null, then no localStorage (i.e. first load)
var currentIndex = (local === null) ? 0 : JSON.parse(local);
// Reset to 0 if bigger than 2
currentIndex = (currentIndex > 2) ? 0 : currentIndex;
// Set src
myImg.src = thePath + theImages[currentIndex];
// Write to localStorage
localStorage.setItem('backgroundImageIndex', JSON.stringify(currentIndex));
}
</script>
<body onload="loadNextImage1();>
<img id="ImageRefresh">
相关文章：
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用jquery更改html中的背景颜色
- Javascript对象类在单击时打开窗口进行颜色选择，并在更改时替换对象背景颜色
- JS幻灯片与CSS背景颜色变化
- DT数据表背景颜色为黑色，但仍有悬停和选择颜色
- Javascript通过列表项的函数和css来更改背景颜色
- Javascript没有从数组中选择背景颜色
- 使用圆中的数组更改背景颜色项目
- 如何用jquery动画改变背景颜色，就像一个过渡
- 使用jquery交换并保存背景颜色
- j查询如何设置/取消设置下拉菜单的背景颜色
- 使用angularjs根据时间更改背景颜色
- 设置Dojo量表的背景颜色
- javascript样式的背景颜色在设置时闪烁.ASP.NET
- 使用javascript更改任意文本的背景颜色
- 在用Javascript更改背景颜色后:hover don'不要改变颜色
- 图像内部的透明背景颜色不受影响
- jQuery mobile-动态更改ui页面背景颜色
- 切换按钮的背景颜色
- JavaScript更改类的背景颜色
