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

按钮点击，字符串拼接，最后效果字符串，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. HNOI2018思记

    4-13 顺顺利利到了湖南.晚上认真研读cf毒瘤题题解,未果. 发现这里含铁丰富的高温多雨式红土地.以及窗户特别深,总有一圈小阳台的房子,门楣深邃如瞳. 看了一波miaom的ZJOI游记,思考了一下解 ...

  2. 【玲珑杯 round#18 A】计算几何你瞎暴力

    [Link]:http://www.ifrog.cc/acm/problem/1143?contest=1020&no=0 [Description] [Solution] 因为每个点的(xi ...

  3. LUOGU P4027 [NOI2007]货币兑换 (斜率优化+CDQ分治)

    传送门 解题思路 题目里有两句提示一定要看清楚,要不全买要不全卖,所以dp方程就比较好列,f[i]=max(f[j]*rate[j]*a[i])/(rate[j]*a[j]+b[j])+(f[j]*b ...

  4. natapp出现Invalid Host header

    前端是vue 3.x 项目,需要更改vue的配置文件 vue.config.js,在module.exports中添加devServer:{disableHostCheck:true}

  5. [原创]mysql 5.6安装配置,主从分离,读写分离简单教程

    文章中参考使用了多个博客的资料,汇总而成!其流程准确性被人亦本人实践! https://blog.csdn.net/qq_35206261/article/details/81321201 https ...

  6. java基础之二维数组-杨辉三角

    首先呢你要知道什么是杨辉三角? 答:杨辉三角,是二项式系数在三角形中的一种几何排列. 简单的说一下就是两个未知数和的幂次方运算后的系数问题,比如(x+y)的平方=x的平方+2xy+y的平方,这样系数就 ...

  7. <Python基础>类和对象(初级)---烧开水的例子

    ''' 类:模板(模子) 类的名称:类名(人) 类的属性:一组数据(年龄,身高) 类的方法:进行操作的方法(走,跑,吃,喝) 对象:实体 类的抽象:把现实中的物品用类去表示 ''' #创建一个类 cl ...

  8. elasticsearch 中文API 删除（四）

    删除API 删除api允许你通过id,从特定的索引中删除类型化的JSON文档.如下例: DeleteResponse response = client.prepareDelete("twi ...

  9. Useradd- Linux必学的60个命令

    1.作用 useradd命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. 2.格式 useradd [-d home] [-s shell] [-c comment] [-m [-k t ...

  10. C/C++ 信号量 CreateSemaphore 用法

    HANDLE CreateSemaphore( LPSECURITY_ATTRIBUTES lpSemaphoreAttributes, // SD LONG lInitialCount, // in ...