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学习基础知识小结
Nov 25 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
python热力图实现简单方法
2021/01/29 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
职专应届生求职信
2013/11/16 职场文书
绩效专员岗位职责
2013/12/02 职场文书
自立自强的名人事例
2014/02/10 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
降价通知函
2015/04/23 职场文书
简单的辞职信模板
2015/05/12 职场文书
尊师重教主题班会
2015/08/14 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang