當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS+JS实现 ❤️圆圈倒计时间❤️

發布時間：2025/3/12 HTML 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS实现 ❤️圆圈倒计时间❤️ 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼

代碼目錄：

主要代碼實現：

CSS樣式：

html, body {height: 100%; }html {background-image: url('../img/sample.jpg');background-position: center center;background-repeat: no-repeat;background-size: cover; }body {background-color: rgba(44, 62, 80, 0.6);background-image: url('../img/pattern.png');background-position: center;background-repeat: repeat;font-family: 'Raleway', 'Arial', sans-serif; }.countdown-container {position: relative;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);transform: translateY(-50%); }.clock-item .inner {height: 0px;padding-bottom: 100%;position: relative;width: 100%; }.clock-canvas {background-color: rgba(255, 255, 255, .1);border-radius: 50%;height: 0px;padding-bottom: 100%; }.text {color: #fff;font-size: 30px;font-weight: bold;margin-top: -50px;position: absolute;top: 50%;text-align: center;text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);width: 100%; }.text .val {font-size: 50px; }.text .type-time {font-size: 20px; }@media (min-width: 768px) and (max-width: 991px) {.clock-item {margin-bottom: 30px;} }@media (max-width: 767px) {.clock-item {margin: 0px 30px 30px 30px;} }

HTML代碼 :

<!doctype html> <html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>時尚的圓形進度條樣式的jQuery倒計時插件</title><link href="http://fonts.useso.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css"><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="css/default.css"><link rel="stylesheet" type="text/css" href="css/demo.css"></head><body><div class="countdown countdown-container container"><div class="clock row"><div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3"><div class="wrap"><div class="inner"><div id="canvas-days" class="clock-canvas"></div><div class="text"><p class="val">0</p><p class="type-days type-time">天</p></div></div></div></div><div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3"><div class="wrap"><div class="inner"><div id="canvas-hours" class="clock-canvas"></div><div class="text"><p class="val">0</p><p class="type-hours type-time">時</p></div></div></div></div><div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3"><div class="wrap"><div class="inner"><div id="canvas-minutes" class="clock-canvas"></div><div class="text"><p class="val">0</p><p class="type-minutes type-time">分</p></div></div></div></div><div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3"><div class="wrap"><div class="inner"><div id="canvas-seconds" class="clock-canvas"></div><div class="text"><p class="val">0</p><p class="type-seconds type-time">秒</p></div></div></div></div></div></div><script type="text/javascript" src="js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="js/kinetic.js"></script><script type="text/javascript" src="js/jquery.final-countdown.js"></script><script type="text/javascript">$('document').ready(function() {'use strict';$('.countdown').final_countdown({'start': 20151019,'end': 30151019,'now': 20151019});});</script></body></html>

?上面的CSS文件和JS以及圖片需要加入進來

源碼獲取

大家可以點贊、收藏、關注、評論我啦、查看博主主頁或下方微信公眾號獲取更多~！

打卡文章更新?50??/? 100天

精彩推薦更新中：

HTML5大作業實戰案例《100套》

Java畢設項目精品實戰案例《100套》?

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️圆圈倒计时间❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HTML+CSS+JS实现 ❤️人物走悬
下一篇： HTML+CSS+JS实现 ❤️发光的线