javascript学习之时间组件

写了一个时间组件，哪里需要哪里调（菜鸟级别，大牛路过就Ok了）：

先有一个HTML文件：

 <!doctype>

 <html>

 <head>

 <title></title>

 <style>

 </style>

 <script src="calendar.js"></script>

 <script>

 window.onload=function(){

     myCalendar("date");

 }

 </script>

 </head>

 <body>

 <form action="a.html">

     <div style="position:relative; left:100px; top:10px;">

         买票日期:<input type="text" name="date">

     </div>

 </form>

 </body>

 </html>

接下来是一个Css样式文件：

 *{margin:0px;padding:0px;list-style:none;}

 .calendar{width:210px;border:1px solid #000; margin:0 auto;position:absolute;display:none;}

 .calendar h3{ height:30px; line-height:30px; text-align:center;}

 .calendar ol{ overflow:hidden; border-bottom:1px solid #ccc;}

 .calendar ol li{ width:30px; height:30px; line-height:30px; float:left; text-align:center;}

 .calendar ul {overflow:hidden;}

 .calendar ul li{ width:30px; height:30px; line-height:30px; float:left; text-align:center;font-family:"微软雅黑";font-size:14px;}

 .calendar .week{ color:red;}

 .calendar .pass{color:#ccc;}

 .calendar .today{color:#fff;background:#f60;}

 .calendar .prev,.calendar .next{position:absolute; top:10px; text-decoration:none;}

 .calendar .prev{ left:10px;}

 .calendar .next{ right:10px;}

 /*.calendar #h3{font-family:"微软雅黑";font-weight:normal;font-size:16px;}*/

下边是Js文件：

 (function(){

     function getPos(obj){

         var t=0;

         var l=0;

         while(obj){

             t+=obj.offsetTop;

             l+=obj.offsetLeft;

             obj=obj.offsetParent;

         }

         return {top:t,left:l};

     }

     var added=false;//用来判断是否加载边Css文件

     window.myCalendar = function(name){

         var oInput = document.getElementsByName(name)[0];

         var oBox = document.createElement("div");

         oBox.className = 'calendar';

         oBox.setAttribute('id','calendar');

         oInput.onclick = function(ev){

             var oEvent = ev || event;

             oEvent.cancelBubble = true;

         }

         oInput.onfocus = function(){

             oBox.style.display = 'block';

             oBox.style.left = getPos(oInput).left+'px';

             oBox.style.top = getPos(oInput).top+oInput.offsetHeight+'px';

         }

         // var onClicked = oBox.onclick = (function(){return true})();

         oBox.innerHTML='<a href="javascript:;" class="prev" id="prevMonty">←</a>'

             +'<a href="javascript:;" class="next" id="nextMonty">→</a>'

             +'<h3 id="h3">2014年3月</h3>                        '

             +'<ol>                                      '

             +'<li>一</li>                               '

             +'<li>二</li>                               '

             +'<li>三</li>                               '

             +'<li>四</li>                               '

             +'<li>五</li>                               '

             +'<li class="week">六</li>                  '

             +'<li class="week">日</li>                  '

             +'</ol>                                     '

             +'<ul>                                      '

             +'</ul>';

         document.body.appendChild(oBox);

         /*var oDiv = document.getElementById("calendar");*/

         var oUl = oBox.getElementsByTagName("ul")[0];

         var oPrev = document.getElementById('prevMonty');

         var oNext = document.getElementById("nextMonty");

         var oH3 = document.getElementById("h3");

         var iNow = 0;

         function reFresh(){

             oUl.innerHTML = '';//清空Ul

             //本月的1号是周几

             function getFirstDay(){

                 var oDate = new Date();

                 oDate.setMonth(oDate.getMonth()+iNow);

                 oDate.setDate(1);//将时间设置到本月的1号

                 return oDate.getDay();

             }

             var w = getFirstDay();

             if(w==0)w=7;//如果是周日，就让它等于7

             //创建空白Li

             for(var i=0;i<w;i++){

                 var oLi = document.createElement("li");

                 oUl.appendChild(oLi);

             }

             //本月的天数

             function getDays(){

                 var oDate = new Date();

                 oDate.setDate(1);

                 oDate.setMonth(oDate.getMonth()+iNow);

                 oDate.setMonth(oDate.getMonth()+1);//将日期调到下一个月

                 oDate.setDate(0);//将日期调到上个月的最后一天

                 return oDate.getDate();

             }

             var d = getDays();

             //创建Li

             for(var i=0;i<d;i++){

                 var oLi = document.createElement("li");

                 oLi.innerHTML = i+1;

                 //li点击事件

                 oLi.onclick = function(){

                     onClickBox = true;

                     var oDate = new Date();

                     oDate.setDate(1);

                     oDate.setMonth(oDate.getMonth()+iNow);

                     oInput.value = oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+this.innerHTML;

                     oBox.style.display = 'none';

                 }

                 oUl.appendChild(oLi);

             }

             //周末变红

             for(var i=0;i<oUl.children.length;i++){

                 if(i%7==0 || i%7==6){

                     oUl.children[i].className = "week";

                 }

             }

             if(iNow < 0){

                 for(var i=0;i<oUl.children.length;i++){

                     oUl.children[i].className = 'pass';

                 }

             }else if(iNow > 0){

             }else{

                 //让过去的变灰，当前的高亮

                 var oDate = new Date();

                 oDate.setMonth(oDate.getMonth()+iNow);

                 var today = oDate.getDate();

                 for(var i=0;i<oUl.children.length;i++){

                     if(oUl.children[i].innerHTML < today){

                         oUl.children[i].className = 'pass';

                     }else if(oUl.children[i].innerHTML == today){

                         oUl.children[i].className = 'today';

                     }

                 }

             }

             var oDate = new Date();

             oDate.setDate(1);

             oDate.setMonth(oDate.getMonth()+iNow);

             oH3.innerHTML = oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月';

         }

         reFresh();

         oNext.onclick = function(){

             iNow++;

             reFresh();

         }

         oPrev.onclick = function(){

             iNow--;

             reFresh();

         }

         oBox.onclick = function(ev){

             var oEvent = ev || event;

             if(window.event){

                 oEvent.cancelBubble = true;

             }else{

                 oEvent.stopPropagation();

             }

         }

         //css文件加载

         if(added)return;

         added = true;

         var oLink = document.createElement('link');

         oLink.rel = "stylesheet";

         oLink.href="calendar.css";

         oLink.type = "text/css";

         var oHead = document.getElementsByTagName('head')[0];

         oHead.appendChild(oLink);

     }

     document.onclick = function(){

         var oBox = document.getElementById('calendar');

         oBox.style.display = 'none';

     }

 })();

javascript学习之时间组件的更多相关文章

如何在Rails6内通过Webpacker使用JavaScript; flatpicker日期时间组件选择器
如何在Rails6内通过Webpacker使用JavaScript; Rails6默认不再使用asset pipeline,改用Webpacker. 文件结构变化: 配置文件: webpacker.y ...
数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
HTML5 例子学习 HT 图形组件
HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...
JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
JavaScript学习05 定时器
JavaScript学习05 定时器定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...
JavaScript学习04 对象
JavaScript学习04 对象默认对象日期对象Date, 格式:日期对象名称=new Date([日期参数]) 日期参数: 1.省略(最常用): 2.英文-数值格式:月日,公元年 [时:分: ...
JavaScript学习中的挑战
当人们尝试学习 JavaScript , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过其他语言的时候.很难找到学习的时间(有时候是动力).一旦当你理解了一些东西的 ...

随机推荐

PhpStorm 2016.3 For Mac 重大里程碑更新 -- 终于解决了不能输入中文标点符号的重大bug
PhpStorm 2016.3 For Mac 重大里程碑更新 1.[终于解决了]不能输入中文标点符号的重大bug,如逗号“,”.“.”: 2.可以在一个窗体中,同时打开多个项目: 3.其他... ...
ReactiveCocoa源码拆分解析(七)
(整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) 在这篇博客中,我将把ReactiveCocoa中的擦 ...
php文件类
1.需求了解php对文件的一些操作 2.例子写了一个类,可以操作文件,包含增,删,查 <?php class myfile{ public function write_file($stri ...
python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
Linux 下测试串口的命令microcom
昨天应为要测试主板上的串口,查了一下,可以使用microcom 这条命令进行测试. 命令使用方法很简单: Usage: microcom [-d DELAY] [-t TIMEOUT] [-s SPE ...
OpenCV 2.4.13 编译使用(VS2015下)
OpenCV2.4.13编译(VS2015) 这里给出已经编译好的的下载路径.包括Win64的debug和release版本. OpenCV for MSVC14 Win64 1.下载OpenCV源码 ...
jquery-简单拖拽代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
windows Service
用c#中创建一个windows服务非常简单,与windows服务相关的类都在System.ServiceProcess命名空间下. 每个服务都需要继承自ServiceBase类,并重写相应的启动.暂停 ...
【python】描述符descriptor
开始看官方文档,各种看不懂,只看到一句Properties, bound and unbound methods, static methods, and class methods are all ...
编辑 Ext 表格（二）——— 编辑表格元素
一.编辑单元格 Ext 中通过配置表格的属性 plugins 来设置表格是否可编辑, 表格的配置具体如下: var gridTable = Ext.create('Ext.grid.Panel', { ...

javascript学习之时间组件

javascript学习之时间组件的更多相关文章

随机推荐

热门专题