UI设计之JS效果-如何制作文字倒计时?

效果图：

点击前

点击后

步骤一：

新按钮标签和类名

步骤二：

将样式写在按钮上，并创建一个新的类名.code-点击按钮后添加time

步骤三：

引入JQ文件，JQ版本无限。

步骤四：

变量在script标签中新建，60秒，可根据个人情况更改；如需更改，以下函数也应相应更改。

步骤五：

使用o为传参；

进行判断：

1.如果倒计时秒数为0;点击禁止执行当前按钮；恢复按钮文本；删除类名（背景颜色）;时间变为60秒

2.如果倒计时秒数不是0(即倒计时);执行当前按钮添加类名（背景颜色）;禁止按钮点击(防止用户多次点击产生BUG);按钮文字变成倒计时数字；倒计时秒数一秒减一；

步骤六：

为此，按钮上写着点击事件，执行函数，并将其传输给自己

所有代码：

本文版权归红喵教育设计综合设计师学院所有，欢迎转载，转载请注明作者来源。非常感谢。

作者：红喵教育设计综合设计师培训学院

首发：http://ui.itheima.com/