-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
43 lines (38 loc) · 2.31 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标注</title>
<link rel="stylesheet" href="labeltxt.css">
<style>
.content {
width: 1200px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="content"></div>
<button id="btn">确认</button>
<script src="labeltxt.js"></script>
<script>
var htmlstr = `
<p>强大的人不是征服什么，而是能承受什么。一些事情，只有经历过了，才能明白其中的道理，和懂得人生的真谛。绝望并不可怕，可怕的是失去和激情。经历绝望，但不要被绝望吞噬。相反你要胜过它，如同战胜黑暗，迎接光明一样。</p>
<p>你的眼光要比别人远，你的心胸要比他人宽广。天天算计的人生，未来迟早也会被人生算计。除此以外，还活在各种小心眼和小格局之中。人生如同开车一样，当你比别人快30码，你体会到的感受别人无法感知。人生又如同开飞机，当你比别人高30000英尺，你看到的视野自然不同于他人。意思就是，当你在更高更远的美景时，也就不必在意他人短视的眼目。一切自然云淡风轻，不再受影响。</p>
`;
var htmlstr2 = `
<p>你的眼光要比别人远，你的心胸要比他人宽广。天天算计的人生，未来迟早也会被人生算计。除此以外，还活在各种小心眼和小格局之中。人生如同开车一样，当你比别人快30码，你体会到的感受别人无法感知。人生又如同开飞机，当你比别人高30000英尺，你看到的视野自然不同于他人。意思就是，当你在更高更远的美景时，也就不必在意他人短视的眼目。一切自然云淡风轻，不再受影响。</p>
<p>强大的人不是征服什么，而是能承受什么。一些事情，只有经历过了，才能明白其中的道理，和懂得人生的真谛。绝望并不可怕，可怕的是失去和激情。经历绝望，但不要被绝望吞噬。相反你要胜过它，如同战胜黑暗，迎接光明一样。</p>
`;
var labeltxt = new Labeltxt({
el: document.getElementsByClassName('content')[0],
mode: 'label'
})
labeltxt.addText(htmlstr)
document.getElementById('btn').onclick = function () {
console.log(labeltxt.output())
labeltxt.addText(htmlstr2)
}
</script>
</body>
</html>