js编写的日历

最新推荐文章于 2024-05-17 14:54:19 发布
最新推荐文章于 2024-05-17 14:54:19 发布
阅读量417 收藏
点赞数
文章标签： JavaScript prototype J# XHTML CSS ViewUI

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 日历</title>
<script language="JavaScript">
<!--
function Calendar(name){
 document.write('<div id="calendar"></div>');
 this.name = name;
 this.now = new Date();
 this.year = this.now.getFullYear();
 this.month = this.now.getMonth();
 this.day = this.now.getDate();
 this.monthName = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
 this.weekName = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
 this.daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
 this.element = document.getElementById('calendar');
 this.init();
}
Calendar.prototype.init = function() {
 var strHtml = '';
 strHtml += this.createHead();
 strHtml += this.createWeek();
 strHtml += this.createDays();
 strHtml += this.createFoot();
 this.element.innerHTML = strHtml;
}
Calendar.prototype.getDays = function() {
 if (1 == this.month) return ((0 == this.year % 4) && (0 != (this.year % 100))) ||(0 == this.year % 400) ? 29 : 28;
 else return this.daysInMonth[this.month];
}
Calendar.prototype.createHead = function() {
 return '<span class="head">' + this.monthName[this.month] + ' ' + this.year + '</span>';
}
Calendar.prototype.createWeek = function() {
 var strResult = '';
 for (var i = 0; i < 7; i++) {
  if (i == 0 || i == 6) strResult += '<span class="we">';
  else strResult += '<span class="ww">';
  strResult += this.weekName[i].substr(0,2) + '</span>';
 }
 return strResult;
}
Calendar.prototype.createDays = function() {
 var strResult = '';
 var i = 0;
 var d = this.getDays();
 var n = Math.ceil(d / 7) * 7;
 var w = new Date(this.year, this.month, 1).getDay();
 for (var j = 0; j < w; j++) { //输出前空格
  i += 1;
  strResult += '<span>&nbsp;</span>';
 }
 for (var j = 1; j <= d; j++) { //输出日期格
  i += 1;
  if (j == this.day) {
   strResult += '<span class="today">' + j + '</span>';
  } else {
   var k = new Date(this.year, this.month, j).getDay();
   if (k == 0 || k == 6) {
    strResult += '<span class="weekend">' + j + '</span>';
   } else {
    strResult += '<span>' + j + '</span>';
   }
  }
 }
 for (var j = 0; j < (Math.ceil(i / 7) * 7 - i); j++) { //输出后空格
  strResult += '<span>&nbsp;</span>';
 }
 return strResult;
}
Calendar.prototype.createFoot = function() {
 return '<span class="foot"><a href="javascript:' + this.name + '.changeMonth(\'p\');" class="arrow">3</a> MONTH <a href="javascript:' + this.name + '.changeMonth(\'n\');" class="arrow">4</a>　　<a href="javascript:' + this.name + '.changeYear(\'p\');" class="arrow">3</a> YEAR <a href="javascript:' + this.name + '.changeYear(\'n\');" class="arrow">4</a></span>';
}
Calendar.prototype.changeYear = function(arg) {
 if (arg == 'p') this.year -= 1;
 if (arg == 'n') this.year += 1;
 this.init();
}
Calendar.prototype.changeMonth = function(arg) {
 var m;
 if (arg == 'p') m = this.month - 1;
 if (arg == 'n') m = this.month + 1;
 if (arg == 'p' || arg == 'n') {
  if ( m > -1 && m < 12) {
   this.month = m;
  } else if (m < 0) {
   this.year -= 1;
   this.month = 11;
  } else if (m > 11) {
   this.year += 1;
   this.month = 0;
  }
 }
 this.init();
}
//-->
</script>
<style type="text/css">
#calendar {
 width: 175px;
 border: 1px solid #cccccc;
 border-bottom: none;
 border-left: none;
}
#calendar span {
 width: 24px;
 color: #999999;
 font-size: 9px;
 font-family: Verdana, sans-serif;
 font-weight: normal;
 text-align: center;
 background-color: #FFFFFF;
 border-bottom: 1px solid #cccccc;
 border-left: 1px solid #cccccc;
 padding: 2px 0px 1px 0px;
 margin: 0px;
 float: left;
}
#calendar span.today {
 color: #0066ff;
 font-weight: bold;
 background-color: #f6f6f6;
}
#calendar span.head {
 width: 164px;
 color: #FFFFFF;
 text-align: left;
 font-weight: bold;
 font-family: Tahoma, sans-serif;
 background-color: #0033CC;
 border-bottom: none;
 padding: 2px 5px 1px 5px;
}
#calendar span.foot {
 width: 174px;
 color: #999999;
 text-align: center;
 font-weight: bold;
 font-family: Tahoma, sans-serif;
 background-color: #F0F0F0;
 padding: 0px;
}
#calendar a.arrow {
 color: #666666;
 font-family: webdings;
 font-weight: normal;
 text-decoration: none;
}
#calendar a:hover.arrow {
 color: #0000FF;
}
#calendar .ww, #calendar .we {
 color: #666666;
 font-weight: bold;
 font-family: Tahoma, sans-serif;
 background-color: #F0F0F0;
}
#calendar span.weekend, #calendar .we {
 color: #FF0000;
}
</style>

<body>
<script language="JavaScript">
<!--
cal = new Calendar('cal');
//-->
</script>
</body>
</html>
 

lululuaaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS获取当前时间的年，月，日，时间
那一刻的博客
11-11 362
var date = new Date(); date .getYear(); //获取当前年份(2位) date .getFullYear(); //获取完整的年份(4位) date .getMonth(); //获取当前月份(0-11,0代表1月) date .getDate(); //获取当前日(1-31) date .getDay(); //获取当前星期X(0-6,0代表星期天) date .getTime(); //获取当前时间(从1970.1.1开始的毫秒数) date .getH
js编写带阴历的日历
热门推荐
wuyou1336的博客
06-28 1万+
工作中要写一个带阴历的日历，自己调研了怎么做日历。      一.表格行数问题      既然要显示日期表格的话，首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天（日历上第1列是星期天）到星期六一共7列。要解决行数问题之前，还得先知道这个月的第1天是星期几，因为每个月的1号并不都是从日历上的星期天开始排的，可能1号是星期五，星期六也说不定，所以1号的左边部分，就得用
js实现日历效果
蓝朽的小世界
06-18 2749
js实现日历效果
js写简单日历
Myd
11-22 4130
写日历主要的是要搞清楚2点：1，每个月的第一天是周几？ 2，每个月有多少天？清楚这2个之后就可以完成一个最简单的日历了。而这2个问题可以轻易的调用js的api获取到。
使用js实现一个日历
最新发布
eren_yeger的博客
05-17 197
首先在html里面写一个div。下面是js部分的代码。
js制作日历
weixin_63794155的博客
09-21 1441
new Date()第3个参数默认为1，就是每个月的1号，将它设置为0后，new Date()会返回。可以获取y年第一天（1月1日）方法一：设置本月份天数参数为0 ，能返回当前月份总共天数。getDate()获取最后一天，即整月天数。，然后通过getDate()方法得到天数。
js实现日历 完整版
bobringtheboys的博客
10-13 748
【代码】js实现日历 完整版。
 js制作日历
上善若水
06-15 338
制作日历： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .ri.
基于javascript编写简单日历
10-22
主要介绍了基于javascript编写简单日历的相关资料,需要的朋友可以参考下
JavaScript 编写日历
08-20
本项目中，我们看到一个使用纯JavaScript编写的日历控件，它不仅能够展示日期，还实现了两个不同页面之间的值传递。这通常涉及到跨窗口通信，其中“window.opener”属性扮演了关键角色。 首先，让我们深入了解一下...
js编写当天简单日历效果【实现代码】
10-22
【JavaScript实现日历效果】 在JavaScript中，创建一个简单的日历效果主要涉及到以下几个核心知识点： 1. **日期对象处理**： JavaScript中的`Date`对象是处理日期和时间的关键。在示例中，`today = new Date()`...
自制日历，typescript编写
11-20
在编写日历应用时，TypeScript可以帮助开发者捕获潜在的类型错误，确保数据处理的正确性。 2. **日期处理** 在日历应用中，我们需要处理日期和时间。JavaScript的`Date`对象是处理日期的核心，但TypeScript提供了...
原生JavaScript实现自定义日历
qq_41812656的博客
09-22 1012
以下内容只返回js数据结构，css样式可以用grid布局自行开发，后续会把农历相关的数据也给补充上，如有错误，欢迎补充~~
用 JavaScript 编写日历
allway2的博客
05-27 4750
概述 在本教程中，我将介绍使用几行 JavaScript 将日历渲染到网页上。日历将包括仅使用普通旧 JavaScript的月份和年份的下拉列表。流程如下： 将月份渲染到下拉列表中 将年份渲染到下拉列表中 呈现当前选择的月/年组合的天数 更改月份/年份时重新绘制日历 更改月份和/或年份将重新绘制日历以匹配给定月份和年份的正确日期。 如果你是 JavaScript 的初学者，或者只是需要更多的洞察力，我强烈推荐你可以在亚马逊上购买的 JavaScript Ninja 的秘密。这是一本扎实的读物，本
教你用JavaScript制作小日历
小院里的霍大侠
12-07 1768
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
js简单实现日历
qwyio的博客
05-18 3293
示例代码 <template> <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) --> <li class="arrow hands el-icon-arrow-...
用JavaScript实现日历效果(仅展示获取到日历数据,样式自己写)
cha12138的博客
03-30 1196
用JavaScript实现日历效果
js简单日历制作
Cover_face
07-22 891
代码】js简单日历制作。
js之日历
时光清浅处，一步一安然
07-27 2778
js之日历 本文通过基础js来实现日历，如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } #calendar { width: 210px; margin: 100px auto;
好的，麻烦提供一份JavaScript编写日历代码。
02-14
可以的，以下是一份示例 JavaScript 代码，可以用来编写日历： var today = new Date(); var currentMonth = today.getMonth(); var currentYear = today.getFullYear(); var selectYear = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值