十堰做网站的工作室,南京太阳宫网站建设,选择合肥网站建设,怎样自己做免费的网站实现效果图如下 实现逻辑#xff1a; 1.录入属相列表#xff08;列表顺序不可调整#xff09;#xff1b; 2.录入各属相相宜、相忌属相#xff1b; 3.输入年份后#xff0c;根据属相列表获取到正确的属相#xff1b; 4.根据获取的属相去展示宜、忌属相#xff1b; 5.打…实现效果图如下 实现逻辑 1.录入属相列表列表顺序不可调整 2.录入各属相相宜、相忌属相 3.输入年份后根据属相列表获取到正确的属相 4.根据获取的属相去展示宜、忌属相 5.打印年份前后十年宜、忌属相。
全部代码如下 shuxiang.html
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title获取属相/titlestyle* {margin: auto;padding: auto;text-align: center;}input[typenumber]::-webkit-inner-spin-button,input[typenumber]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin-right: 10px;}table {border-collapse: collapse;border-spacing: 0;width: 500px;border: 1px solid black;text-align: center;}caption {font-weight: bold;line-height: 40px;}th,td {border: 1px solid black;}#zodiacList {display: none;}#zodiacTabooTable,#zodiacListTable {display: none;}/stylescript// 数据初始化const zodiacs [鼠, 牛, 虎, 兔, 龙, 蛇, 马, 羊, 猴, 鸡, 狗, 猪];const zodiacObjectList {鼠: { 0: 龙、猴、牛, 1: 羊、马、兔、鸡 },牛: { 0: 鼠、蛇、鸡, 1: 龙、马、羊、狗、兔 },虎: { 0: 马、狗, 1: 蛇、猴 },兔: { 0: 羊、狗、猪, 1: 鼠、牛、龙、鸡、马 },龙: { 0: 鼠、猴、鸡, 1: 狗、牛、龙、兔 },蛇: { 0: 牛、鸡, 1: 虎、猴、猪 },马: { 0: 虎、羊、狗, 1: 鼠、牛、兔、马 },羊: { 0: 兔、马、猪, 1: 鼠、牛、狗 },猴: { 0: 鼠、龙, 1: 虎、蛇、猪 },鸡: { 0: 牛、龙、蛇, 1: 兔、鸡、狗 },狗: { 0: 虎、兔、马, 1: 牛、龙、羊、鸡 },猪: { 0: 羊、兔, 1: 蛇、猪、猴 }};// 获取属相function getZodiac(year) {const baseYear 1780;const index (year - baseYear) % 12;return zodiacs[index];}// 判断适宜属相function isSuitableZodiac(zodiac) {const zodiacTabooTable document.getElementById(zodiacTabooTable);zodiacTabooTable.style.display table;const zodiacTabooList document.getElementById(zodiacTabooList);const zodiacObject zodiacObjectList[zodiac];zodiacTabooList.innerHTML td${zodiac}/td td${zodiacObject[0]}/td td${zodiacObject[1]}/td;return zodiacObject;}// 获取输入年份前后x年的属相并生成列表function showZodiacList(year, obj) {const zodiacOkList obj[0].split(、);const zodiacErrorList obj[1].split(、);const zodiacList document.getElementById(zodiacList);zodiacList.style.display table;zodiacList.innerHTML caption前后10年属相对应年份/captiontrtd年份/tdtd属相/td/tr;for (let i year - 10; i year 10; i) {const listMenth document.createElement(tr);listMenth.innerHTML td${i}/td td${getZodiac(i)}/td;const zodiac getZodiac(i);if (zodiacOkList.includes(zodiac)) {listMenth.style.backgroundColor green;listMenth.style.color white;} else if (zodiacErrorList.includes(zodiac)) {listMenth.style.backgroundColor red;listMenth.style.color black;}if (i year) {listMenth.style.backgroundColor yellow;}zodiacList.appendChild(listMenth);}}// 获取年份并显示对应的属相function showZodiac() {const yearInput document.getElementById(yearInput);const zodiacOutput document.getElementById(zodiacOutput);const year parseInt(yearInput.value);yearInput.value ;if (year 1900 year 2999) {if (String(yearInput.value).includes(.)) {zodiacOutput.textContent 请输入一个整数年份;} else {const zodiac getZodiac(year);const SuitableZodiac isSuitableZodiac(zodiac);zodiacOutput.textContent ${year}年对应的属相是${zodiac};showZodiacList(year, SuitableZodiac);}} else {zodiacOutput.textContent 请输入一个有效的年份(1900~2999);}}/script
/headbodylabel foryearInput输入年份/labelinput typenumber idyearInput min1900 max2999 step1 valuebutton onclickshowZodiac()获取属相/buttonp idzodiacOutput/ptable idzodiacTabooTablecaption属相宜忌/captiontrth属相/thth宜/thth忌/th/trtr idzodiacTabooList/trcaption绿色表示适宜红色表示相忌。/caption/tabletable idzodiacList/table
/body/html
