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 , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过其他语言的时候.很难找到学习的时间(有时候是动力).一旦当你理解了一些东西的 ...
随机推荐
- PF_INET 和 AF_INET 的区别
在写网络程序的时候,建立TCP socket: sock = socket(PF_INET, SOCK_STREAM, 0); 然后再绑定本地地址或连接远程地址时需要初始化sockaddr_in结构, ...
- mysql的DISABLE/ENABLE KEYS
有一个表 tbl1 的结构如下: CREATE TABLE `tbl1` ( `id` int(10) unsigned NOT NULL auto_increment, `name` char(20 ...
- css如何实现水平居中呢？css实现水平居中的方法？
面试中遇到的一个问题:如何让css实现水平居中?下面来看一下哪些方法能实现水平居中. 首先分两种情况,行内元素还是块级元素.然而块级元素又分为定宽块状元素和不定款块状元素.先来看下行内元素如何水平居中 ...
- JavaScript访问ab页面定时跳转代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java环境配置为1.7jdk为什么cmd java -version查看版本是1.8
记录一个小问题: 初始安装的是jdk1.8,后来项目需要要更换成jdk1.7, 因此将环境变量更改为jdk7的目录路径, 但是在cmd命令行运行java -version 发现还是jdk8 解决方法: ...
- Linux ftp访问控制配置,包括访问ftp权限和访问ftp目录权限
在Linux 上建立用户为website1 home目录是/data/home/website1 但是用ftp登录以后,路径可以随便切换,并且可以进入别的站点下 进行增.删.改 本篇的目的是:在lin ...
- tornado django flask 跨域解决办法（cors）
XMLHttpRequest cannot load http://www.baidu.com. No 'Access-Control-Allow-Origin' header is present ...
- rabbitmq 简单梳理
概念: 生产者(Producer,简写P),负责发布消息. “交换机”(Exchange, 简写X), 负责中转消息. 路由(Route, 简写R), 即 X->Q的路线名. 消息队列 (Que ...
- LeetCode 26 Remove Duplicates from Sorted Array
Problem: Given a sorted array, remove the duplicates in place such that each element appear only onc ...
- JAVA字符串格式化-String.format()的使用（转）
常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprintf()方法,两者有类似之处.format()方法有两种重 ...