js拖拽框製作的時尚小鐘表
html部分：
| <html> |
| <head> |
| <title>小鐘表</title> |
| <meta http-equiv="content-type" content="text/html" charset="utf-8"> |
| <script type="text/javascript" src="js/drag.js"></script> |
| <script> <!--獲得日期函式--> |
| function getmyDate(){ |
| var date = new Date(); |
| var d=new Date() |
| var month=new Array(7) |
| month[0]="Jan." |
| month[1]="Feb." |
| month[2]="Mar." |
| month[3]="Apr." |
| month[4]="may." |
| month[5]="Jun." |
| month[6]="Jul." |
| month[7]="Aug." |
| month[8]="Sept." |
| month[9]="Otc." |
| month[10]="Nov." |
| month[11]="Dec." |
| d=date.getFullYear()+" "+month[d.getMonth()]+" "+date.getDate(); |
| document.getElementById('date_week').innerHTML=d; |
| } |
| <!--獲得星期函式--> function getweek(){ |
| var date = new Date(); |
| var d=new Date() |
| var weekday=new Array(7) |
| weekday[0]="SUN" |
| weekday[1]="MON" |
| weekday[2]="TUE" |
| weekday[3]="WED" |
| weekday[4]="THU" |
| weekday[5]="FRI" |
| weekday[6]="SAT" |
| d=weekday[d.getDay()]; |
| document.getElementById('week').innerHTML=d; |
| } |
| <!--獲得時間函式--> function startTime() |
| { |
| var today=new Date() |
| var h=today.getHours() |
| var m=today.getMinutes() |
| var s=today.getSeconds() |
| m=checkTime(m) |
| s=checkTime(s) |
| var date = new Date(); |
| d=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"; |
| document.getElementById('time').innerHTML=h+":"+m+":"+s |
| t=setTimeout('startTime()',500) |
| } |
| function checkTime(i) |
| { |
| if (i<10) |
| {i="0" + i} |
| return i |
| } <!--預載入--> |
| $(function(){ |
| getmyDate(); |
| startTime(); |
| getweek(); |
| }); |
| </script> |
| </head> |
| <body> |
| <div style="position: absolute;left: 300px;top:200px;width: 105px;height: 110px;background-color: whitesmoke; |
| background-image:url('images/newtouming.png'); |
| border: outset black;border-radius: 30px" onmousedown="beginDrag(this,event)"> |
| <div style="height: 35px;"> |
| <span style="display: inline-block;margin:10px 0px 0px 7px;font-size: 13px;font-weight: bold |
| ;font-family: ICBM SS-25;" id="date_week"> |
| </span><br/> |
| <span style="display: inline-block;margin:0px 0px 0px 35px;font-size: 14px; |
| font-family: ICBM SS-25;font-weight: bold;" id="week"></span> |
| </div> |
| <hr style="border:2px solid #96dffd"/> |
| <span style="display: inline-block;margin:0px 0px 0px 2px;font-size: 24px; |
| font-family: ICBM SS-25;font-weight: bold;" id="time"></span> |
| </div> |
| </body> |
| </html> |
function beginDrag(elementToDrag,event){
<!--獲得發生事件元素的位置。注意：要拖動的元素必須在CSS中定義了left 和 top 屬性-->
var x = parseInt(elementToDrag.style.left);
var y = parseInt(elementToDrag.style.top);
<!--計算一個點和滑鼠點選之間的距離-->
var deltaX = event.clientX - x;
var deltaY = event.clientY - y;
<!--註冊mousedown 後面發生的 mousemove 和 mouseup 事件的處理程式-->
<!--注意，他們被註冊為document 的事件處理程式-->
if(document.addEventListener){//用於DOM2的事件新增方法
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}else if(document.attachEvent){//用於IE事件新增
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
if(event.stopPropagation) event.stopPropagation();//在DOM2下取消冒泡
else event.cancelBubble = true; //在IE下取消冒泡
if(event.preventDefault) event.preventDefault();//在DOM2中阻止預設行為
else event.returnValue = false; //在IE中阻止預設行為
function moveHandler(e){
<!--如果是IE的事件物件，那麼就用window.event 全域性屬性，否則就用DOM二級標準的Event物件。-->
if(!e) e = window.event;
<!--將元素移動到當前的滑鼠位置-->
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}
function upHandler(e){
if(document.removeEventListener){
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}else{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}
}