首页 > Web开发 > 详细

JS---案例:大量字符串拼接效果实现

时间:2020-08-19 09:48:52      阅读:46      评论:0      收藏:0      [点我收藏+]

案例:大量字符串拼接效果实现

按钮点击,字符串拼接,最后效果字符串,str

input有很多,type来分就有button和text,需要找出inputs[i].value是text的

所以用!="button",满足条件就push进str,所以是str.push(inputs[i].value)

console.log显示,用str.join就可拼接,加个|清楚一点

 

简而言之,遍历顺便拿到inputs[i].value不是按钮的,push进str, 最后join进str

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>

<body>
  <input type="button" value="拼接吧" id="btn" /><br />
  <input type="text" value="" /><br />
  <input type="text" value="" /><br />
  <input type="text" value="" /><br />
  <input type="text" value="" /><br />
  <input type="text" value="" /><br />
  <script src="common.js"></script>
  <script>

    //推荐使用数组的方式拼接大量的字符串
    document.getElementById("btn").onclick = function () {
      var str = [];
      //获取所有的文本框
      var inputs = document.getElementsByTagName("input")
      //每个文本框的value属性值
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type != "button") {
          str.push(inputs[i].value);
        }
      }
      console.log(str.join("|"));//字符串
    };

  </script>

</body>

</html>

JS---案例:大量字符串拼接效果实现

原文:https://www.cnblogs.com/etoumao/p/13527166.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!