标签：box width color var js 简易 background 年历 放假
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
ul, li { list-style: none; }
#box { width: 300px; height: 500px; margin: 0 auto; background-color: gray; padding: 20px; overflow: hidden; }
#box .motherbox { width: 350px; height: 350px; }
.sel li { width: 80px; height: 80px; background-color: black; float: left; margin: 0 10px 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-size: 18px; font-weight: bolder; }
#box .sel .active { border: 1px solid black; color: crimson; background-color: white; }
#box .activity { width: 260px; padding: 10px; background-color: rgb(201, 197, 197); }
#box .activity strong { display: block; margin-bottom: 5px; } </style> </head>
<body> <div id="box"> <div class="motherbox"> <ul class="sel"> <li> <em>1</em> <strong>JAN</strong> </li> <li> <em>2</em> <strong>FER</strong> </li> <li> <em>3</em> <strong>MAR</strong> </li> <li> <em>4</em> <strong>APR</strong> </li> <li> <em>5</em> <strong>MAY</strong> </li> <li> <em>6</em> <strong>JUN</strong> </li> <li> <em>7</em> <strong>JUL</strong> </li> <li> <em>8</em> <strong>AUG</strong> </li> <li> <em>9</em> <strong>SEP</strong> </li> <li> <em>10</em> <strong>OCT</strong> </li> <li> <em>11</em> <strong>NOV</strong> </li> <li> <em>12</em> <strong>DEC</strong> </li> </ul> </div> <p class="activity"> <strong>1月活动</strong> <span>快过年了，大家可以商量着去哪里玩吧~</span> </p> </div> </body>
</html> <script> var arr = ["元旦：1月1日至3日放假三天。", "春节：2月2日至8日放假7天。", "妇女节：3月8日妇女节，与我无关。", "清明节：4月3日至5日放假3天", "劳动节：4月30日至5月2日放假3天。", "端午节：6月4日至6日放假3天。", "小暑：7月7日小暑。不放假。", "七夕节：8月6日七夕节。不放假。", "中秋节：9月10日至12日放假3天。", "国庆节：10月1日至7日放假7天。", "立冬：11月8日立冬。不放假。", "废除奴隶制国际日:12月2日。"] var oli = document.querySelectorAll("li"); var ostr = document.querySelector(".activity strong") var ospan = document.querySelector("span"); console.log(ostr) for (var i = 0; i < oli.length; i++) { oli[i].index = i; oli[i].onclick = function () { for (var i = 0; i < oli.length; i++) { oli[i].className = "";//清空格式，否则点击过的都会为active的样式 } this.className = "active";//点击时按钮的样式 for (var j = 0; j < arr.length; j++) { ospan.innerHTML = arr[this.index];//点击按钮时span内容改变 ostr.innerHTML = this.index + 1;//点击按钮时strong内容发生改变 } } } </script>
标签：box,width,color,var,js,简易,background,年历,放假 来源： https://www.cnblogs.com/bwnnxxx123/p/12990036.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。