JavaScript

实时显示输入英文单词个数

 1  function wordCount(input) {
 2                     // 获取文本框对象
 3                     var el = document.getElementById('words');
 4                     if (el && input) {
 5                         // 获取输入内容长度并更新到界面
 6                         var value = input.value;
 7                         // 替换中文字符为空格
 8                         value = value.replace(/[u4e00-u9fa5]+/g, " ");
 9                         // 将换行符，前后空格不计算为单词数
10                         value = value.replace(/
|
|^s+|s+$/gi, "");
11                         // 多个空格替换成一个空格
12                         value = value.replace(/s+/gi, " ");
13                         // 更新计数
14                         var length = 0;
15                         var match = value.match(/s/g);
16                         if (match) {
17                             length = match.length + 1;
18                         } else if (value) {
19                             length = 1;
20                         }
21                         el.innerText = length;
22                     }
23                 }

html

1 <body>
2 <div onclick="gaibian()">单词数：<span id="words">0</span></div>
3 <textarea id="content" onkeyup="wordCount(this);"></textarea>
4 </body>

js简易选项卡

 1 function xianshinews() {
 2             document.getElementById("xinwen").style.display = "block"
 3             document.getElementById("zhaiyao").style.display = "none"
 4             document.getElementById("top").style.display = "none"
 5 
 6         }
 7 
 8         function xianshiabstract() {
 9             document.getElementById("zhaiyao").style.display = "block"
10             document.getElementById("xinwen").style.display = "none"
11             document.getElementById("top").style.display = "none"
12 
13         }
14 
15         function xianshitop() {
16             document.getElementById("top").style.display = "block"
17             document.getElementById("zhaiyao").style.display = "none"
18             document.getElementById("xinwen").style.display = "none"
19 
20         }

html

<div id="box">
    <div id="hd">
        <span id="s1" onmouseover="xianshinews()">news</span>
        <span id="s2" onmouseover="xianshiabstract()">abstracts</span>
        <span id="s3" onmouseover="xianshitop()">tops</span>
    </div>
    <div id="bd">
        <div class="info" id="xinwen">
            <ul>
                <li><a href="#">newsnewsnewsnewsnewsnews</a></li>
            </ul>
        </div>
        <div class="info" id="zhaiyao">
            <ul>
                <li><a href="#">abstractsabstractsabstractsabstractsabstracts</a></li>
            </ul>
        </div>
        <div class="info" id="top">
            <ul>
                <li><a href="#">topstopstopstopstopstopstops</a></li>
            </ul>
        </div>
    </div>
</div>