使用JavaScript实现简单的万年历

最新推荐文章于 2022-08-01 16:06:04 发布

哎哎哎哎Ting

最新推荐文章于 2022-08-01 16:06:04 发布

阅读量1k

点赞数 1

文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_45195822/article/details/100054918

版权

使用JavaScript实现简单的万年历

效果如下：
在这里插入图片描述
点击每个月份时改变相应样式，以及文字内容。

先写出大致结构：

<body>
    <div id="tab" class="calendar">
        <ul id="box">
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li ><h2>2</h2><p>FER</p></li>
            <li ><h2>3</h2><p>MAR</p></li>
            <li ><h2>4</h2><p>APR</p></li>
            <li ><h2>5</h2><p>MAY</p></li>
            <li><h2>6</h2><p>JUN</p></li>
            <li><h2>7</h2><p>JUL</p></li>
            <li><h2>8</h2><p>AUG</p></li>
            <li><h2>9</h2><p>SEP</p></li>
            <li><h2>10</h2><p>OCT</p></li>
            <li><h2>11</h2><p>NOV</p></li>
            <li><h2>12</h2><p>DEC</p></li>
        </ul>
        <div class="text" id="txt">
            <h2>1月活动</h2>
            <p>好好学习，天天向上</p>
        </div>
    </div>
</body>

js代码：

//新建数组用来存放相应的文本内容
    var arr=['快过年了，大家可以商量着去哪玩吧～',
		'大家好好学习吧222222~~~',
		'大家好好学习吧222222333~~~',
		'大家好好学习吧222444222~~~',
		'大家好好学习555吧222222~~~',
		'大家好好学习吧666222222~~~',
		'大家好好学习吧227772222~~~',
		'大家好好学习吧28888822222~~~',
		'大家好好学习吧99999222222~~~',
		'大家好好学习10000000吧222222~~~',
		'大家好好学习吧111111222222~~~',
		'大家好好学习吧22222200000000000~~~']
    
    var ali = document.querySelectorAll("#box li");
    var oh2 = document.getElementById("txt").children[0];
    var op = document.getElementById("txt").children[1];

      // 所有li绑定点击事件
     //循环立即执行，不会等事件
    for(var i=0;i<ali.length;i++){
        // 提前给每个li都编号（默认没有编号）
        ali[i].abc = i;
        // 事件在将来被点击的时候触发
        ali[i].onclick = function(){
            // 再写一个循环，重新遍历li
            // 取消所有
            for(var j=0;j<ali.length;j++){
                ali[j].className = "";
            }
            // 给当前加上类名，改变当前样式
            this.className = "active";

            // 找到索引
            console.log(this.abc)
            // 根据索引找到数组中的数据
            oh2.innerHTML = this.abc+1 + "月活动";
            op.innerHTML = arr[this.abc]
        }
    }
</script>

点击切换如下：

在这里插入图片描述
这个案例关键之处就在点击时通过改变其类名来改变样式，所以熟练使用这一点，很多相似的案例都可用此解决。

哎哎哎哎Ting

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript实现简单的万年历

使用JavaScript实现简单的万年历效果如下：点击每个月份时改变相应样式，以及文字内容。先写出大致结构：<body> <div id="tab" class="calendar"> <ul id="box"> <li class="active"><h2>1</h2&gt...
复制链接

扫一扫