在网页中实现文字的一个一个出现

最新推荐文章于 2024-01-04 01:20:11 发布

opooc

最新推荐文章于 2024-01-04 01:20:11 发布

阅读量1.1w

点赞数 2

分类专栏： HTML5 文章标签： HTML 文字

本文链接：https://blog.youkuaiyun.com/opooc/article/details/80298438

版权

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文通过一个简单的HTML页面示例展示了如何使用JavaScript实现文本内容的逐字符加载效果，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>opooc</title>

</head>
<style >
div{
    width: 800px;
    height: 30px;
    border:1px
    solid #ef3333;
    color: greenyellow;
}
</style>
<body>
<div id = "test"></div>
<script >
    var text = "我有一个梦想我有一个梦想我有一个梦想我有一个梦想";
    var num = text.length;

    var i =0;
    function show() {
        var shower = text.substr(0,i);
        document.getElementById("test").innerHTML = shower;
        i++;
        if(i + 1 >= num){
            clearInterval("done");
        }
    }
    var done=setInterval("show()",500);


</script>
</body>

</html>