利用html 5制作一个简单的时钟效果
我们先来看看最终效果：
看上去很简单的一个时钟效果，但是具体实现代码仍然包含了一些重点知识。
下面是具体的实现代码：
（提示：要特别注意fillText drawhand 的使用及其中角度的计算）
<%--
Document : 时钟
Created on : 2016-5-19, 9:49:29
Author : Administrator
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
(function(){
//cavas元素对象
var canvas=null;
//canvas的3d上下文
var ctx=null;
//cavan的尺寸
var cw=0;
var ch=0;
/**
* 页面导入时的事件处理
*/
window.addEventListener("load",function(){
canvas=document.getElementById("sample");
ctx=canvas.getContext("2d");
cw=parseInt(canvas.width);
ch=parseInt(canvas.height);
ctx.translate(cw/2, ch/2);
//绘制时钟
draw_watch();
},false);
/**
* 绘制时钟
*/
function draw_watch(){
//清空Canvas
ctx.clearRect(-cw/2,-ch/2,cw,ch);
//计算针的最大长度
var len=Math.min(cw, ch)/2;
//绘制刻度盘
var tlen=len*0.85;
ctx.font="14px 'Arial'";
ctx.fillStyle="black";
ctx.textAlign="center";
ctx.textBaseLine="middle";
for(var i=0; i<12; i++){
var tag1=Math.PI*2*(3-i)/12;
var tx=tlen * Math.cos(tag1);
var ty=-tlen * Math.sin(tag1);
ctx.fillText(i,tx,ty);
}
//获取当前的时分秒
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
if(h >12 ){
h=h-12;
}
//绘制时针
var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12;
var length1=len * 0.5;
var width1=5;
var color1="#000000";
drawhand(angle1,length1,width1,color1);
//绘制分针
var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;
var length2=len * 0.7;
var width2=3;
var color2="#555555";
drawhand(angle2,length2,width2,color2);
//绘制秒针
var angle3 = Math.PI * 2 *(15 - s)/60;
var length3=len * 0.8;
var width3=1;
var color3="#aa0000";
drawhand(angle3,length3,width3,color3);
//设置timer
setTimeout(draw_watch,1000);
}
/**
* 针绘制函数
*/
function drawhand(angle,len,width,color){
//计算针端的坐标
var x=len*Math.cos(angle);
var y=-len * Math.sin(angle);
//绘制针
ctx.strokeStyle=color;
ctx.lineWidth=width;
ctx.lineCap="round";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(x,y);
ctx.stroke();
}
})();
</script>
<body>
<canvas id="sample" width="150" height="150"></canvas>
</body>
</html>相关推荐：html5教程
Atas ialah kandungan terperinci 利用html 5制作一个简单的时钟效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Apl jam tiada dalam iPhone: Cara membetulkannya
May 03, 2024 pm 09:19 PM
Adakah apl jam hilang dari telefon anda? Tarikh dan masa masih akan dipaparkan pada bar status iPhone anda. Walau bagaimanapun, tanpa apl Jam, anda tidak akan dapat menggunakan jam dunia, jam randik, jam penggera dan banyak ciri lain. Oleh itu, membetulkan apl jam yang hilang hendaklah berada di bahagian atas senarai tugasan anda. Penyelesaian ini boleh membantu anda menyelesaikan isu ini. Betulkan 1 – Letakkan Apl Jam Jika anda tersilap mengalih keluar apl Jam daripada skrin utama anda, anda boleh meletakkan semula apl Jam pada tempatnya. Langkah 1 – Buka kunci iPhone anda dan mula meleret ke kiri sehingga anda mencapai halaman Pustaka Apl. Langkah 2 – Seterusnya, cari "jam" dalam kotak carian. Langkah 3 – Apabila anda melihat "Jam" di bawah dalam hasil carian, tekan dan tahan dan
Cara menggunakan berbilang pemasa pada iPhone dengan iOS 17
Jun 21, 2023 am 08:18 AM
Apakah pemasa berbilang pada iOS17? Dalam iOS17, Apple kini menawarkan pengguna keupayaan untuk menetapkan berbilang pemasa sekaligus pada iPhone mereka. Ini adalah satu perubahan yang dialu-alukan, yang ditunggu-tunggu ramai selama bertahun-tahun. Apl Jam, yang sebelum iOS 16 hanya membenarkan pengguna menetapkan satu pemasa pada satu masa, kini boleh digunakan untuk mengaktifkan sebarang bilangan pemasa, menjadikannya sesuai untuk menyelesaikan berbilang tugas sekaligus. Anda boleh menetapkan sebarang bilangan pemasa dalam skrin pemasa. Setelah pemasa dimulakan, semua pemasa aktif akan muncul sebagai pemberitahuan "Aktiviti Langsung" pada skrin kunci dan Pusat Pemberitahuan. Dari sini, anda boleh melihat baki masa sehingga pemasa dimatikan, jeda atau hentikan pemasa tanpa membuka apl Jam. apabila anda berada pada jam
iOS 17: Cara menukar gaya jam iPhone dalam mod siap sedia
Sep 10, 2023 pm 09:21 PM
Siap sedia ialah mod skrin kunci yang diaktifkan apabila iPhone dipalamkan ke dalam pengecas dan berorientasikan dalam orientasi mendatar (atau landskap). Ia terdiri daripada tiga skrin berbeza, satu daripadanya dipaparkan masa skrin penuh. Teruskan membaca untuk mengetahui cara menukar gaya jam anda. Skrin ketiga StandBy memaparkan masa dan tarikh dalam pelbagai tema yang boleh anda leret secara menegak. Sesetengah tema juga memaparkan maklumat tambahan, seperti suhu atau penggera seterusnya. Jika anda menahan sebarang jam, anda boleh bertukar antara tema yang berbeza, termasuk Digital, Analog, Dunia, Suria dan Terapung. Terapung memaparkan masa dalam nombor gelembung besar dalam warna yang boleh disesuaikan, Solar mempunyai fon yang lebih standard dengan reka bentuk suar matahari dalam warna yang berbeza, dan Dunia memaparkan dunia dengan menyerlahkan
![Cara mematikan penggera pada iPhone [2023]](https://img.php.cn/upload/article/000/465/014/169259550735100.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Cara mematikan penggera pada iPhone [2023]
Aug 21, 2023 pm 01:25 PM
Sejak kemunculan telefon pintar, mereka sudah pasti telah menggantikan jam penggera. Jika anda memiliki iPhone, anda boleh menggunakan apl Jam untuk menetapkan seberapa banyak penggera dengan mudah untuk beberapa kali sepanjang hari. Apl ini membolehkan anda mengkonfigurasi masa penggera, nada, kekerapan ia berulang dan sama ada anda mahu menangguhkannya menggunakan pilihan Tunda. Jika anda ingin mematikan penggera yang telah anda tetapkan, siaran berikut akan membantu anda melumpuhkan dan memadamkan penggera biasa dan penggera bangun pada iPhone anda. Cara Mematikan Penggera Biasa pada iPhone Secara lalai, apabila anda menambah penggera pada apl Jam atau meminta Siri menambah penggera untuk anda, anda sebenarnya mencipta penggera biasa. Anda boleh mencipta seberapa banyak jam penggera pada iPhone anda sesuka hati dan meletakkannya
Bagaimana untuk menyesuaikan warna siap sedia dalam iOS 17
Sep 23, 2023 pm 12:53 PM
Apple menawarkan mod skrin kunci baharu dalam iOS 17 yang dipanggil Mod Siap Sedia, yang diaktifkan apabila iPhone anda dipalamkan ke dalam pengecas (berwayar atau wayarles) dan diletakkan pada dirian dalam orientasi landskap. Mod ini akan menunjukkan lebih banyak maklumat sepintas lalu daripada skrin kunci standard dengan menunjukkan jam, data cuaca, kalendar dan beberapa widget. Selepas mendayakan ciri ini dalam tetapan, iPhone anda akan memasuki mod siap sedia secara automatik apabila diletakkan dalam orientasi landskap semasa mengecas. Cara menukar warna siap sedia dalam mod Siap sedia iOS 17 menawarkan satu set tiga halaman (Widget, Foto dan Jam) yang boleh anda tukar ke sana ke mari dengan meleret pada skrin. Daripada halaman ini, hanya skrin Jam membolehkan anda menyesuaikan warna yang dipaparkan pada skrin supaya anda boleh
Apakah yang perlu saya lakukan jika jam komputer win10 saya sentiasa tidak tepat Beberapa cara untuk melaraskan masa komputer win10
Mar 27, 2024 pm 05:10 PM
1. Mula-mula klik pada menu Mula dan pilih butang Tetapan dalam menu Mula. 2. Selepas dibuka, pilih tetapan masa dan bahasa. 3. Tukar ia untuk menetapkan masa secara automatik. 4. Anda juga boleh mematikan tetapan masa automatik dan memilih masa yang anda mahu tukar. Kaedah 2: 1. Buka pilihan [Other Date, Time and Regional Settings]. 2. Pilih [Tetapkan masa dan tarikh]. 3. Pilih [Internet Time] dan buka [Change Settings Options]. 4. Tandakan [Synchronize with Internet Time Server (S)], klik [Update Now], dan kemudian klik OK.
Bagaimana untuk menetapkan jam di belakang label TikTok? Bagaimana untuk menetapkan tegnya untuk menarik trafik?
Mar 25, 2024 pm 05:21 PM
Sebagai salah satu platform video pendek paling popular di dunia, fungsi berkuasa Douyin dan permainan yang kaya menyukarkan pengguna untuk meletakkannya. Di Douyin, kami boleh menambah teg pada kerja untuk meningkatkan pendedahan, dan jam di belakang teg akan menggesa masa kemas kini kandungan di bawah teg. Jadi, bagaimana untuk menetapkan jam di belakang label Douyin? Artikel ini akan memperkenalkan secara terperinci cara menyediakan teg dan jam Douyin serta cara memandu trafik melalui teg. 1. Bagaimana untuk menetapkan jam di belakang label Douyin? 1. Buka Douyin dan klik butang "Buat" untuk memasuki halaman penyuntingan video. 2. Selepas memilih bahan, klik "Seterusnya" untuk memasuki halaman keluaran kerja. 3. Pada halaman penerbitan karya, isikan tajuk karya dan klik "Tambah Tag". 4. Pada halaman label, masukkan nama label yang ingin anda tambahkan.
Cara membuat aplikasi jam dan undur yang keren menggunakan Vue dan Canvas
Jul 17, 2023 am 09:48 AM
Cara menggunakan Vue dan Canvas untuk mencipta aplikasi jam dan undur yang hebat Pengenalan: Dalam pembangunan web moden, dengan populariti rangka kerja Vue dan aplikasi meluas teknologi Canvas, kami boleh mencipta pelbagai aplikasi yang menakjubkan dengan menggabungkan kesan animasi Vue dan Canvas . Artikel ini akan menumpukan pada cara menggunakan Vue dan Canvas untuk mencipta aplikasi jam dan undur yang hebat, serta menyediakan contoh kod yang sepadan untuk diikuti dan dipelajari oleh pembaca. 1. Aplikasi jam mencipta contoh Vue dan elemen Kanvas terlebih dahulu
