bwiki样式的活动倒计时html代码（带渐变色进度条）

VIP文章 已于 2022-07-22 17:35:17 修改
阅读量344 收藏 1
点赞数
文章标签： html 前端 javascript
于 2022-07-22 17:33:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39972170/article/details/125936823
版权

首先我发现b站wiki它这个样式很好看，于是就仿照着，并根据一些其他代码模仿了一个，很适合其他需要做活动倒计时的小网站，只需要html代码就能实现。

废话不多说，直接上代码。

<div id="calendar-line" class="calendar-line" style="margin-top:5px;background:linear-gradient(90deg, rgba(138, 206, 211, 0.7) 0%, rgba(128, 133, 196, 0.7) 0%, rgba(236, 238, 239, 1) 0%, rgba(236, 238, 239, 1) 0%);"><font style="color: rgba(67,8,234,0.67);"><p align="center"><b>战斗通行证第七季：重装巨象</b></p></font><div style="font-size:10px;text-align:right;">
    <div class="resourceLoader" style="display:none" data-is-module="false" data-mime="">MediaWiki:EventTimer</div>    
    <body>
        <p id="demo"></p>
最低0.47元/天 解锁文章
Neonsk
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
wepy小程序canvas实现渐变圆环倒计时
qq_37142399的博客
05-13 229
工作中遇到需要实现圆环式渐变颜色的进度条倒计时，这篇文章记录一下，方便日后查看。本文内容只是实现了简单的5S 10S 20S等(符合100的因数) 倒计时。
多款漂亮的HTML5圆形进度条倒计时动画代码.zip
07-11
(function($) {     $.fn.ClassyCountdown = function(options, callback) {         var element = $(this);         var DaysLeft, HoursLeft, MinutesLeft, SecondsLeft;         var secondsLeft;         var isFired = false;         var settings = {             end: undefined,             now: $.now(),             labels: true,             labelsOptions: {                 lang: {                     days: 'Days',                     hours: 'Hours',                     minutes: 'Minutes',                     seconds: 'Seconds'                 },                 style: 'font-size: 0.5em;'             },
使用 HTML、CSS 和 JS 的简单倒数计时器，Python面试真题解析火爆全网
最新发布
m0_58397123的博客
03-21 308
🍅 硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。🍅 技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。🍅 面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。🍅 知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
如何使用JavaScript编写倒计时代码
我点评的博客
07-20 554
在编写倒计时代码时，我们需要获取当前时间，以便于计算与目标时间的差值。可以使用JavaScript中的Date对象来获取当前时间。获取了当前时间和目标时间之后，我们需要计算它们之间的时间差。以上就是如何使用JavaScript编写倒计时代码的全部内容。在这个例子中，我们使用了setInterval()方法来更新倒计时，每隔一秒钟就更新一次。计算出时间差之后，我们需要将其转换为天、小时、分钟、秒的形式。在获取当前时间后，我们还需要获取倒计时的目标时间。在这个例子中，我们将时间差转换为了天、小时、分钟、秒。
用js、css、html实现倒计时并且更换背景颜色
weixin_68478645的博客
02-03 519
/ 用随机数改变背景颜色。let btn = document.querySelector("#btn")//获取dom节点。let timer = setInterval(function () {//实现倒计时。btn.innerText = "时间到啦！btn.onclick = function () {//点击事件。
网页倒计时
angry_rooster的博客
06-25 7065
网页倒计时 制作一个简单的网页倒计时器。这个倒计时可以根据输入的截止时间进行倒计时，输入的截止日期数据会被缓存在本地存储（“deadlineDate”）（源码见文末） 这里使用原生JS进行相关网页逻辑的编写，主要应用到的API有 document.getElementById: 用于获取DOM元素节点，方便向节点填入数据并显示 Window.setInterval(): 用于每隔一秒刷新一次显示的倒计时数据 elem.addEventListener(): 用于绑定事件，这里只是用于绑定重置按钮的点击事
活动倒计时功能开发
XXCJLRC的博客
03-24 72
根据后台给定的时间点，计算倒计时剩余时间。使用setInterval定时器。废话不比，直接上代码。
倒计时2023元旦倒计时HTML代码
12-08
【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 【倒计时】2023元旦倒计时HTML代码 ...
2024跨年倒计时html代码（跨年倒计时html代码2024）
01-22
2024跨年倒计时html代码（跨年倒计时html代码2024） 效果演示https://www.denghongyuan.com/html/chunjie/ 倒计时结束时间：2024-02-10 00:00:00 顺计时开始时间：2024-02-10 23:59:59 提示：2024年春节时间是2024年...
html5 css3圆形进度条倒计时页面跳转代码.zip
07-11
html5 css3圆形进度条倒计时页面跳转代码
html5+css3进度条倒计时动画特效代码【推荐】
09-28
下面小编就为大家分享一篇html5+css3进度条倒计时动画特效代码【推荐】。希望对大家有所帮助。一起跟随小编过来看看吧
jQuery创意精美的网页倒计时代码
12-30
jQuery创意精美的网页倒计时代码是一款时分秒倒计时计时器，点击数字设置好倒计时时间，确定后转到倒计时进度界面。
倒计时代码
wangyining070205的博客
03-08 6582
今天学javascript,学到日期时间对象Date(),看到一个电商网站活动倒计时的案例，稍加修改。后来又想到比赛考试，2小时倒计时的例子，也试着实现了。现分享如下： 一、电商网站倒计时 一到了双十一或双十二或者聚划算店铺庆典活动等，电商网站都会出现倒计时的场景，如图所示，“距离结束07:53:58”，每秒钟执行一次。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti
有趣的HTML实例（一） 倒计时
好好读书
02-06 7496
有趣的HTML实例（一） 倒计时，适用于多种情景，可塑性
活动倒计时代码（精确到毫秒）jquery插件
weixin_30564785的博客
04-24 142
1 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 2 <script type="text/javascript"> 3 $.extend($.fn,{ 4 ...
一段最简单的实现HTML页面上倒计时的动态效果
SAP 资深技术专家 Jerry Wang 的技术分享
03-21 2873
<html> <script> var countdown = function(timeout) { var countUI = document.getElementById("count"); if(!!countUI) { countUI.innerHTML = timeout; if (timeout == 0) {...
渐变%进度条（基数500）
z1093541823的博客
10-15 243
1、HTML代码 <template slot-scope="scope"> <div class="bgLine"> <div :class="'leaveBgg' + scope.row.leave" //渐变色等级 :style="{ width: scope.row.para
效果:网页页面随机改变颜色+自定义样式背景颜色随机改变+20秒倒计时+时间一到马上跳转新页面
weixin_45789271的博客
10-30 1147
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
html百分比颜色表示,多种颜色进度条布局任您选择 进度条模板代码
weixin_42395985的博客
06-18 1780
无法在这个位置找到： /templets/default/think201610/bodys.htm进度条特点：集成多种颜色供选择，只需要改变一个颜色CLASS选择器即可改变预设几种进度条颜色样式，采用div css布局、按百分比计算进度条——多种颜色进度条。多颜色进度条一、在线效果与代码1、颜色丰富百分比滚动条2、html代码3、js引入与自定义JS代码layui.use('element', ...
Android圆形进度条倒计时渐变消失
07-25
要实现Android圆形进度条的倒计时渐变消失效果，你可以结合计时器和动画来实现。下面是一个简单的示例代码： 首先，在你的布局文件中添加以下代码： ```xml <ProgressBar android:id="@+id/progressBar" android:layout_width="200dp" android:layout_height="200dp" android:indeterminate="false" android:max="100" android:progressDrawable="@drawable/progress_bar_gradient" /> ``` 然后，在drawable目录下创建一个名为progress_bar_gradient.xml的XML文件，内容如下： ```xml <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="-90" android:toDegrees="270"> <shape android:shape="ring" android:innerRadiusRatio="3" android:thicknessRatio="8"> <gradient android:id="@+id/gradient" android:type="sweep" android:startColor="#FF0000" android:centerColor="#FFFF00" android:endColor="#00FF00" android:angle="0" /> </shape> </rotate> ``` 接下来，在你的Activity中使用计时器和动画来实现倒计时渐变消失效果： ```java ProgressBar progressBar = findViewById(R.id.progressBar); // 设置倒计时总时间（单位：毫秒） final long totalTime = 5000; // 设置倒计时间隔时间（单位：毫秒） final long interval = 100; // 设置进度条初始值 progressBar.setProgress(100); // 创建计时器 new CountDownTimer(totalTime, interval) { @Override public void onTick(long millisUntilFinished) { // 计算当前进度 int progress = (int) (millisUntilFinished * 100 / totalTime); progressBar.setProgress(progress); // 计算渐变色的结束位置 int endColor = Color.HSVToColor(new float[]{progress * 1.2f, 1, 1}); // 获取渐变色对象 GradientDrawable gradientDrawable = (GradientDrawable) progressBar.getProgressDrawable().getCurrent(); // 设置渐变色的结束颜色 gradientDrawable.setColors(new int[]{Color.RED, endColor, Color.GREEN}); // 刷新进度条的绘制 progressBar.invalidate(); } @Override public void onFinish() { // 倒计时结束后的操作 progressBar.setProgress(0); } }.start(); ``` 在上述代码中，我们使用CountDownTimer计时器来实现倒计时功能。在每个计时周期内，我们根据剩余时间计算进度条的进度，并根据进度计算渐变色的结束位置。然后，我们通过设置渐变色的结束颜色来实现渐变消失效果。最后，在倒计时结束后，我们将进度条的进度重置为0。 这样，你就可以看到一个倒计时渐变消失的圆形进度条了。你可以根据需要调整倒计时时间、渐变色和其他样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值