addEventListener 方法在同一个按钮添加两个点击事件。
addEventListener 方法在同一个按钮添加两个点击事件。
ChinaKingM 发表于1年前
addEventListener 方法在同一个按钮添加两个点击事件。
  • 发表于 1年前
  • 阅读 225
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        .bar{
            height: 15px;
            border-radius: 5px;
            width: 300px;
            background-color: #ccc;
            padding: 3px;
        }
        .progress{
            height: 100%;
            width: 0;
            background-color: #007aff;
            border-radius: 5px;
            animation: run 3s 2s 2 forwards;
            -webkit-animation: run 3s 2s 2 forwards;
        }
        @keyframes run {
            to{
                width: 100%;
            }
        }
        @-webkit-keyframes run {
            to{
                width: 100%;
            }
        }
    </style>
    <script>
        window.onload = function(){

            var p=document.getElementsByClassName('progress')[0];
            var r=document.getElementById('result');
            p.addEventListener('animationStart',start)
            p.addEventListener('animationIteration',run)
            p.addEventListener('animationEnd',end)
            p.addEventListener('webkitAnimationStart',start)
            p.addEventListener('webkitAnimationIteration',run)
            p.addEventListener('webkitAnimationEnd',end)
            function  start() {
                r.innerText='动画开始执行'
            }
            function  run() {
                r.innerText='动画重新播放'
            }
            function end() {
                r.innerText='动画执行结束'
            }
        }

    </script>
</head>
<body>
<div class="bar">
    <div class="progress"></div>
</div>
<div id="result"></div>
</body>
</html>
标签: javascript
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 41
码字总数 3822
×
ChinaKingM
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: