虚假进度条提示

<script type ="text/javascript" >

       function getcodesms_Click() {
           showDiv();
       }
       function showDiv() {
           var cv = document.getElementById("pro");
           cv.style.display = 'block';
       }
          
 </script>    

<style type ="text/css" >
     #pro
     {
     width:200px;
     height:100px;
     display:none;
     }
 </style>

进度条图片


  <div>
        <asp:Button ID="getcodesms" runat="server" Text="Button" οnclick="getcodesms_Click" OnClientClick="return getcodesms_Click()"/>
    </div>
     <div id="pro" >
               正在接收信息,请稍等...
                <img  src="img/Progress.gif" alt="value"/>
        </div>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现虚假进度条,你可以使用Vue.js的计时器来模拟进度的增加。以下是一个示例代码: ```html <template> <div> <div class="progress-bar"></div> </div> </template> <script> export default { data() { return { progress: 0, // 进度条的初始值 timer: null // 计时器 }; }, mounted() { this.startFakeProgress(); }, methods: { startFakeProgress() { this.timer = setInterval(() => { if (this.progress < 100) { this.progress += Math.floor(Math.random() * 10) + 1; // 每次增加一个随机数 if (this.progress > 100) { this.progress = 100; // 确保进度不会超过100% } } else { clearInterval(this.timer); // 达到100%后停止计时器 } }, 500); // 每500毫秒增加一次进度 } } }; </script> <style> .progress-bar { width: 100%; height: 10px; background-color: #ccc; } .progress-bar:before { content: ''; display: block; width: 0%; height: 100%; background-color: #0080ff; transition: width 0.5s linear; } </style> ``` 这段代码中,我们在`mounted`钩子函数中调用`startFakeProgress`方法来开始模拟进度条。`startFakeProgress`方法会创建一个计时器,每隔500毫秒增加一次进度值,并更新进度条的宽度。当进度到达100%后,我们清除计时器,停止模拟进度。 在模板中,我们使用一个`div`来表示进度条,通过设置其宽度的百分比来显示进度。CSS中的过渡效果可以让进度条的增长看起来更平滑。 这样,每次加载页面时,进度条会逐渐增长,给用户一种有内容正在加载的假象。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值