精华内容
下载资源
问答
  • 倒计时小部件
    2021-06-09 14:29:08

    js代码

    var Utils = {

    //TODO:注意:0 == ‘‘为true

    isNull: function (obj) {

    if (typeof obj == ‘undefined‘ || obj == null || obj == ‘null‘ || obj == ‘NULL‘ || obj == ‘‘) {

    return true;

    } else {

    return false;

    }

    },

    };

    var Timer = {

    canvas: null,

    config: {

    lineWidth: 3,

    shadowBlur: 3,

    shadowColor: ‘yellow‘,

    strokeStyle: ‘red‘

    },

    colorList: ["#FFFF99", "#B5FF91", "#94DBFF", "#FFBAFF", "#FFBD9D", "#C7A3ED", "#CC9898", "#8AC007", "#CCC007", "#FFAD5C"],

    getAbsTop: function (obj) {

    var top = obj.offsetTop;

    while (obj.offsetParent != null) {

    obj = obj.offsetParent;

    top += obj.offsetTop;

    }

    return top;

    },

    getAbsLeft: function (obj) {

    var left = obj.offsetLeft;

    while (obj.offsetParent != null) {

    obj = obj.offsetParent;

    left += obj.offsetLeft;

    }

    return left;

    },

    /**

    * target是目标dom, time是时长以s算

    * */

    startTimer: function (target, time, type, finishCall, config, os) {

    var me = this;

    me.setConfig(config);

    var body = document.getElementsByTagName(‘body‘)[0];

    var canvas = document.createElement(‘canvas‘);

    body.appendChild(canvas);

    canvas.id = ‘timer‘;

    canvas.width = target.offsetWidth + 4;

    canvas.height = target.offsetHeight + 4;

    canvas.style.setProperty(‘top‘, (me.getAbsTop(target) - 2) + ‘px‘);

    canvas.style.setProperty(‘left‘, (me.getAbsLeft(target) - 2) + ‘px‘);

    var context = canvas.getContext(‘2d‘);

    me.setCanvasStyle(context);

    var timer;

    if (type == ‘brick‘) {

    timer = me.drawBrick(context, canvas, time, os, finishCall);

    } else if (type == ‘circle‘) {

    timer = me.drawCircle(context, canvas, time, os, finishCall);

    } else {

    return ‘no type‘;

    }

    return {

    canvas: canvas,

    timer: timer

    };

    },

    setConfig: function (config) {

    if (!Utils.isNull(config)) {

    if (typeof config.lineWidth == ‘number‘) {

    this.config.lineWidth = config.lineWidth;

    }

    if (typeof config.shadowBlur == ‘number‘) {

    this.config.shadowBlur = config.shadowBlur;

    }

    if (!Utils.isNull(config.shadowColor)) {

    this.config.shadowColor = config.shadowColor;

    }

    if (!Utils.isNull(config.strokeStyle)) {

    this.config.strokeStyle = config.strokeStyle;

    }

    }

    },

    setClearColor: function (context) {

    context.shadowColor = ‘#ffffff‘;

    context.strokeStyle = ‘#ffffff‘;

    },

    setRandomLine: function (context) {

    context.shadowColor = this.getColorByRandom();

    context.strokeStyle = this.getColorByRandom();

    },

    setCanvasStyle: function (context) {

    context.lineWidth = this.config.lineWidth;

    context.shadowBlur = this.config.shadowBlur;

    context.shadowColor = this.config.shadowColor;

    context.strokeStyle = this.config.strokeStyle;

    },

    getColorByRandom: function () {

    var me = this;

    var colorIndex = Math.floor(Math.random() * me.colorList.length);

    return me.colorList[colorIndex];

    },

    drawCircle: function (context, canvas, time, os, finishCall) {

    var r = 0;

    if (canvas.width > canvas.height) {

    r = canvas.height / 2;

    } else {

    r = canvas.width / 2;

    }

    r = r - context.lineWidth;

    var x = canvas.width / 2;

    var y = canvas.height / 2;

    var step = 0, startAngle = 0, endAngle, n = 200, add = Math.PI * 2 / n, counterClockwise = false;

    var disTime;

    if (os != ‘ios‘) {

    disTime = time * 1000 / n;

    } else {

    disTime = time / n;

    }

    function drawArc(s, e) {

    context.beginPath();

    context.arc(x, y, r, s, e, counterClockwise);

    context.stroke();

    }

    //TODO:会执行100次

    var timer = setInterval(function () {

    if (step <= n) {

    endAngle = startAngle + add;

    drawArc(startAngle, endAngle);

    startAngle = endAngle;

    ++step;

    } else {

    clearInterval(timer);

    if (typeof finishCall == ‘function‘) {

    finishCall();

    }

    }

    }, disTime);

    return timer;

    },

    drawBrick: function (context, canvas, time, os, finishCall) {

    context.lineTo(0, 0);

    var x = 0, y = 0, isBack = false, cWidth = canvas.width, cHeight = canvas.height;

    var zhouchang = (cWidth + cHeight) * 2;

    var disTime;

    if (os != ‘ios‘) {

    disTime = time * 1000 / zhouchang;

    } else {

    disTime = time / zhouchang;

    }

    var timer1 = setInterval(function () {

    if (y < cHeight && !isBack) {

    ++y;

    } else if (x > cWidth || y > cHeight) {

    clearInterval(timer1);

    if (typeof finishCall == ‘function‘) {

    finishCall();

    }

    } else if (x < 0 || y < 0) {

    clearInterval(timer1);

    if (typeof finishCall == ‘function‘) {

    finishCall();

    }

    } else if (y == 0 && isBack) {

    --x;

    } else if (x == cWidth) {

    isBack = true;

    --y;

    } else if (y == cHeight && !isBack) {

    ++x;

    } else if (x == 0 && y == 0 && isBack) {

    clearInterval(timer1);

    if (typeof finishCall == ‘function‘) {

    finishCall();

    }

    }

    context.lineTo(x, y);

    context.stroke();

    }, disTime);

    return timer1;

    }

    };

    测试代码

    #timer {

    position: absolute;

    }

    .test {

    width: 50px;

    height: 50px;

    margin-left: 100px;

    margin-top: 100px;

    border: 1px solid #000000;

    }

    .bg1{

    width: 300px;

    height: 300px;

    margin-top: 200px;

    margin-left: 100px;

    border: 1px solid #000000;

    }

    .bg2{

    width: 200px;

    height: 200px;

    margin-top: -10%;

    margin-left: -10%;

    border: 1px solid #000000;

    }

    var target = document.getElementsByClassName(‘test‘)[0];

    var startTime = (new Date()).getTime();

    Timer.startTimer(target, 5, ‘circle‘, function(){

    var endTime = (new Date()).getTime();

    console.log(‘total time:‘,endTime - startTime);

    });

    原文:http://my.oschina.net/lovelyBoy/blog/373621

    更多相关内容
  • 倒计时小部件。 最初是为一位想要在日本度假倒计时的朋友写的,我现在添加了设置,您可以在计时器到期时进行更改。 在 v0.2.0 中,我添加了对不同标志的支持。 当前版本有当前的日本国旗、旧式日本国旗、英国国旗...
  • MagicWidget神奇小部件原名叫...功能包含:快捷支付小部件、神奇美句小部件、神奇便签小部件、神奇图片小部件(支持GIF)、应用建议小部件倒计时小部件、星座运势小部件、屏幕时间小部件、Big美句小部件、APK提取等。
  • Windows倒计时小工具

    2016-03-18 17:59:36
    Windows倒计时小工具,很实用
  • 倒计时Web部件

    2014-06-03 22:01:46
    这是一个SharePoint用的倒计时Web部件,部署并激活后可添加到网站中,通过设置目标日期,实时显示倒计时
  • #Countdown Today 工具驻留在通知中心的基本倒计时小部件。 适用于 10.10。 当烤箱上的倒数计时器不起作用时,可以很好地跟踪时间。 在通知中心看起来是这样的: 时间到了,会弹出一个通知: ##安装解压右键...
  • 本文实例为大家分享了android自定义圆形倒计时显示控件的具体代码,供大家参考,具体内容如下先上效果图- 倒计时结束代码块attr.xml 控件需要用到的属性:CountDownView.javapublic class CountDownView extends ...

    本文实例为大家分享了android自定义圆形倒计时显示控件的具体代码,供大家参考,具体内容如下

    先上效果图

    cf59bf571c4baa354b6cd40367600739.gif

    - 倒计时结束

    2b945df0306e2f1637e63a51256dc33e.png

    代码块

    attr.xml 控件需要用到的属性:

    CountDownView.java

    public class CountDownView extends View {

    //圆轮颜色

    private int mRingColor;

    //圆轮宽度

    private float mRingWidth;

    //圆轮进度值文本大小

    private int mRingProgessTextSize;

    //宽度

    private int mWidth;

    //高度

    private int mHeight;

    private Paint mPaint;

    //圆环的矩形区域

    private RectF mRectF;

    //

    private int mProgessTextColor;

    private int mCountdownTime;

    private float mCurrentProgress;

    private OnCountDownFinishListener mListener;

    public CountDownView(Context context) {

    this(context, null);

    }

    public CountDownView(Context context, AttributeSet attrs) {

    this(context, attrs, 0);

    }

    public CountDownView(Context context, AttributeSet attrs, int defStyleAttr) {

    super(context, attrs, defStyleAttr);

    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CountDownView);

    mRingColor = a.getColor(R.styleable.CountDownView_ringColor, context.getResources().getColor(R.color.colorAccent));

    mRingWidth = a.getFloat(R.styleable.CountDownView_ringWidth, 40);

    mRingProgessTextSize = a.getDimensionPixelSize(R.styleable.CountDownView_progressTextSize, DisplayUtils.sp2px(context, 20));

    mProgessTextColor = a.getColor(R.styleable.CountDownView_progressTextColor, context.getResources().getColor(R.color.colorAccent));

    mCountdownTime = a.getInteger(R.styleable.CountDownView_countdownTime, 60);

    a.recycle();

    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    mPaint.setAntiAlias(true);

    this.setWillNotDraw(false);

    }

    public void setCountdownTime(int mCountdownTime) {

    this.mCountdownTime = mCountdownTime;

    }

    @Override

    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

    super.onLayout(changed, left, top, right, bottom);

    mWidth = getMeasuredWidth();

    mHeight = getMeasuredHeight();

    mRectF = new RectF(0 + mRingWidth / 2, 0 + mRingWidth / 2,

    mWidth - mRingWidth / 2, mHeight - mRingWidth / 2);

    }

    @Override

    protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);

    /**

    *圆环

    */

    //颜色

    mPaint.setColor(mRingColor);

    //空心

    mPaint.setStyle(Paint.Style.STROKE);

    //宽度

    mPaint.setStrokeWidth(mRingWidth);

    canvas.drawArc(mRectF, -90, mCurrentProgress - 360, false, mPaint);

    //绘制文本

    Paint textPaint = new Paint();

    textPaint.setAntiAlias(true);

    textPaint.setTextAlign(Paint.Align.CENTER);

    String text = mCountdownTime - (int) (mCurrentProgress / 360f * mCountdownTime) + "";

    textPaint.setTextSize(mRingProgessTextSize);

    textPaint.setColor(mProgessTextColor);

    //文字居中显示

    Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();

    int baseline = (int) ((mRectF.bottom + mRectF.top - fontMetrics.bottom - fontMetrics.top) / 2);

    canvas.drawText(text, mRectF.centerX(), baseline, textPaint);

    }

    private ValueAnimator getValA(long countdownTime) {

    ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 100);

    valueAnimator.setDuration(countdownTime);

    valueAnimator.setInterpolator(new LinearInterpolator());

    valueAnimator.setRepeatCount(0);

    return valueAnimator;

    }

    /**

    * 开始倒计时

    */

    public void startCountDown() {

    setClickable(false);

    ValueAnimator valueAnimator = getValA(mCountdownTime * 1000);

    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

    @Override

    public void onAnimationUpdate(ValueAnimator animation) {

    float i = Float.valueOf(String.valueOf(animation.getAnimatedValue()));

    mCurrentProgress = (int) (360 * (i / 100f));

    invalidate();

    }

    });

    valueAnimator.start();

    valueAnimator.addListener(new AnimatorListenerAdapter() {

    @Override

    public void onAnimationEnd(Animator animation) {

    super.onAnimationEnd(animation);

    //倒计时结束回调

    if (mListener != null) {

    mListener.countDownFinished();

    }

    setClickable(true);

    }

    });

    }

    public void setAddCountDownListener(OnCountDownFinishListener mListener) {

    this.mListener = mListener;

    }

    public interface OnCountDownFinishListener {

    void countDownFinished();

    }

    }

    MainActivity.java

    package com.ouyuan.demo.myapplication;

    import android.animation.ValueAnimator;

    import android.support.v7.app.AppCompatActivity;

    import android.os.Bundle;

    import android.view.View;

    import android.widget.TextView;

    import android.widget.Toast;

    public class MainActivity extends AppCompatActivity {

    CountDownView cdv;

    TextView textView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    cdv = (CountDownView) findViewById(R.id.countDownView);

    cdv.setAddCountDownListener(new CountDownView.OnCountDownFinishListener() {

    @Override

    public void countDownFinished() {

    Toast.makeText(MainActivity.this, "倒计时结束", Toast.LENGTH_SHORT).show();

    }

    });

    cdv.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

    cdv.startCountDown();

    }

    });

    }

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    展开全文
  • 通过继承progressbar实现圆形进度条的倒计时
  • Android工具-周五倒数计时星期五……所有人都在等待工作周的结束,期待已久的休息时间将到。 毕竟,星期五晚上是最佳时间,因为工作周已经结束,而周末尚未开始。 无论工作带来乐趣还是您希望尽快回家,都没有关系...
  • 这是一个圆形的小部件,可以用来显示倒计时定时器或计数定时器
  • Displaying Your Milestone Countdown Widget in WordPress 在WordPress中显示您的里程碑倒计时小部件 Now that you have created your milestone countdown widget, let’s add it to your website. 现在,您已经...

    Do you want to add a milestone countdown in WordPress? A countdown timer helps you showcase important achievements, anniversaries, upcoming events and more. In this article, we will show you how to easily add a countdown timer in WordPress (even the evergreen timers).

    您是否要在WordPress中添加里程碑倒计时? 倒数计时器可帮助您展示重要成就,周年纪念日,即将发生的事件等。 在本文中,我们将向您展示如何在WordPress中轻松添加倒数计时器(甚至是常绿计时器)。

    Adding a milestone countdown widget in WordPress

    什么时候以及为什么需要里程碑倒计时小部件? (When and Why you Need a Milestone Countdown Widget?)

    Milestone countdown widgets are a useful tool to remind your audience about an important milestone in your business, an upcoming event, product launch, or a sales events. This helps build anticipation among your customers and improves user engagement.

    里程碑倒计时小部件是一个有用的工具,可以提醒您的观众业务中的重要里程碑,即将发生的事件,产品发布或销售事件。 这有助于在客户之间建立预期并提高用户参与度

    Following are some common scenarios where you can effectively use a milestone countdown widget:

    以下是一些可以有效使用里程碑倒数小部件的常见方案:

    • coming soon page.即将发布的页面上启动网站之前。
    • website maintenance to let visitors know when the website will be available again.网站维护期间,让访问者知道何时该网站将再次可用。
    • Before introducing a new product or service.

      在介绍新产品或服务之前。
    • When hosting an event or conference.

      主持活动或会议时。
    • On the birthdays of your online business.

      在您在线业务的生日那天。
    • On holidays and sale events such as Black Friday to offer big discounts on your products or services.

      在节假日和促销活动(例如黑色星期五)中,可以为您的产品或服务提供大幅折扣。

    You can display the milestone countdown timer in your posts, pages, and sidebar widget area. You can also add countdown timers in lightbox popups, floating bars, scroll boxes, and other design agnostic elements to engage abandoning site visitors and bring them back to your website.

    您可以在帖子,页面和侧栏小部件区域中显示里程碑倒数计时器。 您还可以在灯箱弹出窗口,浮动条,滚动框和其他与设计无关的元素中添加倒数计时器,以吸引放弃网站的访问者并将他们带回您的网站。

    Since there are so many use-cases of a countdown timer, we have listed 3 different methods for adding a milestone countdown widget in WordPress:

    由于存在一个倒数计时器的用例,因此我们列出了3种在WordPress中添加里程碑倒数小部件的不同方法:

    1. Create Milestone Countdown Widget using Countdown Timer Ultimate使用倒数计时器终极版创建里程碑倒数小部件
    2. Create Highly Engaging Dynamic Countdown Timers with OptinMonster使用OptinMonster创建高度参与的动态倒数计时器
    3. Create Coming Soon & Maintenance Mode Countdown Timer with SeedProd使用SeedProd创建即将上线的维护模式倒数计时器

    Let’s take a look at how to easily add a milestone countdown widget in WordPress.

    让我们看一下如何在WordPress中轻松添加里程碑倒计时小部件。

    影片教学 (Video Tutorial)

    演示地址

    If you don’t like the video or need more instructions, then continue reading.

    如果您不喜欢该视频或需要更多说明,请继续阅读。

    方法1:使用倒数计时器终极插件添加里程碑倒数小部件 (Method 1: Adding a Milestone Countdown Widget Using Countdown Timer Ultimate Plugin)

    Countdown timer demo

    First thing you need to do is install and activate the Countdown Timer Ultimate plugin. For more details, see our step by step guide on how to install a WordPress plugin.

    您需要做的第一件事是安装并激活Countdown Timer Ultimate插件。 有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

    Upon activation, you need to visit the Countdown Timer » Add Timer page in your WordPress admin area.

    激活后,您需要访问WordPress管理区域中的“ 倒数计时器»添加计时器”页面。

    On this page, you need to start by adding your milestone name as the title for the new countdown timer.

    在此页面上,您需要首先添加里程碑名称作为新的倒数计时器的标题。

    Note: The timer uses the timezone set in your WordPress site settings. If you want to change the timezone for this countdown timer, then you will need to go to Settings » General and update the timezone settings of your WordPress site.

    注意:计时器使用在WordPress网站设置中设置的时区。 如果要更改此倒数计时器的时区,则需要转到“设置”»“常规”并更新WordPress网站时区设置

    Add timer title

    After that, you can scroll down to set an expiration date, day, and time for your milestone countdown timer.

    之后,您可以向下滚动以设置里程碑倒数计时器的到期日期,日期和时间。

    Set expiry date

    Next, you need to select an animation style from the drop-down. You can also adjust the circle and background width easily.

    接下来,您需要从下拉列表中选择一种动画样式。 您还可以轻松调整圆圈和背景宽度。

    Choose animation

    In the Countdown Width field, you can define a width for the full display of your countdown widget. If you leave this field blank, then it will display the timer using default size.

    在“倒数宽度”字段中,您可以定义一个宽度,以完整显示倒数窗口小部件。 如果将此字段保留为空白,则它将使用默认大小显示计时器。

    After that you can add the background and foreground color for the countdown timer. You can individually change the color for days, hours, minutes, and seconds. You can also change the labels for elements like days, hours, etc.

    之后,您可以为倒数计时器添加背景和前景色。 您可以分别更改颜色的天数,小时数,分钟数和秒数。 您还可以更改元素的标签,例如天,小时等。

    Background foreground color

    Once you are satisfied with the settings, go ahead and click on the ‘Publish’ button.

    对设置满意后,继续并单击“发布”按钮。

    Displaying Your Milestone Countdown Widget in WordPress

    在WordPress中显示您的里程碑倒计时小部件

    Now that you have created your milestone countdown widget, let’s add it to your website.

    现在,您已经创建了里程碑倒数计时小部件,现在将其添加到您的网站中。

    First, you need to click on the Countdown Timer menu. On the WP Countdown Timer page, you will see the timer you just created listed there.

    首先,您需要点击“倒数计时器”菜单。 在WP Countdown Timer页面上,您会在此处看到刚刚创建的计时器。

    Copy shortcode

    Next to your countdown timer, you will see a shortcode that you need to copy.

    倒数计时器旁边,您会看到一个需要复制的简码

    You need to copy and paste this shortcode in the content area of your post or page. Make sure to click on the update or publish button to save your changes.

    您需要将此简码复制并粘贴到帖子或页面的内容区域中。 确保单击更新或发布按钮以保存更改。

    You can now visit your website to see the milestone countdown widget in action.

    现在,您可以访问您的网站以查看里程碑倒数计时小部件的运行情况。

    Countdown timer demo

    You can also add this countdown timer in the sidebar of your WordPress site. Simply go to Appearance » Widgets page and add a ‘Text’ widget to your sidebar. In widget settings, you need to paste the shortcode for your countdown timer.

    您还可以在WordPress网站的边栏中添加此倒数计时器。 只需转到外观»小部件页面,然后将“文本”小部件添加到侧边栏中。 在小部件设置中,您需要为倒数计时器粘贴简码。

    Countdown widget settings

    Once you’re done, don’t forget to click on the save button to store your widget settings.

    完成后,请不要忘记单击“保存”按钮来存储小部件设置。

    You can now visit your website to see your milestone countdown sidebar widget in action.

    现在,您可以访问您的网站以查看里程碑倒计时侧边栏小部件的运行情况。

    Countdown milestone preview

    方法2:使用OptinMonster添加MileStone倒数小部件 (Method 2: Adding a MileStone Countdown Widget Using OptinMonster)

    OptinMonster is the best WordPress popup plugin on the market. It helps you convert abandoning site visitors into subscribers and customers.

    OptinMonster是市场上最好的WordPress弹出插件 。 它可以帮助您将放弃网站访问者转化为订阅者和客户。

    Using the countdown timer feature by OptinMonster, you can integrate the milestone countdown timer into a lightbox popup, fullscreen widget, floating bar, or any other OptinMonster campaign type.

    使用OptinMonster的倒数计时器功能,您可以将里程碑倒数计时器集成到灯箱弹出窗口,全屏小部件,浮动栏或任何其他OptinMonster广告系列类型中。

    Below is an example of one of the pre-made countdown timer campaigns they have, but you can use drag & drop builder to create a completely customized countdown timer.

    以下是其中一个预先制作的倒数计时器广告系列的示例,但是您可以使用拖放生成器来创建完全自定义的倒数计时器。

    OptinMonster Countdown Timer Popup for Holidays

    OptinMonster is a smart way to show countdown timer in a highly attention grabbing design elements. They even allow you to create evergreen countdown timers in WordPress.

    OptinMonster是一种以引人注目的设计元素显示倒数计时器的明智方法。 它们甚至允许您在WordPress中创建常绿倒数计时器。

    First you need to visit the OptinMonster website and signup for a plan that meets your need.

    首先,您需要访问OptinMonster网站并注册才能满足您的计划。

    After that, you need to install the OptinMonster plugin on your WordPress site. For more details, see our step by step guide on how to install a WordPress plugin.

    之后,您需要在WordPress网站上安装OptinMonster插件。 有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

    This plugin will work as a connector between your WordPress site and OptinMonster app.

    该插件将用作您的WordPress网站和OptinMonster应用之间的连接器。

    Upon activation, click on the OptinMonster link in your WordPress admin menu. Next, you will be asked to enter your OptinMonster API credentials.

    激活后,单击WordPress管理菜单中的OptinMonster链接。 接下来,将要求您输入OptinMonster API凭证。

    Connect to OptinMonster

    You can find this information under your account on the OptinMonster website. Simply login to your account and then click on the ‘API’ link from the menu.

    您可以在OptinMonster网站上的帐户下找到此信息。 只需登录您的帐户,然后从菜单中单击“ API”链接。

    OptinMonster API key

    You need to copy your API key and paste it into OptinMonster settings on your WordPress site. After that, click on ‘Connect to OptinMonster’ button to continue.

    您需要复制API密钥并将其粘贴到WordPress网站上的OptinMonster设置中。 之后,单击“连接到OptinMonster”按钮继续。

    The plugin will now connect your WordPress site to your OptinMonster account.

    现在,该插件会将您的WordPress网站连接到您的OptinMonster帐户。

    Once connected, you can start creating a new campaign from your OptinMonster dashboard. You can use any campaign type and integrate the countdown timer in it.

    建立连接后,您可以从OptinMonster仪表板开始制作新的广告系列。 您可以使用任何广告系列类型,并在其中集成倒数计时器。

    Create a new campaign

    For more details, see this step by step tutorial on how to create a countdown timer campaign in OptinMonster.

    有关更多详细信息,请参阅本逐步教程, 了解如何在OptinMonster中创建倒数计时器活动

    OptinMonster Countdown Timer Popup for Holidays

    方法3:使用SeedProd添加里程碑倒计时小部件 (Method 3: Adding a Milestone Countdown Widget Using SeedProd)

    SeedProd is the best WordPress coming soon page plugin. The SeedProd pro version comes with a countdown timer feature. You can add this countdown timer to your WordPress website and let your visitors know about a launch or an upcoming website.

    SeedProd即将推出的最好的WordPress页面插件。 SeedProd专业版具有倒数计时器功能。 您可以将此倒数计时器添加到您的WordPress网站,并让您的访客知道启动或即将推出的网站。

    SeedProd preview

    First thing you need to do is to install and activate the SeedProd Pro plugin on your WordPress website. For more details, see our step by step guide on how to install a WordPress plugin.

    您需要做的第一件事是在WordPress网站上安装并激活SeedProd Pro插件。 有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

    Upon activation, you’ll be redirected to Settings » General page in your WordPress admin area. It’ll ask for a license key that you can get from your SeedProd account.

    激活后,您将被重定向到WordPress管理区域中的“设置”»“常规”页面。 它会要求您从SeedProd帐户获取的许可证密钥。

    License key

    Next, you need to visit Settings » Coming Soon Pro page and enable the coming soon mode. It’ll automatically launch the countdown timer with the coming soon page.

    接下来,您需要访问“设置”»“即将推出Pro”页面并启用“即将推出”模式。 它将在即将到来的页面中自动启动倒数计时器。

    Enable coming soon page

    You can click on the edit option to choose a template and customize your coming soon page. Once you are satisfied, make sure to click on the save changes button.

    您可以单击编辑选项以选择模板并自定义即将推出的页面。 满意后,请确保单击“保存更改”按钮。

    SeedProd countdown

    You can now visit your website to see the coming soon counter in action.

    现在,您可以访问您的网站以查看即将到来的反作用。

    That’s all. We hope this article helped you learn how to add a milestone countdown widget in WordPress. You may also want to see our practical tips on getting more traffic for your website.

    就这样。 我们希望本文能帮助您学习如何在WordPress中添加里程碑倒计时小部件。 您可能还想查看我们的实用技巧,以获取更多网站流量

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    如果您喜欢这篇文章,请订阅我们的YouTube频道 WordPress视频教程。 您也可以在TwitterFacebook上找到我们。

    翻译自: https://www.wpbeginner.com/plugins/how-to-add-a-milestone-countdown-widget-in-wordpress/

    展开全文
  • android-times-square Android日历部件.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • 有很多不同的 WordPress 倒计时插件可以让您创建倒数计时器,那么您应该使用哪一个呢? 在本文中,我们将分享适用于 WordPress 的最佳倒计时插件,并解释每个插件的主要功能。 目录 什么是倒数计时器插件以及...

    读者经常问我们如何在他们的网站上添加倒数计时器。倒数计时器是在您的网站上建立预期、兴奋和创造 FOMO 效果的好方法。

    有很多不同的 WordPress 倒计时插件可以让您创建倒数计时器,那么您应该使用哪一个呢?

    在本文中,我们将分享适用于 WordPress 的最佳倒计时插件,并解释每个插件的主要功能。

    目录

    什么是倒数计时器插件以及何时需要它?
    1. OptinMonster
    2. SeedProd
    3.Countdown Timer Ultimate 倒数计时器终极版
    4.Countdown Builder 倒计时生成器
    5.Evergreen Countdown Timer 常青倒数计时器
    6. WordPress Countdown Widget WordPress 倒计时小工具
    7. HurryTimer 快点计时器

    什么是倒数计时器插件以及何时需要它?

    倒数计时器插件允许您显示倒计时到特定时间或日期的计时器。

    聪明的营销人员使用倒数计时器来激发客户的兴趣并在他们的客户中营造一种紧迫感。它可以帮助他们利用 FOMO 效应来提高转化率。

    有许多 WordPress 插件可让您向网站添加倒数计时器。这些倒数计时器可以分为两组:

    1. 普通倒数计时器

    普通的倒数计时器,有时也称为静态或固定的倒数计时器,是大多数人在想象计时器时所想到的。

    这个计时器倒计时到某个固定点。这可能是网站的推出、销售的结束或其他活动。

    倒计时时钟的端点对每个人都是相同的,并且不会根据查看它的人而改变。

    常青计时器

    常青倒数计时器,有时称为动态倒数计时器,特定于每个用户。

    当此人到达您的网站时,它开始倒计时。例如,他们可能有 4 小时的时间来享受特别优惠。

    这可能是一种强大的营销技巧,因为它可以让您产生紧迫感。

    请注意,大多数 WordPress 插件旨在运行正常的倒数计时器,只有一些插件可以让您运行常青计时器。

    让我们来看看一些最好的 WordPress 倒计时插件。

    1. OptinMonster

    OptinMonster 是一个强大的 WordPress 弹出窗口和潜在客户生成插件。它允许您将放弃的网站访问者转换为订阅者和付费客户。

    使用 OptinMonster,您可以创建静态和常青计时器。您可以根据需要制作任意数量的计时器,并且您可以在不同的页面上使用不同的计时器。

    您可以通过多种方式使用 OptinMonster 定位倒数计时器。最好的方法之一是使用固定在页面顶部或底部的浮动栏。这样,它始终保持可见。

    OptinMonster 有关于如何创建和自定义倒数计时器的完整说明。

    这是我们使用 OptinMonster 插件创建的倒数计时器:

    注意:您需要 OptinMonster 的 Pro 计划或更高版本才能使用倒数计时器。

    它们允许您在弹出窗口、浮动栏、全屏欢迎垫、滚动框和内联小部件上添加倒数计时器。

    最重要的是,您可以根据用户的位置、他们所在的页面、他们从哪里访问等等来个性化计时器。

    2. SeedProd

    如果您想为您的网站提供一个“即将推出”的页面,SeedProd 插件是一个不错的选择。它可以让您轻松设置一个特殊的登陆页面,并将您的网站置于即将推出或维护模式。

    使用此插件,您将创建一个普通计时器,为每个人倒计时到同一点。这通常是您的网站启动的那一天。你不能用它来创建一个常青计时器。

    SeedProd 的一项非常聪明的功能是,您可以将站点设置为在计时器结束时立即启动。您不必记得自己手动完成。将倒数计时器添加到您的页面或对其进行编辑时,只需打开“自动启动”功能即可。

    这是我们使用 SeedProd 的 Coming Soon Page Pro 插件创建的倒数计时器:

    3.Countdown Timer Ultimate 倒数计时器终极版

    如果您想创建一个普通的倒数计时器,倒数计时器 Ultimate 是另一个不错的选择。这是一个简单的插件,无法显示特定于单个站点访问者的常青计时器。

    您可以使用 Countdown Timer Ultimate 制作任意数量的倒数计时器,并且您可以在一定程度上自定义它们的外观。

    这是我们使用 Countdown Timer Ultimate 插件的免费版本创建的倒数计时器:

    pro 插件为您提供更高级的选项。这些包括能够在倒计时结束时显示特定文本和额外的设计功能。

    4.Countdown Builder 倒计时生成器

    Countdown Builder 是一个简单的倒数计时器,内置了多种不同的样式。其中包括圆形倒计时、翻转时钟倒计时,甚至是即将推出的页面。

    您可以通过选择“倒计时”块(在“小部件”下)将计时器放置在 WordPress 块编辑器的帖子或页面中。您还可以选择在特定帖子或页面上自动显示它。

    这是我们使用它创建的计时器:

    如果需要,您可以详细编辑时钟的外观,更改字体大小、标签和动画样式等内容。你不需要用 CSS 来做到这一点。有一个内置的编辑器。

    使用专业版,您可以添加电子邮件注册、提前安排计时器、在移动设备上显示/隐藏计时器等。专业版的价格从 19.99 美元起,具体取决于您想要的功能。

    5.Evergreen Countdown Timer 常青倒数计时器

    Evergreen Countdown Timer 可让您创建常青倒计时,正如您从其名称中所期望的那样。您也可以使用它来创建正常的倒计时。

    您可以选择插件如何通过 cookie 或 IP 地址来检测访问者。

    要将计时器添加到您的页面,您需要输入一个短代码。您可以简单地从倒数计时器设置的管理器部分复制并粘贴它。

    一旦您的计时器达到零,您就可以自动将访问者重定向到您选择的 URL。例如,如果您正在倒计时新课程的启动,您可以将它们发送到注册页面。

    这是我们使用 Evergreen Countdown Timer 插件创建的计时器:

    该插件有一个专业版,它为您提供了许多额外的选择。它还可以让您为计时器选择更多颜色,而不仅仅是黑色或白色。

    使用专业版,您可以为可用的“位置”(例如座位或门票)提供倒计时。如果您为付费网络研讨会或其他现场活动出售场地,这可能会很有效。

    6. WordPress Countdown Widget WordPress 倒计时小工具

    WordPress Countdown Widget 是一个具有拖放界面的免费插件。您可以使用它在您的站点上创建多个计时器。

    该插件允许您使用短代码在侧边小部件、帖子或页面中添加倒数计时器。该插件的网站有使用短代码的完整说明。

    与其他插件不同,该插件还提供“倒计时”计时器,您的计时器从过去的某个时间点开始计数,而不是倒计时到未来的某个时间点。

    例如,您可以创建一个插件来显示历史事件(例如名人的诞生)已经过去了多长时间。

    您甚至可以使用它来显示自您的公司成立或您开始博客以来已有多长时间。这是我们创建的示例:

    7. HurryTimer 快点计时器

    HurryTimer 的免费版本可让您创建常青计时器和常规计时器。常青计时器使用 cookie 和 IP 检测来向每个用户显示正确的计时器。

    您还可以设置计时器以在两个固定日期之间运行倒计时。如果您想提前为即将到来的销售做好准备,这将非常有用。

    该计时器适用于 WooCommerce,但您不必运行 WooCommerce 即可使用它。如果需要,您可以在同一页面上多次显示计时器。

    这是我们使用 HurryTimer 创建的计时器:

    如果您有专业版,则可以设置重复计时器。这是一个根据您指定的规则运行的计时器。例如,您可以有一个显示运输截止时间的计时器。

    使用专业版,您还可以创建一个贴在屏幕顶部或底部的公告栏,以保持您的计时器可见。

    我们希望本文能帮助您了解 WordPress 的最佳倒计时插件。您可能还对我们的7个最好的拖放式WordPress网站页面构建器比较以及我们2021年40个最佳免费WordPress主题感兴趣。

    展开全文
  • 一般在做投票时或者拼单时都需要展示倒计时,但是程序中ios中倒计时不显示,安卓中能正常显示 原因是:IOS不支持2019-4-1 10:20:30这种格式,只需要将 - 替换为 / 即可解决: var remainDate = "2019-4-1 10:20:30...
  • 高考倒计时日历版

    2021-06-20 02:05:51
    高考倒计时日历版,小巧简约的高考倒计时app,支持多种字体、颜色、壁纸,具备高考日历、资讯、文章等多种内容,帮助高考考生更好的查看高考信息,做好复习规划。... 提供3种设计风格的桌面倒计时小部件...
  • 微信程序中vant倒计时组件ios设备显示异常,不兼容问题 在微信程序的前端开发中,引用了vant中CountDown 倒计时组件,在开发者工具或是安卓设备上时都能正确预览和使用,但发现在ios设备上运行时却不行 查阅资料后...
  • 篮球比赛30秒计时

    2020-12-08 20:31:27
    计数器是一个用以实现计数功能的时序逻辑部件,它不仅可以用来对脉冲进行计数,还常用做数字系统的定时、分频和执行数字运算系统以及其他特定的逻辑功能。 (2)设置有控制功能,控制计数器的启动、暂停、再启动...
  • { countdown }, data(){ return{ //剩余时间 endTime : '2022-07-1 11:59:00' } } } script> ✍ 三、展示效果 博主致谢 非常感谢伙伴们阅读到结尾,本期的文章就分享到这里,总结了前端vue倒计时组件【模块化开发...
  • 这三款安卓天数倒计时都很好呀!分别是【日期倒计时插件】【番茄ToDo】【倒数日】(也叫做Days Matter)这三个都能用【桌面控件】的方式添加,类似于在手机上添加便签、天气的控件。苹果也能用,但是安全控制的太严,...
  • 单片机课程设计-99秒倒计时

    千次阅读 2021-05-22 16:43:10
    单片机应用技术课程设计指导书合肥通用职业技术学院电气与计算机系 二OO九年11月单片机应用是一门很重要的专业课,它涉及到的理论... 设计题目 99秒倒计时的设计 二. 总体要求1. 仔细阅读设计任务,根据设计的任务...
  • 可编写脚本可编写脚本的小部件集合小部件植物浇水日志小部件 ,该部件用于跟踪自上次浇水以来的天数。 该小部件可与IOS快捷方式,Google表格和Google脚本结合使用。 小部件显示自上次浇水记录以来的植物名称,日期和...
  • Countdown Cart旨在帮助电子商务在线商店减少购物车和浏览的放弃率并提高结账率,倒计时购物车通过在卖家商店中创建强烈的紧迫感,稀缺性和社会证据,说服客户现在购买时间为时已晚。什么是Countdown Cart?倒数计时...
  • 高考倒计时器 网页

    2021-04-18 04:18:39
    软件介绍高考倒计时器 软件是一款非常好用的高考倒计时锁屏计时app,高考倒计时器 2020可直接显示在状态栏和通知栏,有众多桌面计时的小部件可供使用,还可以加上一些鼓励的话以及名言,欢迎对此软件感兴趣的朋友...
  • 基于AT89C51单片机的LED数字倒计时器设计1单片机原理及其应用课程设计课 题: 基于AT89C51单片机的LED数字倒计时器设计专 业: 电工程及其自动化班 级: 2013 级 4班学 号: 姓 名: 设计日期: 2015年6月6日——...
  • 右边的表带拉动会使左边的表盘跟随转动,停止后会开启倒计时。 2 加载背景图片 先来看下工程目录: 直接绘制背景即可,比较简单,实现代码如下: ccwindowwidget.h: #ifndef CCWINDOWWIDGET_H #define ...
  • 表单(form)、按钮(button)是网站中常用的部件之一,在某些情况下为了避免按钮多次被点击触发,我们经常在按钮点击之后变为不可点击状态,倒计时一段时间后恢复点击状态。多次点击有时会造成结果不正确,增加服务器...
  • 桌面时钟安卓: 这款软件可以使你的旧手机重新焕发生命,软件安装包大小2.7M,内容简介,无任何推广内容。 不仅可以显示时间,还可以显示天气,B...在右上角“三点”中可以关闭全局时钟,具体什么样子自行查看。iO...
  • 倒计时计时器倒计时计时器的用途很广泛。它可以用做定时,控制被定时的电器的工作状态,实现定时开或者定时关,最长定时时间为999 分钟。它还可以用做倒计时记数,最长记时时间为999 秒,有三位数码管显示记数状态。...
  • 用过很多种倒计时App 了,而今天要讲的这款 Android 应用「Hurry」,应该这么多同类型应用里的佼佼者了,不论是在颜值还是在易用性上。▎具有视觉冲击的界面作为一个自认审美在线的大龄青年,我一直都觉得一款颜值...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,116
精华内容 846
关键字:

倒计时小部件