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 , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过其他语言的时候.很难找到学习的时间(有时候是动力).一旦当你理解了一些东西的 ...
随机推荐
- IBAction和IBOutlet
- IBAction: - 本质就是void - 能让方法具备连线的功能- IBOutlet - 能让属性具备连线的功能
- Asp.Net Core--自定义基于策略的授权
翻译如下: 在封面下,角色授权和声明授权使用需求,需求的处理程序和预配置的策略. 这些构建块允许您在代码中表示授权评估,从而允许更丰富,可重用和容易测试的授权结构. 授权策略由一个或多个需求组成,并在 ...
- Java Native Interfce三在JNI中使用Java类的普通方法与变量
本文是<The Java Native Interface Programmer's Guide and Specification>读书笔记 前面我们学习了如何在JNI中通过参数来使用J ...
- 听说你们要开始学C了
同学们好: 先自我介绍一下,我是你们的助教吴喆(厚颜无耻地要求大家叫我吉吉老师:-D),本科学的电子,所以陆陆续续接触了不少C/C++的工作,曾经被编码折磨得死去活来,如今却对其念念不舍,颇有点“斯德 ...
- django orm字段和参数
字段 1.models.AutoField 自增列 = int(11) 如果没有的话,默认会生成一个名称为 id 的列,如果要显示的自定义一个自增列,必须将给列设置为主键 primary_key=Tr ...
- 一个简单的servlet的demo
javaweb 的应用我们需要参考javaee api 查找servlet接口 javax.servletInterface Servlet All Known Subinterfaces: Ht ...
- Ubuntu 14.4 配置
1.安装 Orcal Java 使用下面的命令安装,只需一些时间,它就会下载许多的文件,所及你要确保你的网络环境良好: sudo add-apt-repository ppa:webupd8team/ ...
- iOS开发UI篇—核心动画(关键帧动画)
转自:http://www.cnblogs.com/wendingding/p/3801330.html iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimatio ...
- 《BuildingMachineLearningSystemsWithPython》学习笔记
BuildingMachineLearningSystemsWithPython Python机器学习入门 数据分析五个步骤 读取和清洗数据 探索和理解输入数据[我的理解是业务理解] 分析如何将算法应 ...
- xml Schema 基础
Schema比DTD好在哪儿? 后者简单易用,前者功能更强大也更复杂.DTD可以定义XML文档的结构,但无法对XML元素的内容进行约束,例如,如果希望某个XML元素的内容只能是日期型的数据,DTD就无 ...