js一周日历课程表demo
㈠ js如何实现一周tab效果， 默认显示当天星期几的内容，tab可切换。
给你一个插件吧~不过要配合CSS哦~其实也没什么~就是有几个选项卡就写几个内容出来然后其他的隐藏，只让当前的显示~给你个JS插件，不懂的再问吧~不过要这个插件是JQ的~需要JQ库支持哈~最好的1.8.3的
㈡ js日历，中间的显示日历效果是怎么做的呢，星期随着日期变化
按照你的红框截图部分自己用js写了一个例子.实现你"上一月"和"下一月"等功能.需要的话采纳后hi我.发给你.
其他网友有需要的也可以hi我.大家共同学习.
㈢ js 日历中的日期和星期怎么对应的
根据你的提问，是抄选择页面上一个日期，然后判断被选择的日期是星期几么? 如果是：我给出的js如下： // js code // code描述： // year和date好说，就是你页面选择的实际值。这里要注意month，假如你页面选择的为7月， // 这里 的month应当为 7-1...
㈣ js Canvas实现的日历时钟案例有哪些
一、.获取上下文对象
var cxt = document.getElementById(‘元素名’).getContect(‘2d’);
IE8或更早的浏览器不支持元素。
二、 drawClock() – 实现画时钟
1. clearRect() 清空给定矩形内的指定像素。
context.clearRect(x,y,width,height);
属性 | 值
-----|------------
x,y | 要清除的矩形左上角点的(x,y)坐标
width,height| 要清除的矩形宽度和高度，单位为像素12345
2.new Date() — 得到系统时间
var sec = now.getSeconds(); var min = now.getMinutes(); var hour = now.getHours(); 123
3.画时钟的形状
cxt.beginPath(); cxt.lineWidth = 10; cxt.strokeStyle = "blue"; cxt.arc(550, 310, 300, 0, 360, false); cxt.closePath(); cxt.stroke(); 123456
beginPath()的作用是canvas的绘制方法，都会以上一次beginPath之后的所有路径为基础进行绘制。
closepath()是关闭路径，而不是结束路径，它会试图从当前路径的终点连一条路径到七、起点，让整个路径闭合起来。
cxt.lineWidth() ： 画笔的宽度
cxt.strokeStyle() : 设置或返回用于笔触的颜色、渐变或模式。
属性值：color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于创建 pattern 笔触的 pattern 对象
stroke ()绘制已定义的路径
arc() 方法创建弧/曲线（用于创建圆或部分圆）。如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
context.arc(x,y,r,sAngle,eAngle,counterclockwise);- function drawScale(size, width, color, value, startx, starty, endx, endy){
- for(var i = 0; i < size; i++){
- drawPointer(width, color, value, i, startx, starty, endx, endy);
- } } 12345
- function drawPointer(width, color, value, angle, startx, starty, endx, endy){
- cxt.save(); //先保存当前画布
- cxt.lineWidth = width; //设置画笔的宽度
- cxt.strokeStyle = color; //设置画笔的颜色
- cxt.translate(550, 310); //重置异次元空间的原点坐标
- cxt.rotate(value * angle * Math.PI / 180); //设置旋转的角度，参数是弧度
- cxt.beginPath();
- cxt.moveTo(startx, starty);
- cxt.lineTo(endx, endy);
- cxt.closePath(); //先闭合路径，再画线
- cxt.stroke(); //开始画线
- cxt.restore(); //将旋转后的线段返回给画布 } 12345678910111213
translate() 方法重新映射画布上的 (0,0) 位置。
-
- //获取上下文文档对象 var clock = document.getElementById('clock');
- var cxt = clock.getContext('2d');
- //画指针 function drawPointer(width, color, value, angle, startx, starty, endx, endy){
- cxt.save(); //先保存当前画布
- cxt.lineWidth = width; //设置画笔的宽度
- cxt.strokeStyle = color; //设置画笔的颜色
- cxt.translate(550, 310); //重置异次元空间的原点坐标
- cxt.rotate(value * angle * Math.PI / 180); //设置旋转的角度，参数是弧度
- cxt.beginPath();
- cxt.moveTo(startx, starty);
- cxt.lineTo(endx, endy);
- cxt.closePath(); //先闭合路径，再画线
- cxt.stroke(); //开始画线
- cxt.restore(); //将旋转后的线段返回给画布 }
- //画刻度 function drawScale(size, width, color, value, startx, starty, endx, endy){
- for(var i = 0; i < size; i++){
- drawPointer(width, color, value, i, startx, starty, endx, endy);
- }
- }
- //为表盘的中心填充颜色 function drawFill(){
- cxt.save();
- cxt.beginPath();
- cxt.arc(550, 310, 7, 0, 360, false);
- cxt.closePath();
- cxt.fillStyle = "red";
- cxt.fill();
- cxt.restore();
- }
- //画时钟 function drawClock(){
- cxt.clearRect(0, 0, 1350, 620); //清空整个画布
- var now = new Date(); //获取系统时间，取出时,分,秒
- var sec = now.getSeconds();
- var min = now.getMinutes();
- var hour = now.getHours();
- min += sec / 60;
- hour += min / 60;
- if(hour > 12) hour -= 12;
- cxt.beginPath();
- cxt.lineWidth = 10;
- cxt.strokeStyle = "blue";
- cxt.arc(550, 310, 300, 0, 360, false);
- cxt.closePath();
- cxt.stroke();
- drawScale(12, 7, "pink", 30, 0, -280, 0, -260); //画时刻度
- drawScale(60, 5, "pink", 6, 0, -280, 0, -270); //画分刻度
- drawPointer(7, "purple", hour, 30, 0, 12, 0, -210); //画时针
- drawPointer(5, "yellow", min, 6, 0, 15, 0, -240); //画分针
- drawPointer(4, "red", sec, 6, 0, 17, 0, -250); //画秒针
- //细化秒针,为秒针加箭头
- drawPointer(3, "red", sec, 6, -7, -235, 0, -255);
- drawPointer(3, "red", sec, 6, 7, -235, 0, -255);
- drawFill();
- }
- drawClock();
- setInterval(drawClock, 1000); //setInterval()方法中表示每隔1000ms，就执行drawClock一次
参数
描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
4）drawScale — 自定义函数画刻度
5. 画时钟刻度依托点
JS代码如下：
㈤ 用Javascript设计一个如下图所示的简单日历，周日和周六字体变红。
<style>
.time2{color:red;}
</style>
<body>
<table width="85" border="1">
<tr>
<td align='center' class='time1' id='time1' > </td>
</tr>
<tr>
<td height="47" align='center' class='time1' id='time2' style='font-size:200%'>aaa</td>
</tr>
<tr>
<td align='center' class='time1' id='time3'> </td>
</tr>
</table>
<script>
var d = new Date();
document.getElementById('time1').innerHTML=d.getFullYear()+'年'+(d.getMonth()+1)+'月';
document.getElementById('time2').innerHTML=d.getDate();
var c=d.getDay();
switch(c){
case 0:
a='星期日';
break;
case 1:
a='星期一';
break;
case 2:
a='星期二';
break;
case 3:
a='星期三';
case 4:
a='星期四';
case 5:
a='星期五';
case 6:
a='星期六';
}
document.getElementById('time3').innerHTML=a;
if((c==6)||(c==0)){
document.getElementById('time1').className='time2';
document.getElementById('time2').className='time2';
document.getElementById('time3').className='time2';
}else{
document.getElementById('time1').className='time1';
document.getElementById('time2').className='time1';
document.getElementById('time3').className='time1';
}
</script>
</body>
㈥ PC端如何用js做点击日历选中一周
1.写一来个获取当前时自间的脚本
2.写一个获取事件源绝对坐标的脚本
3.写一个日历生成脚本，根据年(闰年)月(大小月)周(周一到周日)生成日历
4.当事件源(一般是文本框)获得焦点的时候，触发获取绝对坐标的事件，然后生成当前月的日历，将此日历的坐标用脚本移动到文本框下方
5.生成日历的时候，给所有日添加返回事件，把当前选中的年月日反馈
㈦ 求一款js做的时间日历控件
这是我找到的一个js做的日历，不知道是不是你要的，里面有包含时间，其实在日历里面加时间也是比较简单的，只要调用DATE的方法就可以了，希望对你有用。下面是代码段，效果图附上。
<html>
<head>
<SCRIPTLANGUAGE="JavaScript"TYPE="text/javascript">
//定义月历函数
functioncalendar(){
vartoday=newDate();//创建日期对象
year=today.getYear();//读取年份
thisDay=today.getDate();//读取当前日
//创建每月天数数组
varmonthDays=newArray(31,28,31,30,31,30,31,31,30,31,30,31);
//如果是闰年，2月份的天数为29天
if(((year%4==0)&&(year%100!=0))||(year%400==0))monthDays[1]=29;
daysOfCurrentMonth=monthDays[today.getMonth()];//从每月天数数组中读取当月的天数
firstDay=today;//复制日期对象
firstDay.setDate(1);//设置日期对象firstDay的日为1号
startDay=firstDay.getDay();//确定当月第一天是星期几
//定义周日和月份中文名数组
vardayNames=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
varmonthNames=newArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
//创建日期对象
varnewDate=newDate();
//创建表格
document.write("<TABLEBORDER='0'CELLSPACING='0'CELLPADDING='2'ALIGN='CENTER'BGCOLOR='#0080FF'>")
document.write("<TR><TD><tableborder='0'cellspacing='1'cellpadding='2'bgcolor='#88FF99'>");
document.write("<TR><thcolspan='7'bgcolor='#C8E3FF'>");
//显示当前日期和周日
document.writeln("<FONTSTYLE='font-size:9pt;Color:#FF0000'>"+newDate.getYear()+"年"+monthNames[newDate.getMonth()]+""+newDate.getDate()+"日"+dayNames[newDate.getDay()]+"</FONT>");
//显示月历表头
document.writeln("</TH></TR><TR><THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>日</FONT></TH>");
document.writeln("<thbgcolor='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>一</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>二</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>三</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>四</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>五</FONT></TH>");
document.writeln("<THBGCOLOR='#0080FF'><FONTSTYLE='font-size:9pt;Color:White'>六</FONT></TH>");
document.writeln("</TR><TR>");
//显示每月前面的"空日"
column=0;
for(i=0;i<startDay;i++){
document.writeln("<TD><FONTSTYLE='font-size:9pt'></FONT></TD>");
column++;
}
//如果是当前日就突出显示(红色)，否则正常显示(黑色)
for(i=1;i<=daysOfCurrentMonth;i++){
if(i==thisDay){
document.writeln("</TD><TDALIGN='CENTER'><FONTSTYLE='font-size:9pt;Color:#ff0000'><B>")
}
else{
document.writeln("</TD><TDBGCOLOR='#88FF99'ALIGN='CENTER'><FONTSTYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000'>");
}
document.writeln(i);
if(i==thisDay)document.writeln("</FONT></TD>")
column++;
if(column==7){
document.writeln("<TR>");
column=0;
}
}
document.writeln("<TR><TDCOLSPAN='7'ALIGN='CENTER'VALIGN='TOP'BGCOLOR='#0080FF'>")
document.writeln("<FORMNAME='time'onSubmit='0'><FONTSTYLE='font-size:9pt;Color:#ffffff'>")
//显示当前时间
document.writeln("当前时间:<INPUTTYPE='Text'NAME='textbox'ALIGN='TOP'></FONT></TD></TR></TABLE>")
document.writeln("</TD></TR></TABLE></FORM>");
}
</SCRIPT>
<SCRIPTLANGUAGE="JavaScript">
//初始化控制变量
vartimerID=null;
vartimerRunning=false;
//定义时间显示函数
functionstoptime(){
if(timerRunning)
clearTimeout(timerID);
timerRunning=false;}
//定义显示时间函数
functionshowtime(){
varnewDate=newDate();
varhours=newDate.getHours();
varminutes=newDate.getMinutes();
varseconds=newDate.getSeconds()
vartimeValue=""+((hours>12)?hours-12:hours)
timeValue+=((minutes<10)?":0":":")+minutes
timeValue+=((seconds<10)?":0":":")+seconds
timeValue+=(hours>=12)?"下午":"上午"
document.time.textbox.value=timeValue;
timerID=setTimeout("showtime()",1000);//设置超时,使时间动态显示
timerRunning=true;}
//显示当前时间
functionstarttime(){
stoptime();
showtime();}
</SCRIPT>
</head>
<BODYonLoad="starttime()"TEXT="#000000"TOPMARGIN="0">
<scriptlanguage="JavaScript"type="text/javascript">
calendar();//显示月历
</script>
</BODY>
</html>
㈧ 如何用JS写一个日历
首先必须解决的问题是表格的行与列问题。列是固定的，七列，因为一周有七天。行需要动态计算，因为，每一个月的第一天是星期几是一个变数，因而第一天在表格中的第几个单元也就跟着变化，同时，每个月的总天数不一致也影响着各个月对表格行数的需要量。
一. 表格的行数问题
1.首先取得处理月的总天数
JS不提供此参数，我们需要计算。考虑到闰年问题会影响二月份的天数，我们先编写一个判断闰年的自编函数：
function is_leap(year) {
return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
接着定义一个包含十二个月在内的月份总天数的数组：
m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);
m_days这个数组里，二月份的天数已经加入闰年的信息：28+is_leap(ynow)。数组元素从0开始，正好对应于JS提供的Date函数提供的getMonth返回值，即0表示一月，1表示二月，2表示三月，依此类推。
这样，各月总数可以这样取得：m_days[x]。其中，x为0至11的自然数。
2.计算处理月第一天是星期几
可以使用Date函数的getDay取得，返回的值从0到6，0表示星期一，1表示星期二，2表示星期三，其余依此类推。代码如下（假设要处理的时间为2008年3月）：
n1str=new Date(2008,3,1);
firstday=n1str.getDay();
有了月总天数和该月第一天是星期几这两个已知条件，就可以解决表格所需行数问题：（当前月天数+第一天是星期几的数值）除以七。表格函数需要整数，因此，我们使用Math.ceil来处理：
tr_str=Math.ceil((m_days[mnow] + firstday)/7);
表格中的tr标签实际上代表表格的行，因此变量tr_str是我们往下写表格的重要依据。
二. 打印日历表格
可以使用两个for语句嵌套起来实现：外层for语句写行，内层for语句写单元格。
for(i=0;i<tr_str;i++) { //外层for语句 - tr标签
document.write("<tr>");
for(k=0;k<7;k++) { //内层for语句 - td标签
idx=i*7+k; //表格单元的自然序号
date_str=idx-firstday+1; //计算日期
//这里是处理有效日期代码
} //内层for语句结束
document.write("</tr>");
} //外层for语句结束
单元格的自然序号是否代表有效日期非常关键，为此必须加入一个过滤机制：仅打印有效的日期。有效的日期大于0小于小于等于处理月的总天数。
㈨ 求一个html+js防小米日历的demo
html + js 的话就很来基础了，
直接用vue 里面的自组件，别人现做好了的，
html + js + css 只是前端的基础
还有很多值得你去学习
零基础入门前端学习HTML5？JavaScript？CSS？
㈩ js点击上一周获取上N周的日期和对应的星期，击下一周获取下N周的日期和对应的星期
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
td{
:1pxsolid;
}
button{
margin:5px;
}
</style>
<script>
window.onload=function(){
varcells=document.getElementById('monitor').getElementsByTagName('td');
varclen=cells.length;
varcurrentFirstDate;
varformatDate=function(date){
varyear=date.getFullYear()+'年';
varmonth=(date.getMonth()+1)+'月';
varday=date.getDate()+'日';
varweek='('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')';
returnyear+month+day+''+week;
};
varaddDate=function(date,n){
date.setDate(date.getDate()+n);
returndate;
};
varsetDate=function(date){
varweek=date.getDay()-1;
date=addDate(date,week*-1);
currentFirstDate=newDate(date);
for(vari=0;i<clen;i++){
cells[i].innerHTML=formatDate(i==0?date:addDate(date,1));
}
};
document.getElementById('last-week').onclick=function(){
setDate(addDate(currentFirstDate,-7));
};
document.getElementById('next-week').onclick=function(){
setDate(addDate(currentFirstDate,7));
};
setDate(newDate());
}
</script>
</head>
<body>
<buttonid="last-week">上一周</button><buttonid="next-week">下一周</button>
<tableid="monitor">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>