JS
// 切换li样式(循环排他思想)
var lis = document.getElementsByTagName('li');
var span1 = document.querySelectorAll('.span1');
var span2 = document.querySelectorAll('.span2');
var text = document.querySelector('.text');
var h4 = document.querySelector('h4');
var input = text.querySelector('input');
var data = ['这是一月的活动','这是二月的活动','这是三月的活动','这是四月的活动','这是五月的活动','这是六月的活动','这是七月的活动','这是八月的活动','这是九月的活动','这是十月的活动','这是十一月的活动','这是十二月的活动'];
for(var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function (){
// 当前被点击的索引号
var index = this.index;
for(var i = 0; i < lis.length; i++) {
lis[i].className = '';
span1[i].className = '';
span2[i].className = '';
}
lis[index].className = 'current';
span1[index].className = 'changeColor';
span2[index].className = 'changeColor';
// 文本框显示对应月份+月份活动
h4.innerHTML = (index + 1 ) +'月活动';
var data1 = data[index];
console.log(data1);
input.value = data1;
// 修改文本
// 文本获取焦点 文字清空
input.onfocus = function() {
input.value = '';
}
// 鼠标失去焦点 文本内容传给当前data数组元素
input.onblur = function() {
data[index] = input.value;
alert('已修改为：'+ data[index])
}
if(input.value ==='肥肥挨饿日') {
alert('恭喜你！这个月肥肥减肥，你可以吃双倍大餐！')
}
}
}
CSS
* {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.box {
margin: 100px auto;
width: 220px;
height: 370px;
background: #eae9e9;
padding: 10px;
}
.box .inner {
width: 100%;
height: 100%;
}
.inner li {
display: inline-block;
width: 60px;
height: 55px;
background-color: #424242;
padding-top: 5px;
margin-top: 10px;
border: 1px #fff solid;
cursor: pointer;
}
.box .inner li>span {
display: block;
color: #fff;
}
.box .inner li>span:first-child {
font-size: 20px;
font-weight: 600;
}
.box .inner li>span:last-child {
font-size: 14px;
}
.box .inner li:nth-child(1) {
margin-right: 3px;
}
.box .inner li:nth-child(2) {
margin-right: 3px;
}
.box .inner .current {
background-color: #fff;
border: #424242 solid 1px;
}
.box .inner .changeColor {
color: #e84a7e;
font-weight: 600;
}
/* text */
.box .inner .text {
width: 200px;
margin: 8px auto;
height: 70px;
background-color: #f1f1f1;
border: 1px #fff solid;
text-align: left;
}
.text h4 {
color: #424242;
text-align: left;
margin-left: 10px;
margin-top: 10px;
}
.text input {
color: #424242;
font-size: 10px;
border: none;
background: #f1f1f1;
margin-left: 10px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">
<div class="inner">
<ul>
<li class="current">
<span class="span1 changeColor">1</span>
<span class="span2 changeColor">JAN</span>
</li>
<li>
<span class="span1">2</span>
<span class="span2">FER</span>
</li>
<li>
<span class="span1">3</span>
<span class="span2">MAR</span>
</li>
</ul>
<ul>
<li>
<span class="span1">4</span>
<span class="span2">APR</span>
</li>
<li>
<span class="span1">5</span>
<span class="span2">MAY</span>
</li>
<li>
<span class="span1">6</span>
<span class="span2">JUN</span>
</li>
</ul>
<ul>
<li>
<span class="span1">7</span>
<span class="span2">JUL</span>
</li>
<li>
<span class="span1">8</span>
<span class="span2">AUG</span>
</li>
<li>
<span class="span1">9</span>
<span class="span2">SEP</span>
</li>
</ul>
<ul>
<li>
<span class="span1">10</span>
<span class="span2">OCT</span>
</li>
<li>
<span class="span1">11</span>
<span class="span2">NOV</span>
</li>
<li>
<span class="span1">12</span>
<span class="span2">DEC</span>
</li>
</ul>
<div class="text">
<h4>1月</h4>
<input type="text" name="" id="" value="这是一月的活动" style="text-align: left;">
</div>
</div>
</div>
</body>
<script src="./index.js" ></script>
</html>
网友评论