javascript - 在某些 slider 值处更新文本-6ren

javascript - 在某些 slider 值处更新文本

转载作者：行者123 更新时间：2023-12-01 16:25:03

到目前为止，我有以下代码。

var random = Math.floor(Math.random() * texts.length);
var currentText = random;
document.getElementById('text').innerHTML = texts[random];

因此，每次更新 HTML 页面时，都会从数组中选择一个随机文本。我在代码中也有一个 slider 。

<input type="range" min="0" max="1" step="0.001" value="0" class="slider" id="wordSlider">

最后，我有另一个文本数组，每个文本都是前一个数组文本在各自索引处的延续。我想要做的是将文本从初始数组更新为特定范围值的新数组，例如 0.5。我怎样才能做到这一点？我尝试使用条件语句，但代码似乎只在运行时检查一次变量值。

编辑:我正在努力完成的一个例子:

<script>
    (function getText() {
        var texts = ["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"];
                        
        var texts2 = ["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"];
                    
        var random = Math.floor(Math.random() * texts.length);
        var currentText = random;
                        
        document.getElementById('text').innerHTML = texts[currentText];                                                                         
    })();           
</script>

页面可能会随机选择 texts 数组中的第一个文本。一旦 slider 达到 0.5，文本将变为“故事 1 部分 2”，第二个数组中具有相同索引的文本。

编辑 2:如果有人想知道，这是我的最终解决方案(归功于@SomoKRoceS)

脚本标签:

<script>
    const texts = [
            ["Text 1 Part 1", "Text 1 Part 2", "Text 1 Part 3"],
            ["Text 2 Part 1", "Text 2 Part 2", "Text 2 Part 3"],
            ["Text 3 Part 1", "Text 3 Part 2", "Text 3 Part 3"]
    ];

    const random = Math.floor(Math.random() * texts.length);
    const currentText = random;
                    
    <!-- The text currently displayed -->
    var displayed = document.getElementById("text"); 

    function getText(part) {
            displayed.innerHTML = texts[currentText][part];
    }

    <!-- Get the first (index 0) of a random set of texts -->
    getText(0);
                        
    </script>

在 slider 所在的 div 中，我添加了:

<script>
    slider.addEventListener("input", (e) => {
        if(e.target.value > 0.25 && e.target.value < 0.5) {
            getText(1);
        } else if (e.target.value >= 0.5) {
            getText(2);
        } else {
            getText(0);
        }                   
    });
</script>

最佳答案

需要监听 slider 的变化事件，像这样:

var slideElem = document.getElementById("wordSlider");

slideElem.addEventListener("change", event => {
  if (slideElem.value < 0.5) {
    getText(0);
  } else {
    getText(1);
  }
});

当getText为函数时:

function getText(part) {
  var texts = [
    ["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"],
    ["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"],
    ["Text 1 Part 3", "Text 2 Part 3", "Text 3 Part 3"]
  ];

  var random = Math.floor(Math.random() * texts.length);
  var currentText = random;

  document.getElementById("text").innerHTML = texts[part][currentText];
}

(我还把texts变成了一个lists of lists用于泛化)。

完整片段:

function getText(part) {
  var texts = [
    ["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"],
    ["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"],
    ["Text 1 Part 3", "Text 2 Part 3", "Text 3 Part 3"]
  ];

  var random = Math.floor(Math.random() * texts.length);
  var currentText = random;

  document.getElementById("text").innerHTML = texts[part][currentText];
}

getText(0);

var slideElem = document.getElementById("wordSlider");

slideElem.addEventListener("change", event => {
  if (slideElem.value < 0.5) {
    getText(0);
  } else {
    getText(1);
  }
});

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <span id="text"></span>
    <br />
    <input
      type="range"
      min="0"
      max="1"
      step="0.001"
      value="0"
      class="slider"
      id="wordSlider"
    />
    <script src="src/index.js"></script>
  </body>
</html>

请注意，如果您想坚持使用相同的文本，每个部分都会应用随机更改(因此随机只会执行一次，您应该在脚本加载时将其用作常量。像这样:

完整片段:

const texts = [
  ["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"],
  ["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"],
  ["Text 1 Part 3", "Text 2 Part 3", "Text 3 Part 3"]
];

const random = Math.floor(Math.random() * texts.length);
const currentText = random;

function getText(part) {
  document.getElementById("text").innerHTML = texts[part][currentText];
}

getText(0);

var slideElem = document.getElementById("wordSlider");

slideElem.addEventListener("change", event => {
  if (slideElem.value < 0.5) {
    getText(0);
  } else {
    getText(1);
  }
});

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <span id="text"></span>
    <br />
    <input
      type="range"
      min="0"
      max="1"
      step="0.001"
      value="0"
      class="slider"
      id="wordSlider"
    />
    <script src="src/index.js"></script>
  </body>
</html>

现在 slider 有两个部分..如果你想概括它取决于部分的大小，你应该得到 texts 的长度并将 slider 的阈值分成 texts.length 部分。像这样:

    slideElem.addEventListener("change", event => {
      let splitThreshold = 1/texts.length;
      let wantedPart = Math.floor(slideElem.value/splitThreshold);
      if(wantedPart>=texts.length)
        wantedPart=texts.length-1;
      getText(wantedPart);
    });

完整片段:

const texts = [
  ["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"],
  ["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"],
  ["Text 1 Part 3", "Text 2 Part 3", "Text 3 Part 3"]
];

const random = Math.floor(Math.random() * texts.length);
const currentText = random;

function getText(part) {
  document.getElementById("text").innerHTML = texts[part][currentText];
}

getText(0);

var slideElem = document.getElementById("wordSlider");

    slideElem.addEventListener("change", event => {
      let splitThreshold = 1/texts.length;
      let wantedPart = Math.floor(slideElem.value/splitThreshold);
      if(wantedPart>=texts.length)
        wantedPart=texts.length-1;
      getText(wantedPart);
    });

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <span id="text"></span>
    <br />
    <input
      type="range"
      min="0"
      max="1"
      step="0.001"
      value="0"
      class="slider"
      id="wordSlider"
    />
    <script src="src/index.js"></script>
  </body>
</html>

关于javascript - 在某些 slider 值处更新文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63093848/

文章推荐： R - 导入文本文件，其中包含主数据表上方标题行中的信息

文章推荐：函数外的javascript变量(使用异步/等待)？

java - 如果我将一个对象放入数组中的索引 0 处，如何将那里的对象放入索引 1 处？
这个问题已经有答案了: What is the difference between a variable, object, and reference? [duplicate] (5 个回答) 已关
Java套接字程序卡在sc.nextInt()处；
我正在使用以下代码来学习java套接字编程。它的作用是，client.java 程序从用户那里获取一个号码并将其发送到 sever.java。然后服务器将其乘以2并发回给客户端。在我的客户端程序中，它
delphi - 非重叠串行端口卡在 CloseHandle 处
我编写了一个自己开发的串行端口类，为了简单起见，我使用了阻塞/同步/非重叠。我浏览了所有 MSDN 文档，这对我来说很困难。我在从端口打开、传输或接收字节方面没有任何问题。所有操作都是同步并且没有线
javascript - 为什么我的倒计时没有停在 0 处？
//Not finished -- disregard function evaluate() { var cdate = new Date(); var cday = cdate.getDa
python - 我希望程序停止在十进制 "."处；如何让Python抓取字母直到字符串中的某个字符？
我已经尝试过了，但它有效例如: x= 523.897 y= x[0:"."] print y 我只想打印 523。如何让 Python 抓取字符串直到某个字母或数字？最佳答案行 y = x[0:
javascript - 我怎样才能把盒子移到拐 Angular 处
我想移动拐 Angular 处的方框(从左上角开始水平移动 Angular 落到右上角然后你去到右下角。 function myMove() { var elem = document.getEl
javascript - 如何让侧边栏停在某个 div 处？
如何让侧边栏停止在第二个侧边栏部分而不是顶部？ fiddle http://jsfiddle.net/EvAdP/2/ HTML I'm the header
java - 基本程序卡在 nextInt() 处
我刚刚在大学开始我的第二门编程类(class)，我们的第一个作业相当简单，旨在基本上检查我们的环境并检查我们是否知道如何通过类(class)网站提交作业。当我运行我们提供的代码时，它卡在应该提示用户
html - 邮箱显示在 "random"处
我目前正忙于我的这个信息学元素(构建一个示例交友网站)。问题是我在把所有东西都放在正确的地方时遇到了一些麻烦。一切都很顺利，直到我的邮箱出现在错误的位置(但是，Dreamweaver 会按照我的意
CSS:将目标区域悬停在元素高度的 50% 处
我想，和你一样hover a GIF shot on Dribbble , 当光标位于元素高度顶部之后/50% 处时显示带有信息的 div。测试示例我做了这个，这是有效的，但有点棘手......特
javascript - Dropit 下拉列表不会隐藏在 mouseleave 处
我有一个下拉菜单，并且我已将 mouseenter 设置为选项。因此，如果鼠标位于触发器之外，菜单应该关闭。我正在使用 jQuery 1.8.0。这可能是 CSS 问题吗？这是我初始化插件的代码。
VBA 脚本卡在 Workbook.Close 处
我正在尝试在 Visual Basic for Applications 中编写一个 hello world 应用程序，即修改 Excel 工作表中的单元格。这是: Sub hello() D
multithreading - 线程卡在 UIComponent.popComponentFromEL 处
我的应用程序使用 JSF 2.1 和 PrimeFaces。最近，由于一些线程卡住，观察到 CPU 利用率非常高。所有卡住线程的卡住线程转储都指向 javax.faces.component.UICo
javascript - Node JS 应用程序卡在resolve() 处
在列出 aws cognito 用户时，我的 Node js 应用程序遇到问题。仅当我有超过 60 个 Cognito 用户时才会出现此问题。 Reference of API 下面是我的代码片段。
php - 卡在 os.rename() 处
我是 ubuntu 用户..我在 php 中有一个执行 python 文件的命令..python 文件设置为可执行文件..所以，我的 php 命令是:- shell_exec("try.py");
C 程序卡住在 fprintf 处(大量数据)
我正在尝试将剪贴板内容写入文件，但由于某种原因程序卡住了。 FILE *fp; fp = fopen("tmp.code","w"); fprintf(fp,getclip()); /*writes*
javascript - 当用户向下滚动时，如何使侧边栏停在特定的 div 处？
当用户向下滚动时，我使用此代码使侧边栏固定在某个 div 处。问题是我必须手动输入一个阈值数字，这并不总是理想的，因为该部分的位置可能会更改或在各种浏览器和系统之间不一致。我想知道是否有一种方法可以在
java - 移动字符串数组中的元素，直到所选字母位于索引 0 处
我有一个字符串数组，例如 first_page = {{"U","M","Y","Q","I","A","L","D","P"、"F"、"E"、"G"、"T"、"Z"、"V"、"W"、"H"、"O"、
javascript - 将元素放置在特定的 px 处，但让文本围绕它流动
我能否在页面上的特定 px 位置放置一个元素(例如图像)，然后让文本围绕它流动？必要时使用 JS/jquery。我确实看到了这个Have text flow around an object th
Javascript onclick 位于浏览器选项卡中的 "Connecting..."处
第一次在这里提问。我有两个简单的 Javascript 函数，1. 生成一个随机字母，2. 在每个单元格中使用单个字母填充 10x10 表格。创建表的主要函数是通过带有 onclick 的简单 HT

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在某些 slider 值处更新文本