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

按钮点击，字符串拼接，最后效果字符串，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. 企业网盘居然支持高速局域网文件传输工具（速度可达20M）

    高速局域网文件传输工具Mobox,局域网内文件共享是公司内非常必须的功能,原本文件共享可以通过:1)windows目录共享目录来实现文件交互:2)通过U盘拷贝给对方:3)通过QQ发送给对方:4)通过邮 ...

  2. Codeforces 548E Mike ans Foam (与质数相关的容斥多半会用到莫比乌斯函数)

    题面 链接:CF548E Description Mike is a bartender at Rico's bar. At Rico's, they put beer glasses in a sp ...

  3. SPOJ - LOCKER

    SPOJ - LOCKERhttps://vjudge.net/problem/45908/origin暴力枚举2-102 23 34 2 25 2 36 3 37 2 2 38 2 3 39 3 3 ...

  4. configparser 配置文件模块

    #_author:star#date:2019/11/7# configparser 配置文件模块import configparserconfig=configparser.ConfigParser ...

  5. Django 操作Cookie与Session

    目录 Cookie Session Django中操作Cookie 基本操作 基于cookie的登录装饰器 Django中操作Session 基本操作 Session流程解析 基于session的登录 ...

  6. vue实现分环境打包步骤（给不同的环境配置相对应的打包命令）

    在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: ...

  7. 菜鸟nginx源码剖析数据结构篇（五） 基数树 ngx_radix_tree_t[转]

    菜鸟nginx源码剖析数据结构篇(五) 基数树 ngx_radix_tree_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blo ...

  8. jun引导1.04可以让N3050支持6.2

    1.03引导用在3050可以安装 但是安装后找不到dsm 需要手动插拔电源才可以解决 偶尔还会死机 1.04可以引导3050安装6.2 23739 安装24922正常,但是moments传照片后会死机 ...

  9. 可怜的baidu，可怜的音库

    baidu词典中用的中文音库竟然全都是汉典的中文音库   真可怜,baidu这么大个公司竟然连着1250个发音都懒得录   汉典的音库布都是同一格式,导致一部分音频文件MCI函数无法播放   真他妈可 ...

  10. C开发系列-continue与break

    break break使用场景 switch语句:退出整个switch语句 循环结构:退出整个循环语句 while循环 do while循环 for 循环 continue continue使用场景 ...