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 相关文章推荐
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
JS实现可控制的进度条
Mar 25 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
Javascript技术技巧大全(五)
2007/01/22 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python实现求数列和的方法示例
2018/01/12 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
质量管理标语
2014/06/12 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书