zoukankan      html  css  js  c++  java
  • 简单的倒计时 时间显示

    <body>
    <input type="checkbox" class="agrees" checked="checked">
    	<div class="fyhsubbtn1">
    			<a class="btn  floatright thirtyshow " href="javascript:void(0)"> <strong class="secondstime timesshow"></strong>秒</a>
    	</div>
    </body>
    

     

    <style>
        .btn{display:block;width: 100px; height: 30px;background: #ccc;text-align: center; line-height: 30px;color: #FFFFFF;}
        .red{background: #FF0000;}
    </style>
    <script>
                                //        在线预览不得少于30秒
                                var second = 0;
                                window.setInterval("OnlineStayTime();", 1000); //setInterval 不停的调用函数
    
                                function OnlineStayTime() {
                                    second++;
                                }
                                $(".thirtyshow").click(function() {
                                    console.log(second);
                                    if(second < 30) {
                                        alert("在线预览不得少于30秒")
                                    }
                                    if(second > 30) {
                                        //                             console.log($(".agrees").is(":checked"))
                                        if($(".agrees").is(":checked")) {
                                            $("#informtab2").parent("li").addClass("active").siblings().removeClass("active");
                                            $("#informdiv1").hide();
                                            $("#informdiv2").show();
                                        } else {
                                            alert("请勾选同意此管理办法!");
                                        }
                                    }
    
                                });
                            </script>
                            <!--倒计时显示时间秒-->
                            <script type="text/javascript">
                                $(document).ready(function() {
                                    var times = 30 * 100; // 30秒
                                    countTime = setInterval(function() {
                                        times = --times < 0 ? 0 : times;
                                        var ms = Math.floor(times / 100).toString(); //求一个最接近它的整数  console.log(ms.length);
                                        if(ms.length <= 1) {
                                            ms = "0" + ms; //如果显示秒数为个位给秒数前加0
                                        }
                                        if(times == 0) {
                                            $(".timesshow").hide();
                                            $(".timesshow").parent().html("同意并继续");
                                            $(".thirtyshow ").addClass("red");
                                            clearInterval(countTime);
                                        }
                                        // 获取秒数
                                        $(".secondstime").html(ms);
                                    }, 10);
                                });
                            </script>

     

  • 相关阅读:
    Thymeleaf 基本表达式
    html中<radio>单选按钮控件标签用法解析及如何设置默认选中
    <%@ page contentType="text/html; charset=utf-8" language="java"%>每一个字符的含义
    El表达式的关系运算符
    Centos7.6安装Docker安装
    linux必须熟练掌握的基础命令
    CentOS7.x编译安装zabbix4.0
    编译装php7.2 && nginx-1.14
    CentOS7.x安装MySQL5.7.25
    CentOS7.x安装kickstart
  • 原文地址:https://www.cnblogs.com/dazhangli/p/6170519.html
Copyright © 2011-2022 走看看