js中的经典案例--简易万年历

html代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

        * { padding: 0; margin: 0; }

        li { list-style: none; }

        body { background: #f6f9fc; font-family: arial; }

        .calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }

        .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }

        .calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }

        .calendar li h2 { font-size: 20px; padding-top: 5px; }

        .calendar li p { font-size: 14px; }

        .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }

        .calendar .active p { font-weight: bold; }

        .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }

        .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }

        .calendar .text p { font-size: 12px; line-height: 18px; }

        </style>

</head>

<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代码实现对页面的控制，主要修改点击时页面的变话

<script type="text/javascript">

     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;

         // 所有li绑定点击事件

         // 循环立即执行，不会等事件

        for(var i=0;i<ali.length;i++){

        //给每一个li编号;

            ali[i].abc=i;

            //点击列表时让列表变色;循环不会等事件;如果不重新遍历一次;那么点击的时候循环早遍历完了;点击时的i=ali.length;

            ali[i].onclick=function(){

                for(j=0;j<ali.length;j++){

                //让每次li都没有class属性;每次点击后再给他添加属性;

                    ali[j].className="";

                }

                    //this指向调用这个函数的对象；

                console.log(this);

                //给当前加上class名,点到谁就会变色

                this.className="active";

                console.log(this.abc)

                //根据索引找到数组中的数据

                oh2.innerHTML=this.abc+1+"月活动";

                op.innerHTML=arr[this.abc];

            }

        }

</script>

js中的经典案例--简易万年历的更多相关文章

  1. JS中最经典的全局变量和局部变量问题

    话不多说,直接上例子: 1.程序的运行结果为:100  10  100 var a = 10; function test(){ a = 100; console.log(a); console.lo ...

  2. js中的小案例（一）

    效果图: html代码: <div id="date"> <p> <span id="prev">上一月</span& ...

  3. 拾取模型的原理及其在THREE.JS中的代码实现

    1. Three.js中的拾取  1.1. 从模型转到屏幕上的过程说开 由于图形显示的基本单位是三角形,那就先从一个三角形从世界坐标转到屏幕坐标说起,例如三角形abc 乘以模型视图矩阵就进入了视点坐标 ...

  4. JS中如何生成全局变量

    JS中如何生成全局变量 一.总结 一句话总结:在函数内部,一般用var声明的为局部变量,没用var声明的一般为全局变量 在函数内没用var声明的一般为全局变量 1.js中的函数中的this指向的是谁? ...

  5. JS中数值类型的本质

    一.JS中的数值类型 众所JS爱好友周知,JS中只有一个总的数值类型--number,它包含了整型.浮点型等数值类型.其中,浮点数的实现思想有点复杂,它把一个数拆成两部分来存储.第一部分是有效位数,也 ...

  6. 【JS中循环嵌套常见的六大经典例题+六大图形题，你知道哪几个？】

    首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...

  7. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  8. 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  9. php中foreach()函数与Array数组经典案例讲解

    //php中foreach()函数与Array数组经典案例讲解 function getVal($v) { return $v; //可以加任意检查代码,列入要求$v必须是数字,或过滤非法字符串等.} ...

随机推荐

  1. 前缀和序列 & 差分序列

    前缀和序列 所谓前缀和数组,就是从第一个元素到当前元素的和.假设这个前缀和数组为d[],原数组为a[],那么d[ i ] = a[ 1 ]+a[ 2 ]+a[ 3 ]+...+a[ i-1 ]+a[ ...

  2. 基于Zookeeper实现客户端动态监听服务器上下线

    一.在具体实现之前,先来了解一下Zookeeper的监听器的原理: 图中Main()线程作为客户端,当在主线程中创建Zookeeper客户端时,会默认创建两个子线程:Listener和connect, ...

  3. 毕设问题（2） fastjson 的过滤器使用（SSH hibernate）以及转换对象出现 $ref

    毕业设计,用SSH框架,但是想要做出异步请求数据的效果,使用了ajax方式,其中数据传递的类型为json.ajax使用用的jQuery的ajax.其实struts里也支持ajax功能,但是我觉得用太多 ...

  4. 牛客小白月赛16 D 小阳买水果 （思维题）

    链接:https://ac.nowcoder.com/acm/contest/949/D来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  5. Linux的运行级别和设置开机启动服务的方式

    Linux的运行级别 什么是运行级别呢?简单点来说,运行级别就是操作系统当前正在运行的功能级别.级别是从0到6,具有不同的功能.这些级别定义在/ect/inittab文件中.这个文件是init程序寻找 ...

  6. find命令进阶（三）：xargs

    The xargs command performs an interesting function. It accepts input from standard input and convert ...

  7. 【leetcode】1023. Camelcase Matching

    题目如下: A query word matches a given pattern if we can insert lowercaseletters to the pattern word so ...

  8. 【leetcode】905. Sort Array By Parity

    题目如下: 解题思路:本题和[leetcode]75. Sort Colors类似,但是没有要求在输入数组本身修改,所以难度降低了.引入一个新的数组,然后遍历输入数组,如果数组元素是是偶数,插入到新数 ...

  9. navicat12过期问题，Windows平台。

    首先关闭Navicat 然后 win+R,输入regedit 回车,打开注册表编辑器: 删除HKEY_CURRENT_USER\Software\PremiumSoft\Data 展开HKEY_CUR ...

  10. php ord()函数 语法

    php ord()函数 语法 作用:返回字符串的首个字符的 ASCII 值.直线电机生产厂家 语法:ord(string) 参数: 参数 描述 string 必须,要从中获得ASCII值的字符串 说明 ...