搜索到
1
篇与
前端
的结果
-
4行关键JS实现的一个类似于打字的特效，超简单JS实现打字效果 效果展示如下： js实现打字特效 这是只用了4行关键JS实现的一个类似于打字的特效，给你一个不一样的思路! 点击这里可以直接去我的博客! // html文字类似于打字特效 function typewriting(){ // 定义数字长度为零 var index=0; // 获取文字内容，我这里直接在页面上写出来然后隐藏的，也可以动态加载哦 var word=document.getElementById("title").innerHTML; // 封装任务 function type(){ // 获取打字在哪个位置，substring()方法提取字符串（获取到的word里）中介于两个指定下标之间的字符（起始为0，运行一次自增一次）。 document.getElementById("text").innerText = word.substring(0,index++); } setInterval(type, 100); // 100毫秒调用一次type任务 } typewriting(); // 执行typewriting 代码块如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现打字特效</title> <!-- 移动设备 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style type="text/css"> a{ text-decoration: none; display: inline-block; color: black; font-size: 20px; padding: 10px; } div{ width: 330px; height: auto; border: 1px solid #CCC; margin: 10px auto; padding: 10px; text-indent: 10px; border-radius: 10px; box-shadow: 2px 2px 3px #CCC } #title{ display: none; } </style> </head> <body> <span id="title">这是只用了4行关键JS实现的一个类似于打字的特效，给你一个不一样的思路! 点击这里可以直接去我的博客!</span> <div> <a href="https://blog.fxnws.com" id="text"></a> </div> <script type="text/javascript"> // html文字类似于打字特效 function typewriting(){ // 定义数字长度为零 var index=0; // 获取文字内容，我这里直接在页面上写出来然后隐藏的，也可以动态加载哦 var word=document.getElementById("title").innerHTML; // 封装任务 function type(){ // 获取打字在哪个位置，substring()方法提取字符串（获取到的word里）中介于两个指定下标之间的字符（起始为0，运行一次自增一次）。 document.getElementById("text").innerText = word.substring(0,index++); } setInterval(type, 100); // 100毫秒调用一次type任务 } typewriting(); // 执行typewriting </script> </body> </html>
