数组应用及实例应用

最新推荐文章于 2023-06-08 08:34:06 发布
最新推荐文章于 2023-06-08 08:34:06 发布
阅读量843 收藏
点赞数
分类专栏： js学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48235555/article/details/106696875
版权
数组应用及实例应用
数组

1、数组定义：

var arr = [ ‘这是一句话’, ‘这是第二句话’, ‘这是第三句话’ ] ;

2、获取数组长度：

arr.length

3、获取数组里某个位置的元素：

arr[2] //数组里第三个元素

4、往数组最后位置里添加数据：

arr.push ( ’ 我是最后一位 ‘ ) ;

设置不透明度

filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
**Opacity：**透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。
Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY：代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。

例子：a:hover { opacity: 1; filter: alpha(opacity=100); }

两种写法，opacity的取值范围不同，通过filter，一些浏览器为了提升性能会提供硬件加速。

图片切换及函数合并

效果图：
在这里插入图片描述
第一步：先构建好框架和样式

框架：

<div id="content">
        <a id="prev" href="javascript:"></a>
        <a id="next" href="javascript:"></a>
        <p id="text">图片文字加载中...</p>
        <span id="span1">数量正在计算中...</span>
        <img id="img1" src="">
    </div>

要想将span和p元素分别在div中顶部和底部显示，需要

top: 0; 
bottom: 0
//值可以是负数

设置文字颜色：

color: #fff;

样式：

<style>
        #content{ width:400px; height:400px;border:solid 10px #f46d72;
            margin: 40px auto 0; position:relative;
            background: #e8198b;}
        #content a{
            width:40px;height: 40px;
            background: #0eb4dd;
            border: solid 5px #000000;
            position: absolute;
            top:175px;
            text-align: center;
            text-decoration: line-height;
            color:#b224ef;
            font-size: 30px;
            font-weight: bold;
            filter:alpha(opacity:40);
            opacity:0.4;
        }
        #content a:hover{
            filter:alpha(opacity:90);
            opacity:0.9;
        }
        #prev{ left:10px;}
        #next{ right:10px;}
        #text,#span1{
            position: absolute;
            left:0;
            width:400px;
            height:30px;
            line-height:30px;
            text-align: center;
            background: #000;
            color:#fff;
            filter:alpha(opacity:60);
            opacity:0.6;
        }
        #text{
            bottom:0; /*放在底部*/
            margin: 0;
        }
        #span1{
            top: 0;  /*放在顶部*/
        }
        #img1{ width:400px; height:400px;}
    </style>

第二步：

运用函数：

显示当前图片在数组中的位置

function fnTab() {
	oSpan.innerHTML = num + 1 + '/' + arrText.length;
	oImg.src = arrUrl[num];
	oText.innerHTML = arrText[num];
}
fnTab();  //在之后每一次用到时，都要写一遍

<script>
        window.onload = function () {
            var oPrev = document.getElementById('prev');
            var oNext = document.getElementById('next');
            var oText = document.getElementById('text');
            var oSpan = document.getElementById('span1');
            var oImg = document.getElementById('img1');

            var arrUrl = ['1.jpg','2.jpg','3.jpg','4.jpg'];
            var arrText = ['这是第一张', '这是第二张','这是第三张','这是第四张'];

            var num = 0;


            //初始化
            function fnTab() {
                oSpan.innerHTML = num + 1 + '/' + arrText.length;
                oImg.src = arrUrl[num];
                oText.innerHTML = arrText[num];
            }
            fnTab();

            oPrev.onclick = function (){
                num--;
                if( num === -1){
                        num = arrUrl.length-1;
                }
                fnTab();
            };

            oNext.onclick = function (){
                num++;
                if( num === arrText.length){
                        num = 0;
                }
                fnTab();
            };

        }
    </script>
运用知识点，制作图片切换扩展

实现“循环变换”和顺序变换“两种不同的图片切换

要使两个按钮放在网页中间的位置，只需要

body{
    text-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            text-align:center;
        }
        #content{ width:400px; height:400px;border:solid 10px #f46d72;
            margin: 40px auto 0; position:relative;
            background: #e8198b;}
        #content a{
            width:40px;height: 40px;
            background: #0eb4dd;
            border: solid 5px #000000;
            position: absolute;
            top:175px;
            text-align: center;
            text-decoration: line-height;
            color:#b224ef;
            font-size: 30px;
            font-weight: bold;
            filter:alpha(opacity:40);
            opacity:0.4;
        }
        #content a:hover{
            filter:alpha(opacity:90);
            opacity:0.9;
        }
        #span2{
            position: absolute;
            width: 400px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            top: -45px;
        }
        #prev{ left:10px;}
        #next{ right:10px;}
        #text,#span1{
            position: absolute;
            left:0;
            width:400px;
            height:30px;
            line-height:30px;
            text-align: center;
            background: #000;
            color:#fff;
            filter:alpha(opacity:60);
            opacity:0.6;
        }
        #text{
            bottom:0; /*放在底部*/
            margin: 0;
        }
        #span1{
            top: 0;  /*放在顶部*/
        }
        #img1{ width:400px; height:400px;}
    </style>
    <script>
        window.onload = function () {
            var oPrev = document.getElementById('prev');
            var oNext = document.getElementById('next');
            var oText = document.getElementById('text');
            var oSpan = document.getElementById('span1');
            var oImg = document.getElementById('img1');
            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');

            var arrUrl = ['1.jpg','2.jpg','3.jpg','4.jpg'];
            var arrText = ['这是第一张', '这是第二张','这是第三张','这是第四张'];

            var num = 0;
            var onOff = true;

            oBtn1.onclick = function () {  //循环
                onOff = true;
                document.getElementById('span2').innerHTML = '图片可从最后一张跳转到第一张循环切换';
            };

            oBtn2.onclick = function () {  //顺序
                onOff = false;
                document.getElementById('span2').innerHTML = '图片只能到最后一张或只能到第一张切换';
            };

            //初始化
            function fnTab() {
                oSpan.innerHTML = num + 1 + '/' + arrText.length;
                oImg.src = arrUrl[num];
                oText.innerHTML = arrText[num];
            }
            fnTab();

            oPrev.onclick = function (){
                num--;
                if( num === -1){
                    if( onOff ){
                        num = arrUrl.length-1;
                    }
                    else{
                        alert('这是最前面的一张图片了哦！');
                        num = 0;
                    }
                }
                fnTab();
            };

            oNext.onclick = function (){
                num++;
                if( num === arrText.length){
                    if( onOff ){
                        num = 0;
                    }
                    else{
                        alert('这是最后的一张图片了哦！');
                        num = arrUrl.length - 1;
                    }
                }
                fnTab();
            };

        }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="循环">
    <input id="btn2" type="button" value="顺序">

    <div id="content">
        <span id="span2">图片可从最后一张跳转到第一张循环切换</span>
        <a id="prev" href="javascript:"></a>
        <a id="next" href="javascript:"></a>

        <p id="text">图片文字加载中...</p>
        <span id="span1">数量正在计算中...</span>
        <img id="img1" src="">
    </div>
</body>
</html>

alue=“顺序”>

<div id="content">
    <span id="span2">图片可从最后一张跳转到第一张循环切换</span>
    <a id="prev" href="javascript:"></a>
    <a id="next" href="javascript:"></a>

    <p id="text">图片文字加载中...</p>
    <span id="span1">数量正在计算中...</span>
    <img id="img1" src="">
</div>
```
kaka_hikun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数组应用举例-总结
JiaoXin327的博客
07-21 3080
几个例子关于一维数组、二维数组及字符数组在程序中如何灵活运用 例1，小组选择组长，共有三个候选人，输入参加选举的人数及每个人选举的内容，输出3个候选人最终的得票数及无效选票数 实战开始啦 结果 这是一道典型的一维数组应用。这里强调一点，C语言规定只能逐个引用数组元素而不能依次引用整个数组，这点体现在本程序中对数组元素进行判断时，只能通过for语句对数组元素一个一个的引用 实战开始啦2 用冒泡法...
六、《数组》的作用以及使用场景
yqx1714768514的博客
01-20 5298
前言 在之前我们可以通过一个变量表示一个学生的年龄，如果现在需要表示全班 100 个人的年龄岂不是需 要定义 100 个变量来分别表示。这样的操作变量的命名容易冲突，并且也会导致代码量大，可读性差等问题。那么怎么解决这种问题呢？Java 就提供了数组解决这种问题。 1、数组概念 概念：计算机在内存区域分配的一段连续的区域，用来存储同种类型的数据。 简单的理解，数组就是一堆盒子，同一时间，可以保存多个相同数据类型的数据。 数组名 ：数组的名字。 数组元素：就是存放在数组里面的...
C语言数组应用举例
最新发布
weixin_40704392的博客
06-08 1354
【示例1】求一个整型数组中的最大值和最小值。i<=9;i++)从控制台获取用户输入并赋值给数组元素max=a[0];min=a[0];假设a[0]是最大值也是最小值for(i=1;i<=9;或者return 0;*/运行结果：这段代码有两点需要说明：从控制台获取数组元素时，我们一次性输入10个整数才按下回车键，而不是每输入一个整数就按一次回车键，这正是利用了标准输入缓冲区。
数组的常见案例和应用
xinpz的博客
02-05 3502
案例一、数组取出最大值 /*定义一个获取最大值的功能: 1、确定结果 ：返回值类型 int 2、未知内容：要获取哪个数组的最大值没有确定，则是数组没有确定 思路： 1、定义一个变量，记录住数组的比较大的元素。 2、遍历整个数组，让数组的每一个元素都和该变量进行对比即可。 3、当变量遇到比它大的元素，则让该变量记录该元素的值，当循环结束时，最大值产生了 */ pu
数组的应用实例1：三子棋
weixin_43523785的博客
01-12 2196
三子棋编写过程
数组的特性、基本操作和应用场景
笔记本
07-19 2880
数组 数组（Array）是一种线性表数据结构。它用一组连续的内存，来存储一组具有相同类型的数据。 线性表 连续内存空间 相同类型 线性表 形象地来看，线性表就是数据排成像一条线一样的结构，并且最多只有前和后两个方向。数组、链表队列、栈等都是线性表结构。 与其对立的概念是非线性表，如二叉树、堆、图等。在非线性表中，数据之间并不是简单的前后关系。 连续的内存空间和相同类型的数据 因为这两个限制，...
cpp.rar_数组应用
09-22
"cpp.rar_数组应用"这个压缩包文件显然包含了一个关于C++中数组应用的实例，让我们来深入探讨一下这个主题。 数组是C++中存储一组相同类型元素的集合，它们在内存中连续存储。数组的定义格式一般为`类型 名称[大小]...
Sparsearray稀疏数组原理及实例详解
08-19
Sparsearray稀疏数组原理及实例详解 Sparsearray稀疏数组是一种特殊的数组结构，它可以用来存储大部分元素为固定值的数组。稀疏数组的主要思想是只记录非默认值的元素及其坐标，从而减小存储空间。 稀疏数组的引入...
C#二维数组基本用法实例
01-20
在本实例中，我们将探讨二维数组的基本用法，并通过实例了解如何声明、初始化以及操作这种数据结构。 首先，二维数组可以看作是由行和列组成的表格。在C#中，我们可以使用以下语法来定义一个二维数组： ```csharp ...
Shell 数组与关联数组详解及实例代码
09-15
在Shell脚本编程中，数组是一种...在实际应用中，数组和关联数组经常用于批量处理文件、收集命令输出结果、跟踪程序状态、存储配置信息等多种场景。熟练掌握这两种数组的使用，能够使你的Shell脚本编写更加高效和灵活。
C语言实际运用100个小例子
10-26
实现telnet攻击，socket套接字编程，dos下演示自由落体运动算法，删除系统临时文件，快速中断CPU 查看内存运行情况，更新注册表，关闭U盘接口 提供源代码跟编译通过的EXE文件 双击运行
C语言编程典例在实际生活中的应用
11-02
这里介绍了一些C语言编程在实际生活中的应用如图书馆系统、五子棋原码
数组、一维数组、二维数组、多维数组及其应用示例
04-16
介绍了数组、一维数组、二维数组、多维数组及其应用示例
C++综合应用实例.ppt
11-13
C++综合应用实例 本资源摘要信息涵盖了C++语言在实践中的应用实例，涵盖了数据代数运算系统、学生成绩管理系统和三角形面积验证程序等三个方面。 一、数据代数运算系统的设计 数据代数运算系统是指设计一个计算器...
使用数组的应用举例
xiao_chainiao的博客
07-13 378
需求：需要将一个浮点数转换成人民币读法字符串。 public class Num2RMB { //定义一个输入的double数据 public double input; //定义中文数字数组 String[] chinese = {"零","壹","贰","叁","肆","伍","陆","柒","捌","玖"}; //定义单位数组（单位按照位数从小到大来排序）
数组的使用举例
特战程序员
11-12 142
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> let a =["李导演"]; a[3]="谢导演"; console.log(a.length);//4,中间没有定义的[1][2]会自动补全，赋值为null //2.只
●数组及应用举例
weixin_30776545的博客
08-22 71
数组 数组用来分组基本类型或相同类型的对象。数组中的实体叫做数组的元素或成员。 我们可以用Length来得到其中的元素的数目。（应用同字符串） 内存、连续、同一类数据的一块区域 分类： 一维数组 int [ ]a = new int [5]； //...
数组中的一些常见应用
kevinlee的博客
04-21 610
在数组中，最常见的三种排序：冒泡排序，选择排序，插入排序。 一。冒泡排序：相邻的两个元素进行比较，没比较完一轮，最值会冒到最后。 二。选择排序：拿出数组中的每一个元素与其他元素进行比较，每比较完一轮则选出一个最值。 三。插入排序：将数组中的第一个元素看成是排好序的序列，然后拿后面的每一个元素与已经排好序的元素 依次进行比较，发现比某个元素要小时，就将
Java数组-查表法在生活中的应用举例
沐埜专栏
10-08 2108
 /* 查表法的特点：对应关系 查表法在生活中的应用 星期 */ //查表法的应用 class  ChaBiaoApply {  public static void main(String[] args)  {   System.out.println("Hello World!");   String week = getWeek(4);   System.ou

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值