基於JS和JQuery實現的兩種時鐘效果（3）

2022-05-07 13:42:09 字數 1685 閱讀 7072

實現的效果圖：

實現該效果的css**與html**：

1


23102


"bodyload()


">


103"


clock


">


104class="


second


">


105class="


sechead


">


106107


108109


110111


112class="


minute


">


113114


115116


117118


119120
clock.html

實現的js**：

1
其中：分針的旋轉角度360/3600=0.1

mindegree+=0.1;

計算當前分針旋轉的角度:
當前的分鐘*（每秒鐘旋轉的度數*每分鐘的秒數）
var min=now.getminutes();


mindegree=min*(0.1*60);
時針一秒鐘旋轉的角度

360度*（12小時*3600秒）

//


時針的旋轉


houdegree+=0.008333;//


360/(12*3600)=0.008333


//時針一秒鐘旋轉的角度


var divhour=document.getelementsbyclassname("


hour


");//


getelementsbyclassname帶s因此需要返回乙個陣列


divhour[0].style.transform="


rotate(


"+houdegree+"


deg)


";
計算當前時針旋轉的角度：

//


計算當前時針旋轉的角度


var hou=now.gethours();


//houdegree=hou*(360/12);


houdegree=(hou+min/60)*30


;
去掉透明度與調整初始旋轉的角度的效果：

實現最終該效果的總**：

1


23132


"bodyload()


">


133"


clock


">


134class="


hour


">


135136


137138


class="


minute


">


139140


141142


143class="


second


">


144class="


sechead


">


145146


147148


149150


151152


153154


155156


157
最終效果

js和jQuery實現的Ajax

ajax測試 最基本的jquery傳送ajax請求示例 ajax測試 views.py def ajax test request return render request,ajax test.html def ajaxtest request username request.post.get ...

基於jquery 移動外掛程式的實現

引用謝燦勇 位址 乙個思路分析 大致上實現的思路有以下兩種。一 判斷塊是否被按下 mousedown 然後在點選事件中巢狀移動事件 mousemove 同時在裡面放置乙個鬆開的事件 mouseup 二 跟第一種方法類似，都是分成三個事件來觸發，但是不同的是 事件與事件之間沒有互相巢狀，而是分成三個獨...

JS和JQUERY的區別

本文 根據id取元素 js 取到的是乙個dom物件。例 var div document.getelementbyid one jquery 取到的是乙個jquery物件。例 var div one 括號裡面是根據某個東西來找，相當於乙個選擇，如果我們要根據id來找，在樣式表裡的id是用 來表示的，...