警报与进度条类似的JS弹框,可以参考如下代码示例:
1.先引入必要的CSS和JS文件
2.使用如下代码实现弹窗和进度条 //弹窗 toastr.options = { positionClass: 'toast-top-right', preventDuplicates: true, progressBar: true } toastr.success('操作成功!');
//带有自定义时间的进度条 var intervalId = setInterval(function() { var $bar = $('.bar'); if ($bar.width() >= 400) { clearInterval(intervalId); $('.progress').removeClass('active'); } else { $bar.width($bar.width() + 40); } }, 800);
//使用setTimeout实现持续时间为3s的进度条 setTimeout(function() { $('.progress').removeClass('active'); }, 3000);
注:以上示例中,toastr.success()函数中的参数可以替换为其他四种选项:info、warning、error 和 options,分别表示信息、警告、错误和自定义选项。