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树形控件脚本代码
Jul 24 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
express框架下使用session的方法
Jul 31 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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
phpmyadmin的#1251问题
2006/11/25 PHP
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
Angularjs按需查询实例代码
2017/10/30 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python实现数独算法实例
2015/06/09 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
使用python3实现操作串口详解
2019/01/01 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python安装scipy的方法步骤
2019/06/26 Python
通过实例解析python描述符原理作用
2020/01/22 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
商务英语专业毕业生自荐信
2013/11/05 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
六年级作文之自救
2019/12/19 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js