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 , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过其他语言的时候.很难找到学习的时间(有时候是动力).一旦当你理解了一些东西的 ...
随机推荐
- java中的wait(),notify(),notifyAll(),synchronized方法
wait(),notify(),notifyAll()三个方法不是Thread的方法,而是Object的方法.意味着所有对象都有这三个方法,因为每个对象都有锁,所以自然也都有操作锁的方法了.这三个方法 ...
- CentOS6.3编译安装Nginx1.4.7 + MySQL5.5.25a + PHP5.3.28
[准备工作] #在编译安装lnmp之前,首先先卸载已存在的rpm包. rpm -e httpd rpm -e mysql rpm -e php yum -y remove httpd yum -y r ...
- 值得推荐的android开源框架
1.volley 项目地址https://github.com/smanikandan14/Volley-demo (1) JSON,图像等的异步下载: (2) 网络请求的排序(scheduling) ...
- word20161211
H.323 half-duplex / 半双工 handle count / 句柄数 handshaking / 握手 Hardware Compatibility List, HCL / 硬件兼容性 ...
- AngularJS 分页
前端源码: <div> <h1>列表页33</h1> <table> <thead> <tr><td>CandiID ...
- JAVA字符串格式化-String.format()的使用（转）
常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprintf()方法,两者有类似之处.format()方法有两种重 ...
- Oracle资源管理器介绍（一）
数据库资源管理器通过控制数据库内部的执行调度来控制资源在各个会话之间的分布.通过控制所要运行的会话以及会话运行的时间长度,数据库资源管理器可以确保资源分布与计划指令相匹配,因此也符合业务目标. ...
- winform TreeView的一些用法以及异步加载
今天,主要弄了一下对于树型控件的一些方法,以及异步加载.参考: http://www.cnblogs.com/greatverve/archive/2012/03/23/winform-treevie ...
- 简述抽象和封装，对你学习Java有一些作用
作为一个Java 初学者,对Java的理解可能有些片面,甚至有些错误的理解,对于观看此处的您,希望您选择性观看!!! 天知道我为什么选择学习编程,我不爱编程,但是我既然学习了,还是会努力学习的,在此分 ...
- css样式思维导图