使用 JavaScript 定位字符串中的一个字母

2023-12-29

假设我有这个字符串: “你好”在一个<span>标签,我想为每个字母执行一个代码(例如:隐藏、更改不透明度等)。我怎样才能用 JS/Jquery 做到这一点,而不必这样做:

<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span>

这里有几个例子,为每个字符随机应用颜色和大小,而不用将每个字母包装在span tag.

forEach循环方法:JSFiddle http://jsfiddle.net/BloodyKnuckles/2prwh01f/

var span = document.querySelector('span')
var str = span.innerHTML
span.innerHTML = ''
str.split('').forEach(function (elem) {
    var newSpan = document.createElement('span')
    newSpan.style.color = "#"+((1<<24)*Math.random()|0).toString(16)
    newSpan.style.fontSize = (Math.random() * (36 - 10) + 10) + 'px'
    newSpan.innerHTML = elem
    span.appendChild(newSpan)
})
<span>hello</span>

setTimeout方法:JSFiddle http://jsfiddle.net/BloodyKnuckles/j38k5yhx/

var span = document.querySelector('span')
var str_arr = span.innerHTML.split('')
span.innerHTML = ''
var ii = 0
~function crazy(ii, str_arr, target) {
    if ( ii < str_arr.length ) {
        var newSpan = document.createElement('span')
        newSpan.style.color = "#"+((1<<24)*Math.random()|0).toString(16)
        newSpan.style.fontSize = (Math.random() * (72 - 36) + 36) + 'px'
        newSpan.innerHTML = str_arr[ii]
        target.appendChild(newSpan)
        setTimeout(function () {
            crazy(ii += 1, str_arr, target)
        }, 1000)
    }
}(ii, str_arr, span)
<span>hello</span>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 JavaScript 定位字符串中的一个字母 的相关文章

  • 如何将滚动条更改为自定义设计? (避免使用默认浏览器外观)

    在新的 Gmail 中 您可以看到有一个滚动条 但它看起来与浏览器滚动条不同 怎样制作呢 你看到的是WebKit 特定的重新设计 http css tricks com custom scrollbars in webkit 浏览器的滚动条
  • Javascript - 将类型化数组保存为 blob 并以二进制数据读回

    我有一个充满二进制数据的类型化数组 它是从 ArrayBuffer 生成的 var myArr new Uint8Array myBuffer 我将其呈现给用户 var blob new Blob myArr type octet stre
  • 使用 Leaflet 加载页面时 moveend 事件多次触发

    我需要在地图平移或缩放时执行一些操作 因此我向该事件附加了一个回调moveend map on moveend function code stuff 它工作正常 但是当页面加载时 该事件被触发三次 我不知道为什么 可能是因为在创建过程中地
  • 修复了 Google 地图混搭中的图例

    我有一个带有 Google 地图混搭的页面 其中的图钉按日期 周一 周二等 进行颜色编码 包含地图的 IFrame 是动态调整大小的 因此当浏览器窗口调整大小时 它也会调整大小 我想在地图窗口的一角放置一个图例 告诉用户每种颜色的含义 Go
  • 在 HTML5 画布上绘制一个点 [重复]

    这个问题在这里已经有答案了 使用以下命令在 HTML5 画布上绘制一条线非常简单context moveTo and context lineTo 功能 我不太确定是否可以绘制一个点 即为单个像素着色 lineTo 函数不会绘制单个像素线
  • Promise 和 setTimeout

    我正在尝试确定一种方法来 暂停 我的 Promises 代码 直到条件成立为止 也许可以使用递归setTimeout 对于我的简单示例 我手动设置waitValue 我需要等一下 如果waitValue仍然是错误的 那就只能继续等待了 当然
  • 从 Angular 4 中的 html 中删除主机组件标签

    我有一个表 我想在其中显示一个表行 它是一个组件 我还想将数据传递给该组件 table th td col 1 td td col 2 td td col 3 td th tr tr table
  • jquery ajax错误回调

    我在这里需要一些建议或者一些解释 我有一个 jquery ajax 调用 ajax type GET url base url ajax fetch counts dataType json data error function xhr
  • QUnit 不会运行测试

    我刚刚开始使用 QUnit 并遇到问题 我目前正在使用 TypeScript 它是一个 JavaScript 编译器 我在与我的主要课程结构平行的课程中进行测试 在每个类中 我都有一个名为 runTests 的函数 为了执行这些测试 我循环
  • Kendo Grid:取消编辑删除新行

    这里有一个demo http plnkr co edit X4ei0zPYiZ1H8AiCTy8B p preview对于我正在经历的行为 如果您编辑 id 为 1 的现有行 将文本更改为其他内容 然后按取消按钮 该行将正确恢复到之前的状态
  • 如何在 Typescript 中使用默认值定义可选构造函数参数

    是否可以有带有默认值的可选构造函数参数 如下所示 export class Test constructor private foo string foo private bar string bar 这给了我以下错误 参数不能有问号和初始
  • Jquery 验证,在submitHandler() 中单击获取按钮

    我有两个按钮type Submit 验证后 在submitHandler我想知道点击了这些按钮中的哪一个 根据这一点 我想禁用该按钮 Handler add customer validate rules name required tru
  • 如何将 Jitsi Meet 添加到 Vuejs

    我已在 public html 的正文中加载了 jitsi meet 脚本 并且我有一个组件 如下所示
  • 使用 shell 脚本发送 HTML 邮件

    如何使用 shell 脚本发送 HTML 电子邮件 首先 您需要撰写消息 最低限度由这两个标头组成 MIME Version 1 0 Content Type text html 以及适当的消息正文 p Hello world p 获得后
  • 有没有办法使用 JavaScript 发送 CoAP 命令?

    我只是想知道是否有一种方法可以在浏览器中发送 CoAP 查询 使用 JavaScript 但不能使用 node js Thanks 不幸的是 这不可能直接实现 出于安全原因 Web 浏览器不为 UDP 套接字提供任何 JavaScript
  • XRegExp 没有后视功能?

    我需要在JavaScript中使用正则表达式的lookbehind 所以发现在 JavaScript 中模拟lookbehind 第 2 步 https gist github com slevithan 2387872 另外 我发现作者
  • javascript中的快捷方式融合优化

    我听说 lodash 和其他 javascript 库使用一种称为 快捷融合 的技术进行优化 但在任何地方都找不到该技术的详细解释 任何人都可以提供链接或举例解释 快捷方式融合 的含义吗 对于一个非常简短且不清楚的解释 https wiki
  • Javascript:为什么我需要在 for 循环中声明 var i = 0?

    我正在做一个需要递归的问题 用于计算加起来达到一定数量的硬币组合 有效的解决方案如下 困扰我几个小时的一件事是 当我没有在 for 循环中声明 var i 0 时 它不起作用 据我了解 当我在 for 循环中声明 var 时 它会保留在该范
  • 模块模式和这个

    我正在为我的 JavaScript 类 使用模块模式 声明有什么重大缺点吗 var self在课外我返回然后将其设置为this在类构造函数内部 这样当我不希望发生上下文切换时 我就不必担心上下文切换 在这个小例子中 可能没有必要 这只是一个
  • 当父窗口关闭时关闭子窗口(弹出窗口)

    我有一个简单的示例页面 当您单击链接时 我正在使用弹出子弹出窗口进行处理 我一直在尝试各种卸载事件来在父窗口关闭时关闭子窗口 但似乎无法弄清楚我错过了与简单编码相关的内容 弹出窗口工作完美 但是关闭父窗口会使弹出窗口保持打开状态

随机推荐