2021-06-05 简易万年历的制作

html:
div.carlender>ul#box>li*12>h2+p
                       div#txt>h2+p

css:

script:

// 1.获取节点
var ali = document.querySelectorAll("li");
var h2 = document.querySelector("#txt>h2");
var p = document.querySelector("#txt>p");

// 2.创建一个数组用来放置p中的可能显示的文本内容
var arr = ["吉，有利建交、合作",
    "凶，诸事不宜",
    "吉，有利男女、社交",
    "大吉，宜远方好事",
    "宜变革，宜突破",
    "伤官主事，“三合”吉星入命",
    "运势特吉",
    "吉,财富运旺盛",
    "是非增多，谨慎行事",
    "运,时来运转，事事如意",
    "辰,鸿运当头，乐不思蜀",
    "行“六合贵人”、“枭神坐财”之吉运"
];

// 3.for中遍历点击事件
// for (var i = 0; i < ali.length; i++) {
//     document.onclick = function() {
//         console.log(i);//12 ...12 12
//     }
// }
// 4.发现bug:点击事件不能获取正在循环自增的i,解决方法:设置自定义属性代替i遍历
for (var i = 0; i < ali.length; i++) {
    //设置自定义属性ali_index
    ali[i].setAttribute("ali_index", i);
    // console.log(ali[i].getAttribute("ali_index")); //0 1 2...11 成功
    
    ali[i].onclick = function() {
        // 5.点击哪个,哪个就active,其他的就''(顺序:先全部' ',再为点击的元素设置active)
        for (var j = 0; j < ali.length; j++) {ali[j].className = '';
}
        this.className = "active";
        
        // 6.根据index索引改变h2中的文本内容(即,根据index调整几月份中的"几")
        var index = this.getAttribute("ali_index");
        h2.innerText = index + "月份";
        
        // 7.根据自定义属性显示p中的文本内容
        p.innerHTML = arr[index];
    }
}