js---数组习题---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <html xmlns="http://www.w3.org/1999/xhtml"><head>

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>数组练习：各种数组方法的使用</title>

   <style>

   div{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;word-wrap:break-word;}

   </style>

   <script type="text/javascript">

   window.onload = function ()

  {

      var aDiv = document.getElementsByTagName("div");

      var aInput = document.getElementsByTagName("input");

      var i = 0;

      var bS1 = bS2 = true;

      var aTmp = [];

      //删除/添加第一项

      aInput[0].onclick = function ()

      {

          aTmp = getArray(aDiv[0].innerHTML);

          bS1 ?

          //删除第一项， shift()方法

         (aTmp.shift(), this.value = this.value.replace("删除","添加"), bS1 = false) :

        //添加第一项, unshift()方法

          (aTmp.unshift("January(1)"), this.value = this.value.replace("添加","删除"), bS1 = true);

          //输出

          aDiv[0].innerHTML = aTmp.join()

      };

     //删除/添加最后一项

      aInput[1].onclick = function ()

      {

          aTmp = getArray(aDiv[0].innerHTML);

          bS2 ?

          //删除最后一项, pop()方法

          (aTmp.pop(), this.value = this.value.replace("删除","添加"), bS2 = false) :

         //添加最后一项, push()方法

          (aTmp.push("December(12)"), this.value = this.value.replace("添加","删除"), bS2 = true);

          //输出

          aDiv[0].innerHTML = aTmp.join()

      };

     //复制, concat()方法

      aInput[2].onclick = function ()

    {

         aTmp = getArray(aDiv[1].innerHTML);

         //输出

         aDiv[1].innerHTML = aTmp.concat(aTmp).toString().replace(/\s/g,"")

      };

      //还原, 利用数组的 length 特点

      aInput[3].onclick = function ()

      {

          aTmp = getArray(aDiv[1].innerHTML);

          //设置数组长度

          aTmp.length = 10;

         //输出

          aDiv[1].innerHTML = aTmp.join()

      };

      //第三组数据还原

      aInput[4].onclick = function ()

      {

          aTmp = ["red","green","blue","white","yellow","black","brown"];

          //输出

         aDiv[2].innerHTML = aTmp.join()

      };

      //删除前三项

      aInput[5].onclick = function ()

      {

          aTmp = getArray(aDiv[2].innerHTML);

          //删除, 0开始, 删除3个

          aTmp.splice(0, 3);

        //输出

          aDiv[2].innerHTML = aTmp.join()

      };

      //删除第二至三项

      aInput[6].onclick = function ()

      {

         aTmp = getArray(aDiv[2].innerHTML);

         //删除, 2开始, 删除2个

          aTmp.splice(1, 2);

          //输出

          aDiv[2].innerHTML = aTmp.join()

     };

      //在第二顶后插入"orange", "purple"

     aInput[7].onclick = function ()

     {

        aTmp = getArray(aDiv[2].innerHTML);

        //插入, 2开始, 插入"orange", "purple"

         aTmp.splice(1, 0, "orange", "purple");

        //输出

         aDiv[2].innerHTML = aTmp.join()

     };

     //替换第二项和第三项

    aInput[8].onclick = function ()

     {

        aTmp = getArray(aDiv[2].innerHTML);

         //插入, 2开始替换

         aTmp.splice(1, 2, "#009900", "#0000ff");

         //输出

        aDiv[2].innerHTML = aTmp.join()

    };

    //将div中的内容转为数组

     //str    div对象

     function getArray(str)

    {

         aTmp.length = 0;

        str = str.split(",");

         for (var i in str)aTmp.push(str[i]);

         return aTmp

     }

 }

</script>

 </head>

 <body>

 <div>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</div>

 <input value="删除January(1)" type="button">

 <input value="删除December(12)" type="button">

<div>0,1,2,3,4,5,6,7,8,9</div>

 <input value="复制" type="button">

<input value="还原" type="button">

 <div>red,green,blue,white,yellow,black,brown</div>

 <input value="还原" type="button">

 <input value="删除前三项" type="button">

 <input value="删除第二至三项" type="button">

 <input value="在第二项后插入(orange, purple)" type="button">

 <input value="替换第二项和第三项" type="button">

</body></html>

js---数组习题---的更多相关文章

小兔JS教程（四）-- 彻底攻略JS数组
在开始本章之前,先给出上一节的答案,参考答案地址: http://www.xiaotublog.com/demo.html?path=homework/03/index2 1.JS数组的三大特性在J ...
js数组学习整理
原文地址:js数组学习整理常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
转→js数组遍历千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...
js数组操作大全
原文(http://www.cnblogs.com/webhotel/archive/2010/12/21/1912732.html) 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简 ...
js数组去重的4种方法
js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...
js 数组处理函数
本文转载自有有<js 数组处理函数> concat 将参数列表连接到原数组后面形成一个新的数组并返回,原有数组不受影响. var arr = ["a","b& ...
js 数组赋值问题：值传递还是引用？
转载于知乎var a = [1,2,3]; var b = a; a = [4,5,6]; alert(b); //[1,2,3] 面试时被问到这样一个问题,竟然从来没试过... 当时直接的理解,数组 ...
JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
js数组操作
用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多, 自以为js高手的自己居然无从下手,一下狠心,我学! ...
js数组操作【转载】
用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵 ...

随机推荐

JDBC详解2
day18总结今日思维导图: 今日内容事务连接池 ThreadLocal BaseServlet自定义Servlet父类(只要求会用,不要求会写) DBUtils à commons-dbuti ...
HDU 5355 Cake （WA后AC代码，具体解析，构造题）
题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=5355 题面: Cake Time Limit: 2000/1000 MS (Java/Others) ...
linux c编程：线程互斥二线程死锁
死锁就是不同的程序在运行时因为某种原因发生了阻塞,进而导致程序不能正常运行.阻塞程序的原因通常都是由于程序没有正确使用临界资源. 我们举个日常生活中的例子来比喻死锁.我们把马路上行驶的汽车比作运行着的 ...
flex 动画笔记
1.不涉及到组件宽度和高度变化的如果类似showEffect等属性不好使的,直接使用hideEffect.end(); showEffect.play();等这样的用法. 2.涉及到组件宽度和高度变 ...
《程序员代码面试指南》第五章字符串问题去掉字符串中连续出现k 个0 的子串
题目去掉字符串中连续出现k 个0 的子串 java代码 package com.lizhouwei.chapter5; /** * @Description: 去掉字符串中连续出现k 个0 的子串 ...
FHQ_treap
上个月还在舔\(splay\):\(FHQ-treap\)太好打了吧真香前言还是建议先把\(splay\)学好再看,讲得会比较粗略(但该有的不会少),或者左转其他文章 \(FHQ-treap\)是 ...
Spark Structured Streaming框架(1)之基本用法
Spark Struntured Streaming是Spark 2.1.0版本后新增加的流计算引擎,本博将通过几篇博文详细介绍这个框架.这篇是介绍Spark Structured Streamin ...
光流法跟踪fast角点思路
光流法需要include<opencv2/video/tracking.hpp>,用到列表,所以要include<list><vector>1.读取文件定义图像存储 ...
<基于Qt与POSIX线程>多线程下载器的简易搭建
原创博客,转载请联系博主! 本项目已托管到本人Git远程库:https://github.com/yue9944882/Snow 项目目标 Major Functionality 开发环境: Ce ...
php设计模式课程---8、适配器模式是什么
php设计模式课程---8.适配器模式是什么一.总结一句话总结: 充电过程中,手机充电器相对于手机和插座之间就是适配器 1.编程中的适配器是怎么回事? 写一个类(适配器),将传入的数据的格式或者内 ...

js---数组习题---

js---数组习题---的更多相关文章

随机推荐

热门专题