ZhangYang's Blog

【实战】JS语音生成器

发表于 | 分类于

JS 语录生成器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="page">
    <section class="editor">
      <ul>
        <li>
          <input type="text" id="word1" value="真诚的爱情">
        </li>
        <li>
          <input type="text" id="word2"  value="女孩子">
        </li>
        <li>
          <input type="text"  id="word3"  value="我爱你">
        </li>
        <li>
          <input type="text"  id="word4"  value="在这份爱上加上一个期限">
        </li>
      </ul>
      <button id=generate>生成</button>
    </section>
    <section class="preview" id="preview">
      <p>曾经有一份 <span id="place1">真诚的爱情</span> 放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
      <p>如果上天能够给我一个再来一次的机会，我会对那个 <span id="place2">女孩子</span> 说三个字：<span id="place3">我爱你</span>。如果非要 <span id="place4">在这份爱上加上一个期限</span>，我希望是……一万年……
    </section>
  </div>
</body>
</html>
// index.css
*{
  margin: 0;padding:0;box-sizing: border-box;
}
ul,ol{
  list-style: none;
}
.page{
  display: flex;
  padding: 1em;
}
.page .editor{
  margin-right: 3em;
}
.page .preview p{
  margin-bottom: 1em;
}
// index.js
console.assert(generate.tagName === 'BUTTON')
generate.onclick = function(){
  var w1 = word1.value
  var w2 = word2.value
  var w3 = word3.value
  var w4 = word4.value
  
//   place1.innerText = w1
//   place2.innerText = w2
//   place3.innerText = w3
//   place4.innerText = w4
  var html = `<p>曾经有一份${w1}放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
              <p>如果上天能够给我一个再来一次的机会，我会对那个${w2}说三个字：${w3}。如果非要${w4}，我希望是……一万年……`
  preview.innerHTML = html
}
console.log(document.querySelectorAll('.preview>p'))