手机短信验证码---倒计时

简单实现获取短信验证码倒计时效果 前端实现获取短信验证码倒计时效果 阅读详情

一款APP在注册和忘记密码界面都有手机号发送验证码验证功能,下面封装一个工具类可直接使用:


public class SmsHelp {

    public SmsHelp(Context context, Button button) {
        this.mContext = context;
        this.mButton = button;
    }

    private Button mButton;
    private Context mContext;
    private int waitTime = 60;
    private boolean isStop;

    final Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
                case 1:
                    if (waitTime <= 0) {
                        mButton.setText("发送");
                        mButton.setEnabled(true);// 设置可按
                        waitTime = 60;
                        return;
                    }
                    if (isStop)
                        return;
                    mButton.setEnabled(false);// 设置不可按
                    mButton.setText(waitTime + " s ");
                    handler.sendEmptyMessageDelayed(1, 1000);
                    waitTime--;
                    break;
                case 2:
                    isStop = true;
                    waitTime = 60;
                    mButton.setEnabled(true);
                    mButton.setText("发送");
                    break;
            }
        };
    };

    /**
     * 发送验证码
     *
     * @param userName 账号
     * @param type     短信类型 0-注册,1-重置登录密码,2-重置支付密码
     */
    public void buttomSendMsg(String userName, final String type) {

        if (TextUtils.isEmpty(userName)) {
            Toast.makeText(mContext, "用户名不能为空", Toast.LENGTH_SHORT).show();
            return;
        }
        if (!FormatJudge.isMobileNO(userName)) {
            Toast.makeText(mContext, "手机格试不正确", Toast.LENGTH_SHORT).show();
            return;
        }
        isStop=false;
        handler.sendEmptyMessage(1);
        Map<String, String> par = new HashMap<>();
        par.put("MobileNo", userName);
        par.put("CityCode", Config.CITYCODE);
        par.put("ForType", type + "");

        new HttpManager().asyncHttpPost(Conts.SEND_SMS, par, SmsBean.class, new ReqCallBack<SmsBean>() {
            @Override
            public void onComplete() {
            }
            @Override
            public void onReqSuccess(SmsBean result) {
                Toast.makeText(mContext, "短信验证码为:" + result.getCode(), Toast.LENGTH_LONG).show();
            }
            @Override
            public void onReqFailed(String errorMsg) {
                Toast.makeText(mContext, errorMsg, Toast.LENGTH_SHORT).show();
                buttomStopTime();
            }
        });
    }

    /**
     * 停止计时,恢复初始状态
     */
    public void buttomStopTime() {

        if (mButton == null) {
            return;
        }
        handler.sendEmptyMessage(2);
    }
}

在需要使用的地方调用该类的buttomSendMsg()方法即可,例:

mBtnSendCode = (Button) findViewById(R.id.btn_send_code);
smsHelp = new SmsHelp(this,mBtnSendCode);
smsHelp .buttomSendMsg(getPhone(),"1");


手机短信验证码 -- 云通讯 手机验证码 包括手机验证码的发送 还有点击后倒计时 jsp &amp;amp;amp;amp;amp;amp;lt;input onclick=&amp;amp;amp;amp;amp;quot;settime(this);&amp;amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;amp;quot;button&amp;amp;amp;amp;amp;quot; value=&amp;amp;amp;amp; 阅读详情

相关推荐

实现短信倒计时60秒的方法(JavaScript)

在函数内部,我们将倒计时时间减1,并更新倒计时元素的显示。如果倒计时时间减到0,我们就清除计时器,停止倒计时,并在倒计时元素中显示"倒计时结束"的文本。在前端开发中,有时候我们需要为用户提供一个倒计时功能,例如发送短信验证码后的倒计时,本文将介绍如何使用JavaScript实现一个短信倒计时功能,倒计时时间为60秒。这样,当你在浏览器运行这段代码时,你会看到一个显示倒计时的元素,并且每秒钟倒计时时间减少1,直到倒计时结束。首先,我们需要在HTML文件中创建一个用于显示倒计时的元素,例如一个。

YabClass的博客 1210

js实现获取验证短信倒计时功能

今天和大家分享一个小功能,在我们进行需要获取手机验证码或其他方式的验证码进行登录时会有一个功能,就是当你点击发送验证码时会有一个倒计时倒计时没有结束时按钮是禁用的状态,防止重复发送短信,下面我们来看一下这个功能使用JS该如何实现。我们定义的time是一个倒计时的时间,一般为60秒,这里是为了不等太长的时间设置的10秒,大家可以根据自己的需要来设置倒计时的时长。以上就是本章的全部内容,希望能够帮助到您。

SqlloveSyn的博客 3043

点击发送短信验证码页面的代码

NULL 博文链接:https://huyana-town.iteye.com/blog/2241363

使用Vue纯前端实现发送短信验证码并实现倒计时

你好,我是小白Coding日志,一个热爱技术的程序员。在这里,我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客,一起在技术的世界里探索前行吧!在实际的应用开发中,涉及用户登录验证、密码重置等场景时,通常需要前端实现发送短信验证码的功能,以提升用户体验和安全性。这个过程涉及与后端的协同配合,通过调用短信网关或短信服务接口,将验证码发送至用户手机。以下是一个简单的前端实现,演示了如何在用户点击发送验证码按钮时触发短信验证码的发送,并开始一个倒计时

技小白的博客 3019

前端实现手机短信验证码倒计时效果

基于setTimeout函数 + 迭代。

~ 1544

发送手机短信验证码-后端、前端(验证码倒计时)

获取手机短信验证码-后端、前端(验证码倒计时) 后端 /** * 发送手机短信验证码 * * @return str * @throws Exception * @author 王永圣 */ @RequestMapping(value = "/verifyCode") public @ResponseBody Map&lt;String, O...

yswKnight的博客 5620

android 倒计时60秒 手机短信验证码

倒计时 CountDownTimer timer = new CountDownTimer(60 * 1000, 1000) { @Override public void onTick(long millisUntilFinished) { RegisterCode.setText("还剩" + millisUntilFinished / 1000 + "秒"...

weixin_43299230的博客 612

使用vue3和vueuse完成手机短信验证码倒计时

目的:完成手机短信验证码倒计时效果

qq_46343149的博客 1258

手机短信验证码 倒计时 不受刷新页面,离开页面影响 安排!

注:运行环境需先引入jquery html页面: &lt;button id="getcode" value="获取验证码"&gt;获取验证码&lt;/button&gt; js页面: /** * @time: 2018-09-29 * @auto: yuanwang12 */ // 防止页面刷新倒计时失效 /** * * @param {Object} obj ...

qq_39562867的博客 2498

产品经理如何来优化CSDN手机短信验证的功能

产品经理如何来优化CSDN手机短信验证的功能

2023跟着小虎玩着去软考 1190

Vue或者uniapp获取手机短信验证码

Vue或者uniapp获取手机短信验证码 <button class=“verificationCode-right” @click=“getCode()” type=“default” :disabled="!show"> 获取验证码 重新发送{{count}}s data里面定义 TIME_COUNT:120,//验证码倒计时60s count:’’, show:true, methods里面定义* // 验证码倒计时60s getCode(){ if (!th

wangongchao的博客 3173

js手机短信按钮倒计时

/* 120秒手机短信按钮倒计时 */ exports.sendmessage = function (name) { var second = 120; $(name).attr("disabled", true); var color = $(name).css('background-color'); $(name).at...

weixin_33937913的博客 130

JavaWeb手机短信实现前台利用JS获取随机验证码倒计时效果

1 var random=""; 2 function getMessages(button){ 3 //前台倒计时 4 front(button); 5 //请求后台发送验证码 6 behind(); 7 } 8 ...

weixin_30271335的博客 199

限制一分钟只能发送一次手机短信

为什么要限制一分钟之内只能发送一次手机短信呢? 防止恶意攻击. 什么场景需要发送手机短信? (a)手机注册 (b)通过手机找回密码 (c)手机号绑定,手机号换绑 (d)转账时手机号接收动态口令(一次一密) 1,前端 一般前端会有倒计时,在倒计时的过程中是不允许点击"发送短信"按钮的: 但是如果用户刷新页面呢? 如果刷新页面,那么页面的倒计时就会中断. 这是需要服务器端提供支持:服务器端要记录上次发送短信的时间戳 2,后台 第一次发送时lastSendSM...

竹林幽深 1589

手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)

一个简单的手机短信验证码登录,涉及到的方方面面比较多。在发送短信次数的限制上,本系统作为正常的业务逻辑进行判断和限流,同时对于阿里云和腾讯云也有对应的限制规则,需要在平台上进行设置。@漏刻有时。

挖掘大数据价值,让决策者快速洞悉趋势,让大众读懂数据背后的故事。 2422

SpringBoot整合手机短信验证码

获取对接官网的key授权码,导入依赖,前端发送请求携带手机号,后端Dto接收参数,调用接口1.参数校验(JSR303);2.业务校验;3.业务实现@Override//1.参数校验//2.业务校验//2.1校验图形验证码是否存在throw new GlobalException("1021", "验证码不存在");//2.2校验图形验证码是否正确if (!throw new GlobalException("1022", "验证码不正确!");//2.3手机号是否已被注册

lzc翻身博客 1594

vue--获取手机短信验证码

1、初始化秒: return { //初始值 show: 'false', count: '', } 2、页面中: <el-form-item prop="code" label="短信验证码"> <el-input v-model.trim="form.code" style="width:60%" maxlength="6" oninput="value=value.replace(/[

weixin_45102212的博客 2056

获取验证码倒计时

html部分a class="getCode">获取验证码a> js部分 //获取验证码 $('.getCode').on('click',function(){ setTimeout(backtime,1000); }); //倒计时 var timenum = 60; function backtime(){ if(timenum 1){ $('.

lishangua的专栏 574
上一篇: 解决依赖库版本不一致导致的问题
下一篇: 使用SharedPreference存储对象集合
JustinNick
博客等级 码龄10年 23粉丝 61原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值