使用j

时间：2017-08-06 17:58:04

标签： javascript html css

我基本上想要在改变月份时改变身体的背景颜色。如果它是1月然后红色，如果2月然后黄色等等。我尝试使用javascript，但没有为我工作。 尽快需要解决方案。

＆＃13;
＆＃13; 
var monthArray = ['January','February','March','April','May','June','July','August','September','October','November','December'];
	

 	function changeTable (){
 		year = document.getElementById("yearC").textContent;
 		month = monthArray.indexOf(document.getElementById("monthC").textContent);
 		maxDays = new Date(year,month+1,0).getDate();
 		startingDay = new Date(year,month,1).getDay();

 		if(startingDay!=0){
 			startingDay -=1;
 		}else{
 			startingDay = 6;
 		}
 		tds = document.querySelectorAll('td');
 		var date = 0;
 		for(var i = 0;i<35;i++){
 			tds[i].textContent='';
 			tds[i].className = "";
 		}

 		for(var i = startingDay ;i<tds.length;i++){

 			date += 1
 			if(date>maxDays){
 				break;
 			}
 			
 			if(date<10){
 				tds[i].textContent = '0'+(date);
 			}
 			else{
 			 tds[i].textContent = date;
 			}
 			if(parseInt(new Date().getFullYear())==year && parseInt(new Date().getMonth())==month&&parseInt(new Date().getDate())==date){
 			
 				tds[i].className = "today";
 			
 			}
 		}
 		var i = 0;
 		while(maxDays>date){
 			tds[i].textContent = date+1;
 			date+=1;
 			i+=1;
 		}
 		

 			
 	}
	function prevYear(){
		text = document.getElementById("yearC");
		text.textContent = parseInt(text.textContent)-1;
		changeTable();
	}
	function prevMonth(){
		text = document.getElementById("monthC");
		var i = monthArray.indexOf(text.textContent)
		if(i == 0){
			i = 11;
			text1 = document.getElementById("yearC");
			text1.textContent = parseInt(text1.textContent)-1;
		}else{
			i-=1;
		}
		text.textContent = monthArray[i];
		changeTable();

	}
	function nextMonth(){
		text = document.getElementById("monthC");
		var i = monthArray.indexOf(text.textContent)
		if(i == 11){
			i = 0;
			text1 = document.getElementById("yearC");
			text1.textContent = parseInt(text1.textContent)+1;
		}else{
			i+=1;
		}
		text.textContent = monthArray[i];
		changeTable();
	}
	function nextYear(){
		text = document.getElementById("yearC");
		text.textContent = parseInt(text.textContent)+1;
		changeTable();
	}
	yearP = document.getElementById("yearP");
	yearN = document.getElementById("yearN");
	monthP = document.getElementById("monthP");
	monthN = document.getElementById("monthN");
	yearP.addEventListener('click',prevYear);
	yearN.addEventListener('click',nextYear);
	monthN.addEventListener('click',nextMonth);
	monthP.addEventListener('click',prevMonth);
	
	function intial(){

	}	




month5 = document.getElementById("monthP");
function changeback (){
	if (month5 == 'January')
	{
    document.body.style.background = white;
}
	}
＆＃13; 
*{
	margin: 0px;
}
	#monthC{
		width: 139px;
		display: inline-block;
	}
	body{
		display: flex;
		justify-content: space-around;
		padding-top: 70px;
		background:linear-gradient(to right, rgb(0, 0, 0), rgb(15, 155, 15));
	}
	table{
		padding:10px;
		text-align: right;
		border: 4px solid green;
		box-shadow: 20px 20px 10px black;
		background-color: #DAF7A6;
	}
	th{
		padding: 10px;
		border:2px solid black;
		width:100px;
		text-align:center;
		background-color: white;
	}
	tr{
		margin:0px;
	}
	td{
		padding:20px 10px;
		width:100px;
		height: 30px;
		border: 1px solid green;
		font-size:30px;
		background-color: #DAF7A6;
	}
	td.today{
		padding:20px 10px;
		width:100px;
		height: 30px;
		border: 1px solid green;
		font-size:30px;
		color: white;
		background-color: green;
	}
	.month{
		height: 50px;
		border-left:none;
		border-right:none;
		background-color: green;
		color:white;
		font-size:30px;
	}
	button{
		padding: 12px;
		border-radius: 5px;
		font-size:30px;
	}
＆＃13; 
<html>
<head>
	<title>calendar</title>
</head>
<body> 
<table>
	<tr>
	<th colspan="7" class="month">
	<button id="monthP"> << </button>
	<button id="yearP"> < </button>
	<div id="monthC">January</div>'<span id="yearC">2017</span>
	<button id="yearN"> > </button>
	<button id="monthN"> >> </button>
	</th>
	</tr>
	<tr>
	<th>Monday</th>
	<th>Tuesday</th>
	<th>Wednesday</th>
	<th>Thursday</th>
	<th>Friday</th>
	<th>Saturday</th>
	<th>Sunday</th>
	</tr>
	<tr>
	<td>30</td>
	<td>31</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td>01</td>
	</tr>
	<tr>
	<td>02</td>
	<td>03</td>
	<td>04</td>
	<td>05</td>
	<td>06</td>
	<td>07</td>
	<td>08</td>
	</tr>
	<tr>
	<td>09</td>
	<td>10</td>
	<td>11</td>
	<td>12</td>
	<td>13</td>
	<td>14</td>
	<td>15</td>
	</tr>
	<tr>
	<td>16</td>
	<td>17</td>
	<td>18</td>
	<td>19</td>
	<td>20</td>
	<td>21</td>
	<td>22</td>
	</tr>
	<tr>
	<td>23</td>
	<td>24</td>
	<td>25</td>
	<td>26</td>
	<td>27</td>
	<td>28</td>
	<td>29</td>
	</tr>
</table>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我尝试过实施，但没有改变。任何帮助将不胜感激。 提前谢谢。

3 个答案:

答案 0 :(得分：1)

您可以保存一个变量来存储当前月份，每次更改月份时都会更新，然后每次更改月份时都必须调用changeback（）函数。还使用字符串文字'white'而不是white来更新背景，这将是一个未定义的变量。 

var monthArray = ['January','February','March','April','May','June','July','August','September','October','November','December'],currentMonth;    	

 	function changeTable (){
 		year = document.getElementById("yearC").textContent;
 		month = monthArray.indexOf(document.getElementById("monthC").textContent);
 		maxDays = new Date(year,month+1,0).getDate();
 		startingDay = new Date(year,month,1).getDay();

 		if(startingDay!=0){
 			startingDay -=1;
 		}else{
 			startingDay = 6;
 		}
 		tds = document.querySelectorAll('td');
 		var date = 0;
 		for(var i = 0;i<35;i++){
 			tds[i].textContent='';
 			tds[i].className = "";
 		}

 		for(var i = startingDay ;i<tds.length;i++){

 			date += 1
 			if(date>maxDays){
 				break;
 			}
 			
 			if(date<10){
 				tds[i].textContent = '0'+(date);
 			}
 			else{
 			 tds[i].textContent = date;
 			}
 			if(parseInt(new Date().getFullYear())==year && parseInt(new Date().getMonth())==month&&parseInt(new Date().getDate())==date){
 			
 				tds[i].className = "today";
 			
 			}
 		}
 		var i = 0;
 		while(maxDays>date){
 			tds[i].textContent = date+1;
 			date+=1;
 			i+=1;
 		}
 		

 			
 	}
	function prevYear(){
		text = document.getElementById("yearC");
		text.textContent = parseInt(text.textContent)-1;
		changeTable();
	}
	function prevMonth(){
		text = document.getElementById("monthC");
		var i = monthArray.indexOf(text.textContent)
		if(i == 0){
			i = 11;
			text1 = document.getElementById("yearC");
			text1.textContent = parseInt(text1.textContent)-1;
		}else{
			i-=1;
		}
		text.textContent = monthArray[i];
        currentMonth = monthArray[i];
		changeTable();
        changeback();
	}
	function nextMonth(){
		text = document.getElementById("monthC");
		var i = monthArray.indexOf(text.textContent)
		if(i == 11){
			i = 0;
			text1 = document.getElementById("yearC");
			text1.textContent = parseInt(text1.textContent)+1;
		}else{
			i+=1;
		}
		text.textContent = monthArray[i];
        currentMonth = monthArray[i];
		changeTable();
        changeback();
	}
	function nextYear(){
		text = document.getElementById("yearC");
		text.textContent = parseInt(text.textContent)+1;
		changeTable();
	}
	yearP = document.getElementById("yearP");
	yearN = document.getElementById("yearN");
	monthP = document.getElementById("monthP");
	monthN = document.getElementById("monthN");
	yearP.addEventListener('click',prevYear);
	yearN.addEventListener('click',nextYear);
	monthN.addEventListener('click',nextMonth);
	monthP.addEventListener('click',prevMonth);
	
	function intial(){

	}	




function changeback (){
	if (currentMonth == 'January')
	{
    document.body.style.background = 'white';
}
	}
*{
	margin: 0px;
}
	#monthC{
		width: 139px;
		display: inline-block;
	}
	body{
		display: flex;
		justify-content: space-around;
		padding-top: 70px;
		background:linear-gradient(to right, rgb(0, 0, 0), rgb(15, 155, 15));
	}
	table{
		padding:10px;
		text-align: right;
		border: 4px solid green;
		box-shadow: 20px 20px 10px black;
		background-color: #DAF7A6;
	}
	th{
		padding: 10px;
		border:2px solid black;
		width:100px;
		text-align:center;
		background-color: white;
	}
	tr{
		margin:0px;
	}
	td{
		padding:20px 10px;
		width:100px;
		height: 30px;
		border: 1px solid green;
		font-size:30px;
		background-color: #DAF7A6;
	}
	td.today{
		padding:20px 10px;
		width:100px;
		height: 30px;
		border: 1px solid green;
		font-size:30px;
		color: white;
		background-color: green;
	}
	.month{
		height: 50px;
		border-left:none;
		border-right:none;
		background-color: green;
		color:white;
		font-size:30px;
	}
	button{
		padding: 12px;
		border-radius: 5px;
		font-size:30px;
	}
<html>
<head>
	<title>calendar</title>
</head>
<body> 
<table>
	<tr>
	<th colspan="7" class="month">
	<button id="monthP"> << </button>
	<button id="yearP"> < </button>
	<div id="monthC">January</div>'<span id="yearC">2017</span>
	<button id="yearN"> > </button>
	<button id="monthN"> >> </button>
	</th>
	</tr>
	<tr>
	<th>Monday</th>
	<th>Tuesday</th>
	<th>Wednesday</th>
	<th>Thursday</th>
	<th>Friday</th>
	<th>Saturday</th>
	<th>Sunday</th>
	</tr>
	<tr>
	<td>30</td>
	<td>31</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td>01</td>
	</tr>
	<tr>
	<td>02</td>
	<td>03</td>
	<td>04</td>
	<td>05</td>
	<td>06</td>
	<td>07</td>
	<td>08</td>
	</tr>
	<tr>
	<td>09</td>
	<td>10</td>
	<td>11</td>
	<td>12</td>
	<td>13</td>
	<td>14</td>
	<td>15</td>
	</tr>
	<tr>
	<td>16</td>
	<td>17</td>
	<td>18</td>
	<td>19</td>
	<td>20</td>
	<td>21</td>
	<td>22</td>
	</tr>
	<tr>
	<td>23</td>
	<td>24</td>
	<td>25</td>
	<td>26</td>
	<td>27</td>
	<td>28</td>
	<td>29</td>
	</tr>
</table>
</body>
</html>

答案 1 :(得分：1)

您可以设置样本颜色数组colorArray，然后在更新背景线性渐变的函数中使用该数组，如下所示：

function changeBgColor(index) {
  document.body.style.background = 'linear-gradient(to right, '+colorArray[index]+','+colorArray[index+1]+')';
}

将此函数放入prevMonth和nextMonth函数中，并将当前索引作为参数传递。

尝试 CodePen Demo 或以下代码段：

var colorArray = [
  "AliceBlue",
  "AntiqueWhite",
  "Aqua",
  "Aquamarine",
  "Azure",
  "Beige",
  "Bisque",
  "Black",
  "BlanchedAlmond",
  "Blue",
  "BlueViolet",
  "Brown",
  "BurlyWood"
];


var monthArray = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

function changeBgColor(index) {
  document.body.style.background = 'linear-gradient(to right, ' + colorArray[index] + ',' + colorArray[index + 1] + ')';
}

function changeTable() {
  year = document.getElementById("yearC").textContent;
  month = monthArray.indexOf(document.getElementById("monthC").textContent);
  maxDays = new Date(year, month + 1, 0).getDate();
  startingDay = new Date(year, month, 1).getDay();

  if (startingDay != 0) {
    startingDay -= 1;
  } else {
    startingDay = 6;
  }
  tds = document.querySelectorAll("td");
  var date = 0;
  for (var i = 0; i < 35; i++) {
    tds[i].textContent = "";
    tds[i].className = "";
  }

  for (var i = startingDay; i < tds.length; i++) {
    date += 1;
    if (date > maxDays) {
      break;
    }

    if (date < 10) {
      tds[i].textContent = "0" + date;
    } else {
      tds[i].textContent = date;
    }
    if (
      parseInt(new Date().getFullYear()) == year &&
      parseInt(new Date().getMonth()) == month &&
      parseInt(new Date().getDate()) == date
    ) {
      tds[i].className = "today";
    }
  }
  var i = 0;
  while (maxDays > date) {
    tds[i].textContent = date + 1;
    date += 1;
    i += 1;
  }
}

function prevYear() {
  text = document.getElementById("yearC");
  text.textContent = parseInt(text.textContent) - 1;
  changeTable();
}

function prevMonth() {
  text = document.getElementById("monthC");
  var i = monthArray.indexOf(text.textContent);
  if (i == 0) {
    i = 11;
    text1 = document.getElementById("yearC");
    text1.textContent = parseInt(text1.textContent) - 1;
  } else {
    i -= 1;
  }
  text.textContent = monthArray[i];
  changeBgColor(i)
  changeTable();
}

function nextMonth() {
  text = document.getElementById("monthC");
  var i = monthArray.indexOf(text.textContent);
  if (i == 11) {
    i = 0;
    text1 = document.getElementById("yearC");
    text1.textContent = parseInt(text1.textContent) + 1;
  } else {
    i += 1;
  }
  text.textContent = monthArray[i];
  changeBgColor(i)
  changeTable();
}

function nextYear() {
  text = document.getElementById("yearC");
  text.textContent = parseInt(text.textContent) + 1;
  changeTable();
}
yearP = document.getElementById("yearP");
yearN = document.getElementById("yearN");
monthP = document.getElementById("monthP");
monthN = document.getElementById("monthN");
yearP.addEventListener("click", prevYear);
yearN.addEventListener("click", nextYear);
monthN.addEventListener("click", nextMonth);
monthP.addEventListener("click", prevMonth);

function intial() {}

month5 = document.getElementById("monthP");

function changeback() {
  if (month5 == "January") {
    document.body.style.background = '#fff';
  }
}
* {
  margin: 0px;
}

#monthC {
  width: 139px;
  display: inline-block;
}

body {
  display: flex;
  justify-content: space-around;
  padding-top: 70px;
  background: linear-gradient(to right, rgb(0, 0, 0), rgb(15, 155, 15));
}

table {
  padding: 10px;
  text-align: right;
  border: 4px solid green;
  box-shadow: 20px 20px 10px black;
  background-color: #DAF7A6;
}

th {
  padding: 10px;
  border: 2px solid black;
  width: 100px;
  text-align: center;
  background-color: white;
}

tr {
  margin: 0px;
}

td {
  padding: 20px 10px;
  width: 100px;
  height: 30px;
  border: 1px solid green;
  font-size: 30px;
  background-color: #DAF7A6;
}

td.today {
  padding: 20px 10px;
  width: 100px;
  height: 30px;
  border: 1px solid green;
  font-size: 30px;
  color: white;
  background-color: green;
}

.month {
  height: 50px;
  border-left: none;
  border-right: none;
  background-color: green;
  color: white;
  font-size: 30px;
}

button {
  padding: 12px;
  border-radius: 5px;
  font-size: 30px;
}
<table>
  <tr>
    <th colspan="7" class="month">
      <button id="monthP"> << </button>
      <button id="yearP"> < </button>
      <div id="monthC">January</div>'<span id="yearC">2017</span>
      <button id="yearN"> > </button>
      <button id="monthN"> >> </button>
    </th>
  </tr>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
    <th>Sunday</th>
  </tr>
  <tr>
    <td>30</td>
    <td>31</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>01</td>
  </tr>
  <tr>
    <td>02</td>
    <td>03</td>
    <td>04</td>
    <td>05</td>
    <td>06</td>
    <td>07</td>
    <td>08</td>
  </tr>
  <tr>
    <td>09</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
  <tr>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
  </tr>
  <tr>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
    <td>29</td>
  </tr>
</table>

<强>更新

您可以对背景图片使用相同的想法。

将此添加到您的CSS：

background-image: url('https://placebear.com/1200/1200');

然后使用使用图像数组的changeBgImage函数更新JavaScript：

var backgroundImages = [];

for(var i=1;i<13;i++){
  backgroundImages.push('https://placebear.com/1200/120'+i);
}
function changeBgImage(index) {
  document.body.style.backgroundImage = 'url('+backgroundImages[index]+')';
}

将此changeBgImage函数放入prevMonth和nextMonth函数中，并将当前索引作为参数传递。

背景图片更改 CodePen Demo

答案 2 :(得分：1)

您的代码中有一些错误：

  1. 没有调用方法更改背景的方法 - 应该在月更改时添加（添加侦听器）。
  2. 你有很多缺少的分号 - 请仔细检查。
  3. 颜色应该写成字符串“white”而不仅仅是白色。

  4. 要获取month5的文本值，您应该使用“.textContent”：

    month5 = document.getElementById（“monthP”）。textContent;

  5. 您从错误的元素中获取月份名称，它应该来自“monthC”而不是“monthP”。

相关问题
最新问题