js制作简易年历完整实例


Posted in Javascript onJanuary 28, 2015

本文实例讲述了js制作简易年历的方法。分享给大家供大家参考。具体如下:

今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点。

innerHtml的用法

现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。

例如top.innerHTML="";就可以在top对应的位置出现一个button了!

程序实现思路:

1. 类似选项卡,只是底部有一个div;

2. innerHTML的使用

3.数组的使用

  ① 定义:arr[0,1,2,3]

  ② 使用:arr[0]

4.字符串连接

  ① 作用:连接两个字符串   “+”

  ② 问题:连接中的优先级 用()解决

实现源码:​

JavaScript:​​

<script type="text/javascript">  

    window.onload=function()  

    {  

        var arr=[  

                 '快过年了,大家一起去放鞭炮咯!',  

                  '马上上学了,不开心!',  

                   '妇女节快乐!',  

                   '很平淡的四月',  

                   '劳动光荣!',  

                   '儿童节快乐!',  

                   '好热的七月!',  

                   '八一建军节!',  

                   '又开学了哎!'  

        ];  

        var oDiv=document.getElementById('tab');  

        var oLi=oDiv.getElementsByTagName('li');  

        var oTxt=oDiv.getElementsByTagName('div')[0];  

        var i=0;  

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

        {  

            oLi[i].index=i;  

            oLi[i].onmouseover=function ()  

            {  

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

                 {  

                   

                    oLi[i].className='';  

                   

                 }  

              

                this.className='active';  

                oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';  

            };  

          

        }  

      

    };  

</script>

CSS:

<style type="text/css">  

* { padding: 0;margin: 0; }  

  

li { list-style: none; }  

  

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

  

.calendar { width: 210px;  

            margin: 50px auto 0;   

            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 h2 { }  

  

.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>

HTML:

<body>  

<div id="tab" class="calendar">  

    <ul>  

        <li class="active"><h2>1</h2><p>一月</p></li>  

        <li><h2>2</h2><p>二月</p></li>  

        <li><h2>3</h2><p>三月</p></li>  

        <li><h2>4</h2><p>四月</p></li>  

        <li><h2>5</h2><p>五月</p></li>  

        <li><h2>6</h2><p>六月</p></li>  

        <li><h2>7</h2><p>七月</p></li>  

        <li><h2>8</h2><p>八月</p></li>  

        <li><h2>9</h2><p>九月</p></li>  

        <li><h2>10</h2><p>十月</p></li>  

        <li><h2>11</h2><p>十一月</p></li>  

        <li><h2>12</h2><p>十二月</p></li>  

    </ul>  

    <div class="text">  

    </div>  

          

</div>  

</body>

效果图如下:

js制作简易年历完整实例

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
js 字符串操作函数
Jul 25 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
vue如何截取字符串
May 06 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 #Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 #Javascript
JavaScript插件化开发教程 (四)
Jan 27 #Javascript
JavaScript插件化开发教程 (三)
Jan 27 #Javascript
js实现简单随机抽奖的方法
Jan 27 #Javascript
JavaScript插件化开发教程 (二)
Jan 27 #Javascript
javascript将数字转换整数金额大写的方法
Jan 27 #Javascript
You might like
php用正则表达式匹配中文实例详解
2013/11/06 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
php写app用的框架整理
2019/09/29 PHP
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Python内置函数property()如何使用
2020/09/01 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
酒店管理毕业生自荐信
2013/10/24 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
实习护士自荐信
2015/03/25 职场文书
纪录片信仰观后感
2015/06/08 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Python实现列表拼接和去重的三种方式
2021/07/02 Python