js原生项目(自动打字机html逻辑,css逻辑 ,js逻辑

最新推荐文章于 2024-01-23 16:40:43 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-01-23 16:40:43 发布

阅读量1.1k

点赞数 2

分类专栏： JS 60(提升你的能力)

本文链接：https://blog.csdn.net/qq_37805832/article/details/117311574

版权

JS 60(提升你的能力) 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>自动打字机</title>
  </head>
  <body>
    <h1 id="text"></h1>
    <script src="main.js"></script>
  </body>
</html>

css

* {
  box-sizing: border-box;
}

body {
  background-color: darksalmon;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  text-align: center;
  color: #fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

js:

const text=document.getElementById('text');
const prog="陈业贵&liwen";
let index=1;
function writeText()
{
	text.innerText=prog.slice(0,index);
	index++;
	if(index>prog.length)
	{
		index=1;
	}
}
setInterval(writeText,300);