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

按钮点击，字符串拼接，最后效果字符串，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---案例：大量字符串拼接效果实现的更多相关文章

  1. 如何让JS变量和字符串拼接后，是变量而不是字符串

    今天有个非常有趣的事,因为我需要用JS去实现多语言,就是我在JS文件里定义了不同的变量,尝试用变量拼接字符串组成之前定义好的变量名称,结果拼接之后,显示的却是字符串,而不是变量,所以无法解析 zh_t ...

  2. LODOP打印超文本字符串拼接1 固定表格填充数值

    前面的博文:Lodop打印控件传入css样式.看是否传入正确样式.Lodop打印如何隐藏table某一列,Lodop传入的样式可以不是页面本身的css样式,传入什么打印什么,此外,数据也是,超文本打印 ...

  3. JavaScript如何实现字符串拼接操作

    实际应用中,目标字符串的生成可能需要多个数据的拼接. 由于应用频繁,几乎是所有编程语言都必须掌握的操作,当然每种语言具有各自特点. 本文将通过代码实例详细介绍一下JavaScript如何实现字符串拼接 ...

  4. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  5. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  6. JS字符串拼接优化

    // 请把以下用于连接字符串的JavaScript代码修改为更高效的方式 var htmlString = ‘ < div class=”container” > ’ + ‘ < u ...

  7. 从字符串拼接看JS优化原则

    来自知乎的问题:JavaScript 怎样高效拼接字符串? 请把以下用于连接字符串的JavaScript代码修改为更高效的方式: var htmlString ='< div class=”co ...

  8. JS模板引擎：基于字符串拼接

    目的 编写一个基于字符串拼接的js模板引擎雏形,这里并不会提供任何模板与数据的绑定. 基本原理 Javascript中创建函数的方式有多种,包括: 1. var func = function () ...

  9. html转js字符串拼接

    https://www.bejson.com/convert/html_js/ html转js字符串拼接

随机推荐

  1. WJMZBMR打osu! / Easy

    WJMZBMR打osu! / Easy 有一个由o,x,?组成的长度为n的序列,?等概率变为o,x,定义序列权值为连续o的长度o的平方之和,询问权值的期望, 解 注意到权值不是简单的累加关系,存在平方 ...

  2. idea-----Idea在不关闭project的情况下进行Import Project

    Idea在不关闭project的情况下进行Import Project 引用:https://blog.csdn.net/qq_28198181/article/details/83069667

  3. springboot启动过程

    使用了很长时间的springboot了,一直都知道它简单易用,简化了框架的搭建过程,但是还是不知道它是如何启动的,今天就跟着springboot的源码,去探探这其中的奥妙 以下是spring应用的启动 ...

  4. 廖雪峰Java11多线程编程-3高级concurrent包-9Fork_Join

    线程池可以高效执行大量小任务: Fork/Join线程池可以执行一种特殊的任务: 把一个大任务拆成多个小任务并行执行 Fork/Join是在JDK 1.7引入的 示例:计算一个大数组的和 Fork/J ...

  5. STL vector容器需要警惕的一些坑

    从迭代器中取值切记需要判断是否为空 例如: vector<int> vtTest; vtTest.clear(); if (vtTest.empty()){ ; } ]; 如果没有忘了判断 ...

  6. 2-sat——hdu3062基础

    hdu就是会卡cin,, 另一种建模方式,把点i拆成i*2,i*2+1,有时候这样会比较简单 #include<bits/stdc++.h> using namespace std; #d ...

  7. centos7 搭建 php7 + nginx (1)

    前言 曾今,写过几篇类似的文章,但是发现几个月后,自己回头再看的时候,有种支离破碎的感觉.自己写的并不全,所以今天打算写一篇比较详细的文档.争取下次环境的减的时候,只需要拷贝复制粘贴即可完成环境搭建. ...

  8. java 调用区块链 发布和调用智能合约

    java连接区块链 很简单 ,调用智能合约要麻烦一些. 先说连接 区块链查询数据. 1 maven 项目导入 web3j 的依赖. <dependency> <groupId> ...

  9. 简单的JMS实例

    1.首先需要一台JMS的提供者,在这里我选择使用的是apache-activemq-5.3.2这个服务器,首先下载服务器并通过bin目录下的activemq.bat启动服务器,此时可通过http:// ...

  10. Appscan standard怎么设置外部浏览器为IE

    Appscan standard怎么设置外部浏览器为IE   方法/步骤     首先,打开一个的Appscan 的界面中,点击菜单中的 工具 的选项   点击了工具的选项之后,弹出了下拉菜单选中为 ...