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

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

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逻辑:
在这里插入图片描述

第一步:获取到h1标签
在这里插入图片描述

第二步:显示的文本是什么?
在这里插入图片描述

第三步:定时器的作用是多次调用writeText函数
在这里插入图片描述

第四步:用slice截图文字,从prog变量中截取下标0.。。。。到下标123456789(复制的截取)
在这里插入图片描述

第五步:当超出文字的数量时就重新截图(从下标0开始)
注意:slice的第二个参数是不计算到本身的哦-1

效果图:

在这里插入图片描述

相关文章
|
3天前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
4天前
countup.js包实现数字滚动-大屏项目
countup.js包实现数字滚动-大屏项目
7 1
|
4天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
6天前
|
XML JavaScript 前端开发
【JavaScript】实战训练小项目-WebAPI
【JavaScript】实战训练小项目-WebAPI
11 1
|
6天前
|
JavaScript 开发工具 git
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。
30 0
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
|
6天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
14 0
|
6天前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
10 1
|
6天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
12 1
|
6天前
|
监控 JavaScript 前端开发
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript项目中的渐进式采用
【4月更文挑战第30天】TypeScript是JavaScript的超集,引入静态类型、接口等特性,提升代码安全性和可读性。在JavaScript项目中采用TypeScript可享受类型安全、社区支持及优秀工具集成等优势。渐进式采用策略包括评估项目现状、逐步引入新旧模块、编写类型定义文件、配置编译选项和编写测试用例,以提高项目质量和效率。
|
9月前
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录