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

按钮点击，字符串拼接，最后效果字符串，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. Ascii码 、16进制与 char

            对于一个非计算机专业出身的人,以前只知道计算机中所有的数据都是以二进制形式进行存储,计算,通信的.但是人类文明中,主要的信息展现以文本的形式展现的.如果使用内存中的0和1来表示文本一直 ...

  2. [转]async & await 的前世今生（Updated）

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...

  3. thinkphp 数据写入

    直线电机优势 ThinkPHP的数据写入操作使用add方法,使用示例如下: $User = M("User"); // 实例化User对象 $data['name'] = 'Thi ...

  4. (转)剖析Linux文件编码的查看及修改

    Linux文件编码的查看和修改都有不止一种做法,如果你需要在Linux中操作windows下的文件,那么很可能会经常遇到文件编码转换的问题,如何进行这项工作,也应该是经常工作在双系统下的操作者的必须掌 ...

  5. 笔试之const问题

    1 . ; int *j=(int *)&i; *j=; cout<<i<<*j<<endl; 答案i为0,*j为1. 2. char * const p= ...

  6. LINK : fatal error LNK1104: 无法打开文件“ucrtd.lib”

    先说解决方案: 选中项目->右键->属性->常规 -->Windows SDK     改成当前系统的SDK版本,我这边是10.0.15063.0,重新生成即可 下载cefsh ...

  7. STL 最大堆与最小堆

    在第一场CCCC选拔赛上,有一关于系统调度的水题.利用优先队列很容易AC. // 由于比赛时花费了不少时间研究如何定义priority_queue的比较函数,决心把STL熟练掌握... Queue 首 ...

  8. python数据类型，数据结构

    数据类型:int,bool 数据结构:dict,list,tuple,set,str

  9. Apache Pig入门学习文档（一）

    1,Pig的安装    (一)软件要求    (二)下载Pig      (三)编译Pig 2,运行Pig    (一)Pig的所有执行模式    (二)pig的交互式模式    (三)使用pig脚本 ...

  10. pandas一些基本操作（DataFram和Series）_3

    import pandas as pd;import numpy as np#通过一维数组创建Chinese = np.array([89,87,86])print(Chinese)print(pd. ...