帮助中心

首页网页特效整站源码 PHP实例网站模版工具箱常用代码论坛游戏源码资源分享

JS按钮控制数字动态加减效果

浏览：1319次- 评论：1次- 发布时间：2023-02-23

Html

Css

Js

var add = document.querySelector('.add')
var cut = document.querySelector('.cut')
var box = document.querySelector('input')
add.onclick = function() {
    playEffect(box, {
        time: 500,
        initNum: parseInt(box.value),
        num: parseInt(box.value) + 100,
        regulator: 50
    })
}
cut.onclick = function() {
    playEffect(box, {
        time: 500,
        initNum: parseInt(box.value),
        num: parseInt(box.value) - 100,
        regulator: 50
    })
}

function playEffect(target, options) {
    options = options || {};
    if (options.initNum == options.num)
        return;
    var time = options.time, //总时间--毫秒为单位 
        finalNum = options.num, //要显示的真实数值
        regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度  
        step = (finalNum - options.initNum) / (time / regulator),
        /*每30ms增加的数值--*/
        count = options.initNum, //计数器       
        initial = options.initNum;
    var timer = setInterval(function() {
        count = count + step;
        if (count >= finalNum && options.initNum < finalNum) {
            clearInterval(timer);
            count = finalNum;
        }
        if (count <= finalNum && options.initNum > finalNum) {
            clearInterval(timer);
            count = finalNum;
        }
        //t未发生改变的话就直接返回  
        var t = Math.floor(count);
        if (t == initial)
            return;
        initial = t;
        target.value = initial + "";
    }, 30);
};

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

素材牛VIP永久特权

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：js控制数字动态加减代码

js控制数字动态加减

讨论这个常用代码（1）回答他人问题或分享心得会奖励牛币

ha***ok

2023年07月10日

效果不错！！！

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

我的积分余额：0 已下载次数：1319

所需牛币：5 开始下载

牛币获取：签到、评论、充值 » 在线充值（10牛币=1元）

成为VIP可永久免积分下载全部常用代码 » 查看详情