zoukankan      html  css  js  c++  java
  • 原生js实现简单的倒计时

    用原生实现了一个简单的倒计时,主要用到setInterval来控制时间100%至0%,当进度为0%时,clearInterval,然后在时间小于某个值时,小小改变了倒计时的填充颜色,当然了这只是一个雏形,可根据实际需要进行封装

    附源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .timeContainer{
                width: 200px;
                height: 30px;
                border-radius: 6px;
                border: 1px solid #ccc;
            }
            .timeContainer #countDown{
                height:100%;
                background: orange;
            }
        </style>
    </head>
    <body>倒计时:
        <div class="timeContainer">
            <div id="countDown" style=" 100%;"></div>
        </div>
        <script type="text/javascript">
            window.onload = function () {
                myTime
            }
            function countDown () {
                let timeCount = document.getElementById('countDown')
                timeCount.style.width = parseInt(timeCount.style.width) - 1 + '%'
                if (timeCount.style.width < '30%') {
                    timeCount.style.background = 'red'
                }
                if (timeCount.style.width == '0%') {
                    window.clearInterval(myTime)
                }
            }
            let myTime = setInterval(function() {countDown()}, 100)
        </script>
    </body>
    </html>
  • 相关阅读:
    前端知识体系
    DOMContentLoaded与load的区别
    最佳网页宽度及其实现
    一些颜色工具网站
    Firebug入门指南
    CSS中背景图片定位方法
    字符编码笔记:ASCII,Unicode 和 UTF-8
    学JS的书籍
    深入理解定位父级offsetParent及偏移大小
    event——事件对象详解
  • 原文地址:https://www.cnblogs.com/moqq/p/8807993.html
Copyright © 2011-2022 走看看