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>