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 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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 has encountered an Access Violation
2007/01/15 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python多进程机制实例详解
2015/07/02 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
日语专业毕业生求职信
2013/12/04 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
营销计划书
2015/01/17 职场文书
教师工作决心书
2015/02/04 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python