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 , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过其他语言的时候.很难找到学习的时间(有时候是动力).一旦当你理解了一些东西的 ...
随机推荐
- FindWindowEx用法
函数原型:HWND FindWindowEx(HWND hwndParent,HWND hwndChildAfter,LPCTSTR lpszClass,LPCTSTR lpszWindow): 参数 ...
- jsp动作元素之forward指令
forward指令用于将页面响应转发到另外的页面.既可以转发到静态的HTML页面,也可以转发到动态的JSP页面,或者转发到容器中的Servlet. forward指令格式如下: <jsp:for ...
- 用原生js实现的链式调用函数
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- python解析git log后生成页面显示git更新日志信息
使用git log可以查到git上项目的更新日志. 如下两个git项目,我想把git的日志信息解析成一个便于在浏览器上查看的页面. https://github.com/gityf/lua https ...
- 难道这就是JavaScript中的"闭包"
其实对于JavaScript中的"闭包"还没真正理解,这次在实际Coding中似乎遇到了"闭包"的问题,仅此摘录,以待深究. 表现为jQuery的post方法回 ...
- JavaScript 加载动画Canvas 设计
var c = document.getElementById('c'), ctx = c.getContext('2d'), cw = c.width = 400, ch = c.height = ...
- css3美化复选框checkbox
两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...
- Python之路,Day3 - Python基础3
一.文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- eclipse远程连接hive
创建项目,添加jar包,hive的s上,所以也需要hadoop的一些jar 这个图片是从网上找的,我直接使用的以前hadoop的项目 创建测试类,写测试代码 //获取jdbc链接 private ...
- UE移植到SAE云平台
应用架在新浪的SAE上,而同时功能中又需要用上编辑器,鉴于百度的UEditor功能强大,可定制,文档全,所以理所当然的用它.而新浪把本地文件的IO操作禁止了,使得UEdiotr的图片上传.附件和在线涂 ...