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

按钮点击，字符串拼接，最后效果字符串，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. java char <-> int

    int = char - '0' or Character.getNumericValue(char ch) char = (char)int

  2. MVVM test

    示例代码 public class RegisterUserViewModel { public UserInfo userInfo { get; set; } public ICommand Cli ...

  3. [JZOJ5355] 【NOIP2017提高A组模拟9.9】保命

    题目 描述 题目已经足够清晰了,所以不再赘述题目大意. 思考历程 一眼看下去,好像是一道大水题! 然而,再看几眼,感觉又不是一道水题! 然后想了半天,感觉它特别难转移! 最终打了一个暴力,然后发现样例 ...

  4. 网络工程师课程---3、IP与路由器（ip地址的主要作用是什么）

    网络工程师课程---3.IP与路由器(ip地址的主要作用是什么) 一.总结 一句话总结: 用来标识一个节点的网络地址 划分网段 1.如何得到ip地址的网段号? ip和子网掩码  化成二进制后取 与运算 ...

  5. MySQL安全查询模式的问题

    在学习mysql中的简单sql语句的执行.在用到update语句的时候,总提示如下错误: 15:08:00    update students t set t.tel="156626488 ...

  6. Docker系列(十)：Kubernetes集群入门

    kubenetes安装 官网:https://github.com/kubernetes/kubernetes/blob/release-1.0/docs/getting-started- guide ...

  7. mysql 乐观判断 校验

    说下场景, 用户账户 有 100 元钱,  他执行了两个操作,  A操作发红包发了80块钱, B操作 发红包 发了 70 ,并发, 假如没有 冻结这一说法,  两个操作都是去 查询余额, 还有100 ...

  8. Java室内最短路径搜索(支持多楼层)

    修改了上次的代码,现在支持室内的多楼层情况下的最短路径搜索,还是使用A*算法,把在GraphAdjList中VNode没有利用起来的data字段作为我们存储楼层属性的位置. 实际上是我偷懒了,正常情况 ...

  9. java基础之System类

    System类概述System 类包含一些有用的类字段和方法.它不能被实例化. 成员方法 public static void gc()运行垃圾回收器 public static void exit( ...

  10. Python学习day44-数据库(单表及多表查询)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...