【GitHub热前端项目50天50项目】--day04--实现自动输入的效果、自动打字

GitHub热门前端练手项目，纯HTML、CSS、JS实现，50天50个项目，每日一个项目，打卡活动，解读项目中的知识点
GitHub项目官网连接
50Projects in 50 Days

项目展示

实现自动文本效果，还可以调节文本输入的速度

AutoTextEffects

源代码

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>Auto Text Effect</title>
  </head>
  <body>
    <h1 id="text">Starting...</h1>
 
    <div>
      <label for="speed">Speed:</label>
      <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
    </div>
 
    <script src="script.js"></script>
  </body>
</html>

CSS

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
* {
  box-sizing: border-box;
}
 
body {
  background-color: darksalmon;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
 
div {
  position: absolute;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  font-size: 18px;
}
 
input {
  width: 50px;
  padding: 5px;
  font-size: 18px;
  background-color: darksalmon;
  border: none;
  text-align: center;
}
 
input:focus {
  outline: none;
}

JS

 const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = 'We Love Programming!'
let idx = 1
let speed = 300 / speedEl.value
 
writeText()
 
function writeText() {
    textEl.innerText = text.slice(0, idx)
 
    idx++
 
    if(idx > text.length) {
        idx = 1
    }
 
    setTimeout(writeText, speed)
}
 
 
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

知识点

HTML

通过一个<label>标签来绑定表单元素

 <div>
    <label for="speed">Speed:</label>
    <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
</div>

CSS

没啥说的，都是基本的

JS

定时器

定时器是BOM中的API

JavaScript中有两个定时器的相关方法

setInterval()，按照指定的周期调用函数；方法会不停地调用函数
setTimeOut()在指定的毫秒数后，调用函数

`setTimeout()`

setTimeOut()函数，用来指定某个函数或代码串，在多少毫秒之后执行，它返回一个整数，表示这个定时器的编号，以后可以用这个编号来取消定时器

 var timeId = setTimeout(fun | code , delay)

setTimeout()函数接收两个参数，第一个是要延迟执行的函数名或代码串，第二个参数是延迟的毫秒数。

注意：延迟执行的代码必须以字符串的形式，放入setTimeout()中，因为引擎内部使用eval函数，将字符串转为代码。如果推迟的是函数，则可以直接将函数名放入setTimeout()中

 <h1>3秒中后会弹出一个警告</h1>
<script>
    var myfun = function(){
        alert('cnmd')
    }
    setTimeout(myfun,3000)
</script>

`setInterval()`

setInterval()与setTimeout()的用法一致。

 setInterval(code,milliseconds)

code为调用的函数或代码串

milliseconds为执行周期时间，以毫秒计

 <h1>现在的时间是</h1>
<h1 id="time"></h1>
<script>
    var timeId = setInterval(function(){
        var date = new Date()
        document.getElementById('time').innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    },1000)
    console.log(timeId)
</script>

`clearInterval()`

清除计时器，需要传入计时器的ID

 <h1>现在的时间是</h1>
<h1 id="time"></h1>
<button id="bt">时间停止</button>
<script>
    var timeId = setInterval(function(){
        var date = new Date()
        document.getElementById('time').innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    },1000)
    console.log(timeId)
    document.getElementById('bt').addEventListener('click',() => {window.clearInterval(timeId)})
</script>

`clearTimeout()`

用法跟clearInterval()方法相同

`slice()`

slice()是js中String的一个方法，可以用来提取字符串中的某个部分，并以新的字符串返回被提取的部分

 str.slice(start,end)

start 起始下标，如果为负数，则代表从字符串尾部开始算起，-1是最后一个字符，-2是倒数第二个字符，以此类推
end 结尾的下标，如果未指定此值，则是从start到字符串结尾的部分。如果此值为负数，跟start含义一样

posted @ 2022-11-13 22:27 秋天Code 阅读(118) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 【GitHub热门前端50天50项目-打卡活动】--day02

· 【GitHub前端练手项目--50天50个项目---商品加载效果-----day08】

· 前端知识案例学习11-前端实现自动打字效果

· HTML设置定时执行代码 JavaScript 计时事件

· JS方法——Timing（时间方法）

阅读排行：
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现

itkkk

【GitHub热前端项目50天50项目】--day04--实现自动输入的效果、自动打字

项目展示

源代码

HTML

CSS

JS

知识点

HTML

CSS

JS

定时器

`setTimeout()`

`setInterval()`

`clearInterval()`

`clearTimeout()`

`slice()`

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!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>Auto Text Effect</title>
	</head>
	<body>
	<h1 id="text">Starting...</h1>

	<div>
	<label for="speed">Speed:</label>
	<input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
	</div>

	<script src="script.js"></script>
	</body>
	</html>

	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

	* {
	box-sizing: border-box;
	}

	body {
	background-color: darksalmon;
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	}

	div {
	position: absolute;
	bottom: 20px;
	background: rgba(0, 0, 0, 0.1);
	padding: 10px 20px;
	font-size: 18px;
	}

	input {
	width: 50px;
	padding: 5px;
	font-size: 18px;
	background-color: darksalmon;
	border: none;
	text-align: center;
	}

	input:focus {
	outline: none;
	}

	const textEl = document.getElementById('text')
	const speedEl = document.getElementById('speed')
	const text = 'We Love Programming!'
	let idx = 1
	let speed = 300 / speedEl.value

	writeText()

	function writeText() {
	textEl.innerText = text.slice(0, idx)

	idx++

	if(idx > text.length) {
	idx = 1
	}

	setTimeout(writeText, speed)
	}


	speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

	<h1>3秒中后会弹出一个警告</h1>
	<script>
	var myfun = function(){
	alert('cnmd')
	}
	setTimeout(myfun,3000)
	</script>

	<h1>现在的时间是</h1>
	<h1 id="time"></h1>
	<script>
	var timeId = setInterval(function(){
	var date = new Date()
	document.getElementById('time').innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
	},1000)
	console.log(timeId)
	</script>

	<h1>现在的时间是</h1>
	<h1 id="time"></h1>
	<button id="bt">时间停止</button>
	<script>
	var timeId = setInterval(function(){
	var date = new Date()
	document.getElementById('time').innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
	},1000)
	console.log(timeId)
	document.getElementById('bt').addEventListener('click',() => {window.clearInterval(timeId)})
	</script>