Promise

最新推荐文章于 2025-06-03 09:40:25 发布

renefox

最新推荐文章于 2025-06-03 09:40:25 发布

阅读量140

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_49655243/article/details/123326932

版权

笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个HTML页面中使用JavaScript实现的随机数功能，通过点击按钮，50%的概率显示'Goodlucy'，50%的概率显示'Badlucy'。展示了如何结合Promise和回调函数处理异步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="./index.js"></script>
    <title>index</title>
  </head>
  <body>
    <button id="btn">Tap</button>
    <p>Message:<span id="msg"></span></p>
  </body>
  <script>
    //ramdom number function, 30% percent good lucy
    function rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
    }
    var btn = document.querySelector("#btn");
    var msg = document.querySelector("#msg");
    
	// use promise
    btn.addEventListener("click", () => {
      var p = new Promise((resolve, reject) => {
        setTimeout(() => {
          let n = rand(1, 100);
          console.log(n);
          if (n <= 30) {
            resolve();
          } else {
            reject();
          }
        }, 500);
      });

      p.then(
        () => {
          msg.innerHTML = "<i style='color:green'>Good lucy</i>";
        },
        () => {
          msg.innerHTML = "<i style='color:red'>Bad lucy</i>";
        }
      );
    });

	// use callback
    //btn.addEventListener("click", () => {
    // setTimeout(() => {
    //   let n = rand(1, 100);
    //   console.log(n);
    //   if (n <= 30) {
    //     msg.innerHTML = "<i style='color:green'>Good lucy</i>";
    //   } else {
    //     msg.innerHTML = "<i style='color:red'>Bad lucy</i>";
    //   }
    // }, 1000);

    //});
  </script>
</html>