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

贵哥的编程之路

发布于 2021-06-08 21:40:08

1.4K0

发布于 2021-06-08 21:40:08

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);

js逻辑: