JavaScript案例一：跑马灯

某得感情

已于 2024-03-24 20:46:16 修改

阅读量209

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2024-03-14 23:08:53 首次发布

本文链接：https://blog.csdn.net/weixin_53984419/article/details/136724525

版权

本文讲述了作者在HTML和JavaScript代码中尝试动态更新文本时遇到的问题，重点介绍了如何从HTML中获取文本、使用getElementById和innerText，以及字符串操作如substring和charAt。同时，通过BOM的setInterval函数实现每秒更新内容，提醒读者注意弱类型语言的特性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id = 'txt'>落花有意流水无情</span>
<script type="text/javascript">
    //获取到标签
    var tag = document.getElementById('txt');//其中document是DOM中的函数
    //获取到文本
    var text = tag.innerText;
    function deng(){
        //获取到标签
        var tag = document.getElementById('txt');
    //获取到文本
        var text = tag.innerText;

        //将第一个字放到最后得到一个新的字符串，然后不断循环
        //获取到第一个字
        var firstT = text[0];
        //获取到剩下的字
        var nextT = text.substring(1,text.length);
        //新的字符串
        var newT = nextT+firstT;
        //更新内容
        tag.innerText = newT;
    }
    //定时器：1秒执行一次函数deng
    setInterval(deng,1000)//setinterval是BOM中的函数
</script>
</body>
</html>

在整个代码中我犯了一个错误，没有将获取到的文字放进函数，因为觉得每次都要读取太费了，没有想到这样会无法更新，html是个弱语言，他一般不会报错。所以以后要小心！！！

在这个案例中一共学到了

1.从html中获取文本：通过document.getElementById('id值')可以定位到一个tag

通过tag.innerText可以获取文本

2.字符串可以通过索引直接获取，也可以通过charAt（'索引'）获取

3.切片函数：text.substring(其实数，结束数) //结束的那个数是娶不到的呜呜呜

4.BOM中的定时函数setInterval(函数名，间隔毫秒数)

某得感情

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例一：跑马灯

在整个代码中我犯了一个错误，没有将获取到的文字放进函数，因为觉得每次都要读取太费了，没有想到这样会无法更新，html是个弱语言，他一般不会报错。1.从html中获取文本：通过document.getElementById('id值')可以定位到一个tag。3.切片函数：text.substring(其实数，结束数) //结束的那个数是娶不到的呜呜呜。2.字符串可以通过索引直接获取，也可以通过charAt（'索引'）获取。4.BOM中的定时函数setInterval(函数名，间隔毫秒数)
复制链接

扫一扫