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 相关文章推荐
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
深入解析ES6中的promise
Nov 08 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 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 高手之路(二)
2006/10/09 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python实现上传下载文件功能
2020/11/19 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
电子信息专业自荐书
2014/02/04 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
2019财务毕业实习报告
2019/06/27 职场文书