網頁設計時鍾_DW網頁怎麼設計一個時鍾

1、網頁製作中時間和日期怎麼加。

添加的具體方法如下：

1、打開Dreamweaver新建一個html網頁。

2、切換到代碼視圖，在<head></head>標簽里，<title></title>標簽後面輸入JavaScript標簽。 <script type="text/javascript"></script>

3、在script標簽里定義一個time()函數

function time()

{

thistime=new Date() //創建一個對象

var hours=thistime.getHours() //獲取時鍾

var minutes=thistime.getMinutes() //獲取分鍾

var seconds=thistime.getSeconds() //獲取秒鍾

var years=thistime.getYear() //獲取年

var months=thistime.getMonth() //獲取月

var days=thistime.getDay() 獲取日

}

4、判斷當時鍾小於10的時候在前面加個0，例如8點零8分會顯示08：08

if(eval(hours)<10)

{

hours="0"+hours

}

if(eval(minutes<10))

{

minutes="0"+minutes

}

if(seconds<10)

{

seconds="0"+seconds

5、thistime=hours+":"+minutes+":"+seconds //把時間顯示順序調整好

document.title=thistime //在標題顯示

var timer=setTimeout("time()",1000) //設置計時器，讓時間每分每秒更新

6、在<body></body>標簽加上載入觸發事件

7、按Ctrl+s保存，按F12在瀏覽器中瀏覽。

2、我想在網頁中放入一個自動跟新的時鍾，我是用ASP.NET製作的網頁。求詳細解釋，以及代碼，[email protected]

當前時間：<b id="b_current_time"></b>
Date.prototype.DatePart = function(interval) {
var myDate = new Date();
var partStr = '';
var Week = ['日', '一', '二', '三', '四', '五', '六'];
switch (interval) {
case 'y': partStr = myDate.getFullYear(); break;
case 'm': partStr = myDate.getMonth() + 1; break;
case 'd': partStr = myDate.getDate(); break;
case 'w': partStr = Week[myDate.getDay()]; break;
case 'ww': partStr = myDate.WeekNumOfYear(); break;
case 'h': partStr = checkTime(myDate.getHours()); break;
case 'n': partStr = checkTime(myDate.getMinutes()); break;
case 's': partStr = checkTime(myDate.getSeconds()); break;
}
return partStr;
}

function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}

function getCurrentTime()
{

var cur_time = "";
cur_time+= Date.prototype.DatePart("y")+"年";
cur_time+= Date.prototype.DatePart("m")+"月";
cur_time+= Date.prototype.DatePart("d")+"日 ";
cur_time+= "星期"+Date.prototype.DatePart("w")+" ";
cur_time+= Date.prototype.DatePart("h")+":";
cur_time+= Date.prototype.DatePart("n")+":";
cur_time+= Date.prototype.DatePart("s");
document.getElementById("b_current_time").innerHTML = cur_time;
setTimeout(getCurrentTime, 1000);
}

<body onload="getCurrentTime();">

3、製作頁面時鍾，在頁面內顯示當前時間，並使用計時器控制時間的變化用JAVASCRIPT

// JavaScript Document
function disptime(){
var today=new Date();
var hh=today.getHours();
var mm=today.getMinutes();
var ss=today.getSeconds();
document.getElementById("myClock").innerHTML="<h1>現在的時間是："+hh+":"+mm+":"+ss+"<h1>";
}
var timer;
function interval(){
timer=setInterval("disptime()",1000);
}
在html文件中引入和載入就好了，引入總會的吧。

4、網頁製作中如何製作時鍾

發2個不用連網的給你
帶時鍾的台歷：

第一步：把如下代碼加入<head>區域中：
<STYLE>A.menuitem {
COLOR: menutext; TEXT-DECORATION: none
}
A.menuitem:hover {
COLOR: highlighttext; BACKGROUND-COLOR: highlight
}
DIV.contextmenu {
BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; Z-INDEX: 999; VISIBILITY: hidden; BORDER-LEFT: 2px outset; BORDER-BOTTOM: 2px outset; POSITION: absolute; BACKGROUND-COLOR: buttonface
}
</STYLE>
第二步：把如下代碼加入<body>區域中:
<STYLE>A.menuitem {
COLOR: menutext; TEXT-DECORATION: none
}
A.menuitem:hover {
COLOR: highlighttext; BACKGROUND-COLOR: highlight
}
DIV.contextmenu {
BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; Z-INDEX: 999; VISIBILITY: hidden; BORDER-LEFT: 2px outset; BORDER-BOTTOM: 2px outset; POSITION: absolute; BACKGROUND-COLOR: buttonface
}</P><P></STYLE>
<SCRIPT language=JavaScript>
function Year_Month(){
var now = new Date();
var yy = now.getYear();
var mm = now.getMonth()+1;
var cl = '<font color="#0000df">';
if (now.getDay() == 0) cl = '<font color="#c00000">';
if (now.getDay() == 6) cl = '<font color="#00c000">';
return(cl + yy + '年' + mm + '月</font>'); }
function Date_of_Today(){
var now = new Date();
var cl = '<font color="#ff0000">';
if (now.getDay() == 0) cl = '<font color="#c00000">';
if (now.getDay() == 6) cl = '<font color="#00c000">';
return(cl + now.getDate() + '</font>'); }
function Day_of_Today(){
var day = new Array();
day[0] = "星期曰";
day[1] = "星期一";
day[2] = "星期二";
day[3] = "星期三";
day[4] = "星期四";
day[5] = "星期五";
day[6] = "星期六";
var now = new Date();
var cl = '<font color="#0000df">';
if (now.getDay() == 0) cl = '<font color="#c00000">';
if (now.getDay() == 6) cl = '<font color="#00c000">';
return(cl + day[now.getDay()] + '</font>'); }
function CurentTime(){
var now = new Date();
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getTime() % 60000;
ss = (ss - (ss % 1000)) / 1000;
var clock = hh+':';
if (mm < 10) clock += '0';
clock += mm+':';
if (ss < 10) clock += '0';
clock += ss;
return(clock); }
function refreshCalendarClock(){
document.all.calendarClock1.innerHTML = Year_Month();
document.all.calendarClock2.innerHTML = Date_of_Today();
document.all.calendarClock3.innerHTML = Day_of_Today();
document.all.calendarClock4.innerHTML = CurentTime(); }
var webUrl = webUrl;
document.write('<table border="0" cellpadding="0" cellspacing="0"><tr><td>');
document.write('<table id="CalendarClockFreeCode" border="0" cellpadding="0" cellspacing="0" width="60" height="70" ');
document.write('style="position:absolute;visibility:hidden" bgcolor="#eeeeee">');
document.write('<tr><td align="center"><font ');
document.write('style="cursor:hand;color:#ff0000;font-family:宋體;font-size:14pt;line-height:120%" ');
if (webUrl != 'netflower'){
document.write('</td></tr><tr><td align="center"><font ');
document.write('style="cursor:hand;color:#2000ff;font-family:宋體;font-size:9pt;line-height:110%" ');
}
document.write('</td></tr></table>');
document.write('<table border="0" cellpadding="0" cellspacing="0" width="61" bgcolor="#C0C0C0" height="70">');
document.write('<tr><td valign="top" width="100%" height="100%">');
document.write('<table border="1" cellpadding="0" cellspacing="0" width="58" bgcolor="#FEFEEF" height="67">');
document.write('<tr><td align="center" width="100%" height="100%" >');
document.write('<font id="calendarClock1" style="font-family:宋體;font-size:7pt;line-height:120%"> </font><br>');
document.write('<font id="calendarClock2" style="color:#ff0000;font-family:Arial;font-size:14pt;line-height:120%"> </font><br>');
document.write('<font id="calendarClock3" style="font-family:宋體;font-size:9pt;line-height:120%"> </font><br>');
document.write('<font id="calendarClock4" style="color:#100080;font-family:宋體;font-size:8pt;line-height:120%"><b> </b></font>');
document.write('</td></tr></table>');
document.write('</td></tr></table>');
document.write('</td></tr></table>');
setInterval('refreshCalendarClock()',1000);
</SCRIPT>
倒影時鍾：

第一步把下面的代碼加入<head> </head>之間
<Script Language="JavaScript">

</Script><style type="text/css">

</style>

第二步:把以下代碼加入<body> 區

<body onLoad="init()" bgcolor="#FFFFFF">

<Div Id="tim1" Style="position: absolute; width: 258; height: 26; top: 30; left: 215" class="time">
</Div>
<Div Id="tim2" Style="position:absolute; filter:flipv() alpha(opacity=20); font-style:italic; left: 695px; top: 50px" class="time">
</Div>

5、如何用html寫代碼，使得在網頁上顯示當前的時間和日期

安裝如下步驟操作：

1.在電腦磁碟空白出右鍵-新建，點擊文檔

2.將文檔命名為index，用記事本打開

寫入一下代碼，如圖：

<head>

<title>時間的動態顯示</title>

</head>

<body>

</body>

</html>

4.在html頭部寫入獲取時間的代碼，如圖

var t = null;

t = setTimeout(time,1000);//開始執行

function time()

{

clearTimeout(t);//清除定時器

dt = new Date();

var y=dt.getYear()+1900;

var mm=dt.getMonth()+1;

var d=dt.getDate();

var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

var day=dt.getDay();

var h=dt.getHours();

var m=dt.getMinutes();

var s=dt.getSeconds();

if(h<10){h="0"+h;}

if(m<10){m="0"+m;}

if(s<10){s="0"+s;}

document.getElementById("timeShow").innerHTML = "現在的時間為："+y+"年"+mm+"月"+d+"日"+weekday[day]+"

"+h+":"+m+":"+s+"";

t = setTimeout(time,1000); //設定定時器，循環執行

}

</script>

在內容部分寫入div標簽，並附上ID，用來載入時間的載體。如圖：

6.在頭部寫入div的樣式如圖，並保存

<style>

.time1{width:100%; height:50px; background:#FFF000; line-height:50px; text-align:center;}

</style>

7.保存後，將文件後綴命名為html。點擊查看，勾選文件擴展名

8.文件後綴命名由txt改為html

9.使用瀏覽器打開文件

10.可以看到編寫的文件，網頁顯示時間了

6、下面括弧的a代表什麼，製作簡易的網頁時鍾

a代表的是format函數的參數，按照你的代碼的意思猜測，a因該是一個數組或者是json之類的變數

7、AdobeDreamweaver設計網頁怎樣顯示實時時間

用JavaScript定義獲取當前系統時間函數，使用網頁觸發器觸發事件。

1.在head標簽里，<title></title>標簽後面輸入JavaScript標簽。

</script>

2.在script標簽里定義一個time()函數

function time()

{

today=new Date() //創建一個對象

var hours=today.getHours() //獲取時鍾

var minutes=today.getMinutes() //獲取分鍾

var seconds=today.getSeconds() //獲取秒鍾

var years=today.getYear() //獲取年

var months=today.getMonth() //獲取月

var days=today.getDay() 獲取日

}

2.代碼

<SCRIPT language=Livescript>//插入時間腳本

today = new Date()//創建一個對象
document.write(" ",today.getHours(),":",today.getMinutes());//today.getHours()獲取時鍾
</SCRIPT>
 
<SCRIPT language=Livescript>//插入日期腳本
today = new Date()//創建一個對象
document.write( "", today.getMonth()+1,"/",today.getDate(),"/",today.getYear()+1900);//today.getMonth()+1獲取月；today.getDate()獲取日；today.getYear+1900();獲取年

</SCRIPT>3.效果：

8、js如何製作網頁時鍾？

9、我們畢業設計想要做一個時鍾，可以通過網路實現自動更新時間，希望也可以更新天氣信息，氣溫等其他信息，

遙控器或者手機app來控制時鍾的校準或者獲取網路數據，，
可以通過網路實現自動更新時間，希望也可以更新天氣信息，氣溫等其他信息。。這個我能夠幫你完成，整套

10、DW網頁怎麼設計一個時鍾

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用canvas元素繪制指針式動畫時鍾</title>
<script type="text/javascript">
var canvas;
var context;
//頁面裝載
function window_onload()
{
canvas=document.getElementById("canvas");//獲取canvas元素
context=canvas.getContext('2d');//獲取canvas元素的圖形上下文對象
setInterval("draw()",1000);//每隔一秒重繪時鍾，重新顯示時間
}
//繪制時鍾
function draw()
{
var radius=Math.min(canvas.width / 2, canvas.height / 2) -25;//時鍾羅盤半徑
var centerx=canvas.width/2;//時鍾中心橫坐標
var centery=canvas.height/2;//時鍾中心縱坐標
context.clearRect(0,0,canvas.width,canvas.height);//擦除之前所繪時鍾
context.save();//保存當前繪制狀態

//繪制時鍾圓盤
context.fillStyle = '#efefef';//時鍾背景色
context.strokeStyle = '#c0c0c0';//時鍾邊框顏色
context.beginPath();//開始創建路徑
context.arc(centerx,centery,radius, 0,Math.PI*2, 0);//創建圓形羅盤路徑
context.fill();//用背景色填充羅盤
context.stroke();//用邊框顏色繪制羅盤邊框
context.closePath();//關閉路徑
context.restore();//恢復之前保存的繪制狀態

//繪制時鍾上表示小時的文字
var r = radius - 10;//縮小半徑，因為要將文字繪制在時鍾內部
context.font= 'bold 16px 宋體';//指定文字字體
Drawtext('1', centerx + (0.5 * r), centery - (0.88 * r));
Drawtext('2', centerx + (0.866 * r), centery - (0.5 * r));
Drawtext('3', centerx + radius - 10,centery);
Drawtext('4', centerx + (0.866 * r), centery + (0.5 * r));
Drawtext('5', centerx + (0.5 * r), centery + (0.866 * r));
Drawtext('6', centerx, centery + r);
Drawtext('7', centerx - (0.5 * r), centery + (0.866 * r));
Drawtext('8', centerx - (0.866 * r), centery + (0.49 * r));
Drawtext('9', centerx - radius + 10, centery);
Drawtext('10',centerx - (0.866 * r),centery - (0.50 * r));
Drawtext('11', centerx - (0.51 * r), centery - (0.88 * r));
Drawtext('12', centerx, 35);
//繪制時鍾指針
var date=new Date();//獲取需要表示的時間
var h = date.getHours();//獲取當前小時
var m = date.getMinutes();//獲取當前分鍾
var s=date.getSeconds();//獲取當前秒
var a = ((h/12) *Math.PI*2) - 1.57 + ((m / 60) * 0.524);//根據當前時間計算指針角度

context.save();//保存當前繪制狀態
context.fillStyle='black'; //指定指針中心點的顏色
context.beginPath();//開始創建路徑
context.arc(centerx,centery,3,0,Math.PI * 2, 0);//創建指針中心點的路徑
context.closePath();//關閉路徑
context.fill();//填充指針中心點
context.lineWidth=3;//指定指針寬度
context.fillStyle='darkgray';//指定指針填充顏色
context.strokeStyle='darkgray';//指定指針邊框顏色
context.beginPath();//開始創建路徑
//繪制小時指針
context.arc(centerx,centery,radius - 55, a + 0.01, a, 1);
context.lineTo(centerx,centery);
//繪制分鍾指針
context.arc(centerx,centery,radius - 40, ((m/60) * 6.27) - 1.57, ((m/60) * 6.28) - 1.57, 0);
context.lineTo(canvas.width / 2, canvas.height / 2);
//繪制秒鍾指針
context.arc(centerx,centery,radius - 30, ((s/60) * 6.27) - 1.57, ((s/60) * 6.28) - 1.57, 0);
context.lineTo(centerx,centery);
context.closePath();//關閉路徑
context.fill();//填充指針
context.stroke();//繪制指針邊框
context.restore();//恢復之前保存的繪制狀態

//指定時鍾下部當前時間所用的字元串，文字格式為hh:mm:dd
var hours = String(h);
var minutes = String(m);
var seconds = String(s);
if (hours.length == 1) h = '0' + h;
if (minutes.length == 1) m = '0' + m;
if (seconds.length == 1) s = '0' + s;
var str =h + ':' + m + ':' +s;
//繪制時鍾下部的當前時間
Drawtext(str, centerx, centery + radius + 12);
}
function Drawtext(text, x, y)
{
//因為需要使用到坐標平移，所以在平移前線保存當前繪制狀態
context.save();
x -= (context.measureText(text).width / 2);//文字起點橫坐標
y +=9;//文字起點縱坐標
context.beginPath();//開始創建路徑
context.translate(x, y);//平移坐標
context.fillText(text,0,0);//填充文字
context.restore();
}
</script>
<style>
div{
display: -moz-box;
display: -webkit-box;
-moz-box-pack: center;
-webkit-box-pack: center;
width:100%;
}
canvas{
background-color:white;
}
</style>
</head>
<body onload="window_onload()">
<div><h1>使用canvas元素繪制指針式動畫時鍾</h1></div>
<div><canvas id="canvas" width="200px" height="200px"></canvas><div>//這里就是你的時鍾的位置。
</body>
</html>

導航:首頁 > 萬維百科 > 網頁設計時鍾

網頁設計時鍾

與網頁設計時鍾相關的知識