javascript 如果我点击屏幕，如何更改文本

brc7rcf0 于 2023-01-19 发布在 Java

关注(0)|答案(1)|浏览(135)

我试图弄清楚如何使一个对话框系统，显示文本，并在你点击它删除框中的所有文本和新的文本出现在它的位置。（我希望能够这样做多次）

var container = document.querySelector(".text");

var speeds = {
  pause: 400,
  slow: 120,
  normal: 50,
  fast: 20,
  superFast: 10
};

var textLines = [{
    speed: speeds.slow,
    string: "this is a test"
  },
  {
    speed: speeds.pause,
    string: "",
    pause: true
  },
  {
    speed: speeds.normal,
    string: "pls help me"
  },
  {
    speed: speeds.fast,
    string: "idk what im doing",
    classes: ["red"]
  },
  {
    speed: speeds.normal,
    string: ":("
  }
];

var characters = [];
textLines.forEach((line, index) => {
  if (index < textLines.length - 1) {
    line.string += " ";
  }

  line.string.split("").forEach((character) => {
    var span = document.createElement("span");
    span.textContent = character;
    container.appendChild(span);
    characters.push({
      span: span,
      isSpace: character === " " && !line.pause,
      delayAfter: line.speed,
      classes: line.classes || []
    });
  });
});

function revealOneCharacter(list) {
  var next = list.splice(0, 1)[0];
  next.span.classList.add("revealed");
  next.classes.forEach((c) => {
    next.span.classList.add(c);
  });
  var delay = next.isSpace && !next.pause ? 0 : next.delayAfter;

  if (list.length > 0) {
    setTimeout(function() {
      revealOneCharacter(list);
    }, delay);
  }
}

setTimeout(() => {
  revealOneCharacter(characters);
}, 600)

const btn = document.getElementById('btn');

html,
body {
  height: 100%;
  width: 100%;
}

.text span {
  opacity: 0;
}

.text span.revealed {
  opacity: 1;
}

.text span.green {
  color: #27ae60;
}

.text span.red {
  color: #ff0000;
}

body {
  background: #3498db;
  padding: 3em;
  font-family: 'Sora', monospace;
}

.text {
  font-size: 6vw;
  word-spacing: 0.2em;
  margin: 0 auto;
  background: #fff;
  padding: 1em;
  border-bottom: 1vw solid #0e6dad;
  position: relative;
  line-height: 1.2em;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="text">
  </div>
  <button id="textchanger"> continue </button>

  <script src="script.js">
    }
  </script>

  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>


</body>

</html>

到目前为止所有我能做的从这是一个单一的短语出现在屏幕上，这就是它.要改变它，我必须去在手动.

JavaScript

来源：https://stackoverflow.com/questions/75162781/how-to-i-make-the-text-to-change-if-i-click-on-the-screen

1条答案

按热度按时间

yruzcnhs1#

我（几乎）从零开始做所有的js，因为为了达到你想要的效果而重构你的代码是非常困难的，我所做的似乎是有效的，这是非常简单的：

const container = document.querySelector(".text");
const btn = document.querySelector("#textchanger");

// rename speeds in delays which is more coherant
const delays = {
  slow: 120,
  normal: 50,
  fast: 20,
  superFast: 10
};

const textLines = [
  {
    delay: delays.slow,
    string: "this is a test"
  },
  {
    delay: delays.normal,
    string: "pls help me"
  },
  {
    delay: delays.fast,
    string: "idk what im doing",
    classes: ["red"]
  },
  {
    delay: delays.normal,
    string: ":("
  }
];

const revealLine = (lineIndex = 0) => {
  const line = textLines[lineIndex]
  let charIndex = 0

  const nextChar = () => {
    const char = line.string[charIndex]
    const span = document.createElement('span')

    span.textContent = char
    span.classList.add(...(line.classes ?? []))

    container.appendChild(span)

    charIndex++

    if (charIndex < line.string.length)
      setTimeout(nextChar, line.delay);
    else if (lineIndex + 1 < textLines.length) {
      const cb = () => {
        // remove this listener to display the next one
        btn.removeEventListener('click', cb)

        // clear the container
        Array.from(container.children).forEach(el => el.remove())

        // reveal the next line
        revealLine(lineIndex + 1)
      }

      btn.addEventListener('click', cb)
    }
  }

  nextChar()
}

revealLine()

html,
body {
  height: 100%;
  width: 100%;
}

.text span.green {
  color: #27ae60;
}

.text span.red {
  color: #ff0000;
}

body {
  background: #3498db;
  padding: 3em;
  font-family: 'Sora', monospace;
}

.text {
  font-size: 6vw;
  word-spacing: 0.2em;
  margin: 0 auto;
  background: #fff;
  padding: 1em;
  border-bottom: 1vw solid #0e6dad;
  position: relative;
  line-height: 1.2em;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="text">
  </div>
  <button id="textchanger"> continue </button>
</body>
</html>

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 如果我点击屏幕，如何更改文本

1条答案

相关问题

热门标签

最新问答