H5中使用JS实现简易日历

来源：互联网发布：手机淘宝店铺关注链接编辑：程序博客网时间：2024/05/22 11:09

1、this：当前发生事件的元素

2、value：改变标签里的内容（给input使用）
innerHTML：也改变标签里的内容（但是针对div、span等标签）

3、数组的定义与使用
-定义：arr=[1,2,3]
-使用：arr[0]

4、字符串连接
-作用：连接两个字符串
-问题：连接中的优先级（从前往后相加）

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        /*div{*/            /*width: 200px;*/            /*height: 150px;*/            /*border: 1px solid #ccc;*/        /*}*/        *{            padding: 0;            margin: 0px;        }        #div1{            width: 190px;            height: 320px;            background: #ccc;            padding: 20px;        }        ul{            list-style: none;            width: 190px;            height: 240px;            clear: both;        }        ul li{            width: 50px;            height: 50px;            background: #434343;            color: #fff;            float: left;            text-align: center;            margin: 6px;        }        #div1 div{            background: #fff;            padding: 5px;            margin: 10px 5px 0 5px;        }        .active{            background: #ffffff;            color: red;        }        /*p{*/            /*line-height: 20px;*/        /*}*/    </style>    <script>//        window.onload = function(){//            var otxt = document.getElementById('txt');//            var obtn = document.getElementById('btn');//            var odiv = document.getElementById('div1');//            obtn.onclick = function(){//                odiv.innerHTML = otxt.value;//            }//        }        window.onload = function(){            var arr = [                    '这是一月份的活动',                    '这是二月份的活动',                    '这是三月份的活动',                    '这是四月份的活动',                    '这是五月份的活动',                    '这是六月份的活动',                    '这是七月份的活动',                    '这是八月份的活动',                    '这是九月份的活动',                    '这是十月份的活动',                    '这是十一月份的活动',                    '这是十二月份的活动',            ];            var odiv = document.getElementById('div1');            var oli = odiv.getElementsByTagName('li');            var adiv = odiv.getElementsByTagName('div')[0];            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].style.background = '#343434'                        oli[i].style.color = '#fff'                    }                    this.style.background = 'white';                    this.style.color = "red";                    adiv.innerHTML = '<h2>'+ (this.index + 1) + '月的活动</h2>' + arr[this.index];                }            }        }    </script></head><body>    <!--<input id="txt" type="text"/>-->    <!--<input id="btn" type="button" value="改变"/>-->    <!--<div id="div1"></div>-->    <div id="div1">        <ul>            <li class="active"><b>1</b><p>JAN</p></li>            <li><b>2</b><p>FER</p></li>            <li><b>3</b><p>MAR</p></li>            <li><b>4</b><p>ARP</p></li>            <li><b>5</b><p>MAY</p></li>            <li><b>6</b><p>JUN</p></li>            <li><b>7</b><p>JUL</p></li>            <li><b>8</b><p>AUG</p></li>            <li><b>9</b><p>SEP</p></li>            <li><b>10</b><p>OCT</p></li>            <li><b>11</b><p>NOV</p></li>            <li><b>12</b><p>DEC</p></li>        </ul>        <div>            <h2>1月活动</h2>            <p>快过年了，大家快乐健康会很好看</p>        </div>    </div></body></html>

初始状态点击第八个时的状态

分析：利用js，每点击一个月份，下边div出现不同的内容提示

2 0