实时显示输入英文单词个数
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>