Html+Css+Js将一个字符串数组输出为、分割的形式。

于 2022-02-09 09:15:00 发布
阅读量792 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gly_technology/article/details/122660951
版权

css javascript html

 Html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box" οnclick="panduan()">
            <p>例如 : “张三、李四、王五、赵六、孙七</p>
            <div id="result"></div>
        </div>
    </body>
</html>

Css部分

* {
    margin: 0;
    padding: 0;
}

#box {
    width: 30%;
    height: 300px;
    margin: 100px auto;
    border: solid 1px #ccc;
    padding-top: 100px;
}

#box div {
    margin: 20px auto;
    text-align: center;
}

p {
    text-align: center;
}
 

Js部分

function panduan() {
    var result = document.getElementById('result');
    var arr1=[];
    for(var i=0;i<5;i++){
        arr1[i]=prompt('请输入第'+(i+1)+'个数',"")
    }
    // 方法一
    // var arr2=[];
    // for(var j=0;j<arr1.length;j++){
    //     arr2[j]=arr1[j];
    // }
    // result.innerHTML = arr2[0]+'、'+arr2[1]+'、'+arr2[2]+'、'+arr2[3]+'、'+arr2[4]+'、';
    // 方法二
    var arr3=[];
    for(var k=0;k<arr1.length;k++){
        arr3[k]=arr1[k];
    }
    result.innerHTML = arr3.join('、');
}
 

gly_technology
关注
实现数组反转的两个方法（有注释，本人有错误望纠正）
Zj_220319的博客
03-20 1837
public class ArrayReverse{ public static void main (String[] args){ /* 实现数组内元素的反转！ */ //方法一： 创建临时变量做数组元素中转站 int[] arr = {11,22,33,44,55,66,77,88,99};//定义一个数组 int len = arr.length;//定义简化的数组长度 int ...
js 数组 字符串基础方法
amuist_ting的博客
09-01 1066
数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整 ----创建方式 实例化创建 var arr = new Array(3); 创建长度为3的数组 每一项都为empty arr = new Array(1,2,3,4); [1,2,3,4] 通过字面量创建数组 var arr = [1, 2, 3, 4]; ----属性及获取元素 length 数组的长度 通过下标索引获取数组元素 arr[0]... ----数组遍历 1.采用for循环 for(v..
html split拆分字符串,JavaScript
weixin_42295892的博客
06-10 2870
JavaScript分割字符串教程在开发过程中，很多时候我们有分割在JavaScript split函数详解语法stringObject.split(separator,howmany)参数参数说明separator必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组...
html 分割字符串,详解js常用分割取字符串的方法
weixin_35995565的博客
06-09 1152
1.substrsubstr(start,length)表示从start位置开始，截取length长度的字符串。var src="images/off_1.png";alert(src.substr(7,3));弹出值为：off2.substringsubstring(start,end)表示从start到end之间的字符串，包括start位置的字符但是不包括end位置的字符。var src="i...
HTML中JS对于字符串的切割截取实现
燚轩软件科技
10-23 8738
　　在网站编程制作中，对于字符串的切割截取平时所用可能不是特别多，而且分的比较细，所以自备自查。有备无患。由于之前所有均在一个demo测试，下面就来跟大家分享一下成果。 　　1.函数：split() 　　功能：使用一个指定的分隔符把一个字符串分割存储到数组 　　例子： str=”jpg|bmp|gif|ico|png”; arr=str.split(”|”); 　　//arr是一个包含字符...
切割html字符串,使用javascript如何分割字符串？
weixin_39616222的博客
06-18 634
在javascript中可以使用split()方法来分割字符串。split()方法用于把一个字符串分割成字符串数组，该方法是使用参数中提供的指定分隔符将其分隔为子字符串。语法：stringObject.split(separator,howmany)参数：●　separator：字符串或正则表达式，从该参数指定的地方分割 stringObject。必需参数。●　howmany：该参数可指定返回的数...
基于HTML5+CSS3+JavaScript原生实现的字符串数学运算.zip
最新发布
02-14
"基于HTML5+CSS3+JavaScript原生实现的字符串数学运算.zip"这个压缩包文件，显然是一个教学或示例项目，它展示了如何使用这三种技术进行字符串的数学运算。以下是对这些关键技术及其在字符串数学运算中的应用的详细...
Html+Css+Javascript从入门到精通.pdf
09-27
- **常用对象**：如字符串对象、数组对象、日期对象等。 **第二十章：系统函数与内部对象** - **内置函数**：介绍JavaScript提供的常用函数。 - **内部对象**：了解预定义的对象类型。 **第二十一章：使用框架和...
一个JavaScript用逗号分割字符串实例
10-25
此方法可以将一个字符串分割成子字符串数组，并且可以指定一个可选的限制参数来限制数组元素的数量。例如，split(",")将按照每个逗号来分割字符串。 在标签中，“分割字符串”被单独列出来，强调了文章的中心主题。...
split()分割字符串数组
qq_46582421的博客
11-17 387
用于把一个字符串分割成字符串数组。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>split()分割字符串数组</title> <script type="text/javascript"> var str = "Are you going to Scarborough Fair?"; document.write(str.s
翻转数组中的每个元素
hhhhs2的博客
03-14 202
reverse 实现字符串翻转 var num = [1,2,3,4,5]; num.reverse() console.log(num)
利用两个方法实现数组的遍历和翻转数组
qq_45326705的博客
10-18 201
package com.haoran.method; public class reverseDemo { //先写一个 可以输出数组元素的方法，并使用 //然后写一个可以倒置元组元素的方法 public static void main(String[] args) { int[] num= {1,2,3,4,5}; // for (int i : num) {//num.for快捷键 无下标输出； // System.o.
利用函数翻转数组
...
08-28 583
利用函数翻转数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
html截取字段,截取字符串（除去HTML标记）
weixin_39665507的博客
06-04 1151
函数一：ASP截取字符串函数功能：利用VBScript截取指定长度的字符串，超过长度的地方用“……”代替。function sysSubStr($string,$length,$append = false){if(strlen($string) <= $length ){return $string...假设有变量string=http://zhangxz.blog.51cto.com/5...
html中的js数组倒序输出字符串,数组js 逆序的几种方法
weixin_39559486的博客
06-18 695
1.通过split和数组的逆序输出var num = 123;//输出应该是 3 2 1num = num +”; //方便split函数var arr = num.split(”);for(var i=arr.length-1;i>=0;i–){console.log(arr[i]); //通过数组i的倒序调用，实现结果的倒序输出。}2.通过split和reversefunction ba...
html有序列表的逆序,HTML/CSS实现逆序列表（列表编号倒序）
weixin_33483080的博客
06-03 1520
我正在做一个项目，其中有一个倒序的列表。列表创建时间降序排序的，这里我想在语义和视觉上都能体现出来(让列表显示对应的编号，编号越大表示是最新的)。网上做了一些研究，找到了一些有趣的解决办法，有些很好，有些就不那么好了。最终结果类似如下:CBA接着，我们来看看有哪些实现的方式。HTML中的reversed 属性简单，最直接的解决方案是HTML中的reversed属性。CBAreversed 属性是一...
数组的一些排序和翻转
weixin_52296931的博客
02-22 956
数组的反转 数组的反转定义:数组中元素顺序的颠倒—>12345---->54321 思路:本质是考察交换两个变量的值 过程: 定义变量接收最小的索引值 让最大索引和最小索引元素互相交换 让最大的索引–,最小的索引++ 当最小的索引超过最大的索引反转结束 程序 int[] arr={1,2,3,4,5}; //遍历数组 for //for(1;2;4){3} for(int min=0,max=arr.length-1;min<max;min++,max--????{ int temp
数组中的元素颠倒顺序，例如原始数组为1,2,3,4,5，反转后的数组为5,4,3,2,1
雁迟的博客
11-09 4099
数组中的元素颠倒顺序，例如原始数组为1,2,3,4,5，反转后的数组为5,4,3,2,1 解法一： public class Main { public static void main(String[] args) { int[] arr = {1, 2, 3, 4, 5}; for (int i = 0; i < arr.length/2; i++) { // 交换数组中第一个元素和倒数第一个元素，第二个元素和倒数第二个元素....
html列表逆序输出,JS实现倒序输出的几种常用方法示例
weixin_42498643的博客
06-16 1168
主要介绍了JS实现倒序输出的几种常用方法,结合实例形式分析了JavaScript字符串与数组的转换、变量、分割、反转等相关操作技巧,需要的朋友可以参考下本文实例讲述了JS实现倒序输出的几种常用方法。分享给大家供大家参考，具体如下：1.通过split和数组的逆序输出varnum=123;//输出应该是321num=num+"";//方便split函数vararr=num.s...
数组与字符串分割实现计算器加减功能，用button输入，使用js,html,css
06-11
好的，这个问题我可以回答。首先，我们可以通过HTML和CSS创建一个简单的界面，如下所示： ```html <!DOCTYPE html> ...注意，我们使用 `parseFloat` 将字符串转换为数字，这是为了能够进行正确的计算。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值