寫在前面
前面有個小夥伴問我,電腦打字的效果怎麼實作?今天我就來跟大家分享一個這樣的小練習,在前面我們寫了很多純CSS實作的效果,今天我們的這個小練習有簡單JS的加入,如果你是新入門的小夥伴,也不用害怕,慢慢練習起來就好了。
這個CSS檔案和JS檔案,我在文章裡都是将代碼單獨分享出來的,如果你們在本地進行練習的時候,請自行建立一個獨立空白的CSS檔案與JS檔案,然後在HTML檔案裡直接引入就好了,關于CSS檔案與JS檔案引入的方式有多種,但是,在這裡,我推薦大家使用如下方式:
01).CSS檔案引入方式:
<link rel="stylesheet" href="style.css" />
href為引入CSS檔案路徑,這個style為檔案名稱,這個在建立空白CSS檔案的時候,自行取一個檔案名稱,我這邊練習,一般都是直接使用style這樣的名字。
02).JS檔案引入方式:
<script src="write.js"></script>
src為引入JS檔案路徑,這個檔案名字,大家最好不用随意命名,不然在實際開發中,檔案一多,自己都搞不清楚,而且團隊開發時,别人也不明白你這個檔案是幹什麼用的,是以,為了友善自己也友善别人,請大家使用一些有實際意義的檔案名稱。
這個也是我們實際開發中的正确操作方式,請大家從每日的練習中慢慢養成好的習慣。
今天聊的這個内容都是一些基本的知識與習慣,已經知道的小夥伴可以直接忽略。
因為,以上内容主要是針對目前還不知道怎麼使用文章中的代碼,去實作我們練習效果的小夥伴的。
好了,現在我們一起來看一下今天小練習的最終效果:
這個練習裡,有一個設定打字速度的功能,這個功能可以讓大家根據内容多少,自行設定文字輸出的速度,想學習的你,可以自行實作一下,說不定你還有更好的實作方式哦。
下面我們一起來看看代碼吧。
HTML代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS檔案的引入,在前面說了-->
<link rel="stylesheet" href="style.css" />
<title>【每日一練】37—自動打字效果的實作</title>
</head>
<body>
<h1 id="text">開始打字</h1>
<div>
<label for="speed">設定速度:</label>
<input type="number" name="speed" id="speed" value="1" min="1" max="20" step="1">
</div>
<!-- JS檔案的引入,在前面已經說了,這個也可以放在<head>标簽裡-->
<script src="write.js"></script>
</body>
</html>
CSS代碼:
* {
box-sizing: border-box;
}
body {
background-color:#00a6bc;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
h1{margin-left:50px;margin-right:50px;
}
#text{
color:#fff;
}
div {
position: absolute;
bottom: 20px;
font-size: 18px;
background-color: #fff;
opacity:0.8;
}
input {
width: 50px;
padding: 5px;
font-size: 18px;
background-color: #fafafa;
border: none;
text-align: center;
}
input:focus {
outline: none;
}
JavaScript代碼:
const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = '毛澤東的名作《沁園春·雪》,北國風光,千裡冰封,萬裡雪飄。望長城内外,惟餘莽莽;大河上下,頓失滔滔。山舞銀蛇,原馳蠟象,欲與天公試比高。須晴日,看紅裝素裹,分外妖娆。江山如此多嬌,引無數英雄競折腰。惜秦皇漢武,略輸文采;唐宗宋祖,稍遜風騷。一代天驕,成吉思汗,隻識彎弓射大雕。俱往矣,數風流人物,還看今朝。'
let idx = 1
let speed = 100 / 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 = 100 / e.target.value)
寫在最後
以上就是我們今天的【每日一練】的全部内容,希望今天的小練習對你有用,如果你覺得有幫助的話,請點贊我,關注我,并将它分享給你身邊做開發的朋友,也許能夠幫助到他。
我是楊小愛,我們明天見。