【每日一练】223—JS实现一款计算器效果

每日一练1年前 (2023)发布 admin
2,748 0
【每日一练】223—JS实现一款计算器效果

完整代码实现过程:

HTML:

<!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″ />
    <title>第222练</title>
    <link rel=”stylesheet” href=”index.css” />
  </head>
  <body>
    <div class=”container”></div>
    <script src=”index.js”></script>
  </body>
</html>

CSS:

@import url(“https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap”);
body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  background-color: #fafafa;
  font-family: “Permanent Marker”, cursive;
}

JS:

const containerEl = document.querySelector(“.container”);
const careers = [“YouTuber”, “Web Developer”, “Freelancer”, “Instructor”];
let careerIndex = 0;
let characterIndex = 0;
updateText();
function updateText() {
  characterIndex++;
  containerEl.innerHTML = `
    <h1>I am ${careers[careerIndex].slice(0, 1) === “I” ? “an” : “a”} ${careers[
    careerIndex
  ].slice(0, characterIndex)}</h1>
    `;
  if (characterIndex === careers[careerIndex].length) {
    careerIndex++;
    characterIndex = 0;
  }
  if (careerIndex === careers.length) {
    careerIndex = 0;
  }
  setTimeout(updateText, 400);
}
© 版权声明

相关文章

暂无评论

暂无评论...