个人中心
gpt4 book ai didi

javascript - 转换操作后显示弹出窗口

转载 作者：行者123 更新时间：2023-12-05 05:50:03 25 4
gpt4 key购买 nike

我有一个转换和一个 checkin javascript。目前，警报显示在实际转换之前。有没有办法只在转换完成后显示警报？

对象是进行转换，然后进行检查，这样我就可以发生某种事件，在屏幕中间显示获胜者横幅。现在唯一的目标是在转换后进行检查。

这是我现在拥有的:

animation 

<html>
<head>
<script>
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'style.css';
    document.getElementsByTagName('HEAD')[0].appendChild(link);
</script>
</head>

<html lang="en">

<body>
<div id="field" class="soccer-field">
    <div id="b" class="btnBlue"></div>
    <div id="ball" class="btnSoccerBall"></div>
    <div id="r" class="btnRed"></div>
</div>
</body>

</html>

<script>
//Add onclick
document.getElementById("b").addEventListener("click", myMoveLeft);
document.getElementById("r").addEventListener("click", myMoveRight);
//Add animation
var item = document.getElementById('ball');
var anim;
var x = 0, y = 0;
function myMoveLeft() {
    anim = item.animate([
        // keyframes
        { transform: `translate(${x}px, ${y}px)` },
        { transform: `translate(${x + 100}px, ${y}px)` }
    ], {
        duration: 500,
        iterations: 1,
        fill: 'forwards'
    });
    x += 100;
    
    if (x == 700) {
        alert("ok")
    }
}
function myMoveRight() {
    anim = item.animate([
        // keyframes
        { transform: `translate(${x}px, ${y}px)` },
        { transform: `translate(${x - 100}px, ${y}px)` }
    ], {
        duration: 500,
        iterations: 1,
        fill: 'forwards'
    });
    x -= 100;
    if (x == -700) {
        alert("ok")
    }
}
item.addEventListener('animationend', () => {
    console.log('Animation ended');
});
</script>

CSS

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20rem;
overflow: hidden;
}

.btnBlue {    
background-image:url(b.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
margin-left: 20px;
margin-bottom: 20px;
height: 150px;
width: 150px;
}

.btnRed {    
background-image:url(r.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
margin-right: 20px;
margin-bottom: 20px;
height: 150px;
width: 150px;
}

.btnSoccerBall {
background-image:url(s.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%; 
position: relative;
margin: auto;
height: 100px;
width: 100px;
}

.soccer-field {
background-image:url(back.jpg);    
background-repeat: no-repeat;
background-position: center;
background-size: 100%;

height: 100vh;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
/* padding: 0 20px; optional */
}

最佳答案

您可以使用 Animation.onfinish功能并在其中移动您的警报代码。像下面这样尝试。

document.getElementById("b").addEventListener("click", myMoveLeft);
//Add animation
var item = document.getElementById('ball');
var anim;
var x = 0,
  y = 0;

function myMoveLeft() {
  anim = item.animate([
    // keyframes
    {
      transform: `translate(${x}px, ${y}px)`
    },
    {
      transform: `translate(${x + 100}px, ${y}px)`
    }
  ], {
    duration: 500,
    iterations: 1,
    fill: 'forwards'
  }).onfinish = function() {
    x += 100;

    if (x == 700) {
      alert("ok")
    }
  };
}

item.addEventListener('animationend', () => {
  console.log('Animation ended');
});
<div>

  <input type='button' id='ball' value='ball' />

</div>
<input type='button' id='b' value='l' />

关于javascript - 转换操作后显示弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70587750/

25 4 0
文章推荐： javascript - 在 Response DTO 中公开自定义 getter 不起作用
文章推荐： github - 可以在 ssh 中使用个人访问 token 进行 ci github 操作吗？
文章推荐： reactjs - 如果所有组件在 ReactJS 中返回 Null，则渲染不同的组件
文章推荐： TypeScript:在运行时访问类型信息
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com