前言
前端新手练习,记录不迷失。
主要练习html和CSS布局以及JS。
来源github,参考链接:使用html和纯js实现小项目
speech-text-reader主要涉及语音播报,点击图片,播放文字语音。
一、Html
页面结构比较简单,需要注意的是,链接的图片和文字以及语音下拉框都是通过JS插入的。主要包括标题、表单按钮、表单以及卡片主体部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>speech-txt-reader</title>
<link rel="stylesheet" href="style.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="action.js"></script>
</head>
<body>
<!-- 元素属性值用双引号 -->
<div class="cotainer">
<h1>Speech Text Reader</h1>
<button class="btn toggle">Toggle Text Box</button>
<div class="text-box">
<span class="close"></span>
<h3>Choose Voice</h3>
<select id="voices"></select>
<textarea id="text" placeholder="Enter text to read..."></textarea>
<button class="btn" id="read">Read Text</button>
</div>
<main></main>
</div>
</body>
</html>
二、CSS
1.学习gird网格布局,可以参考博主 grid布局,归纳的比较详细。
2.学习@media ,看看W3school,link
@import url('https://fonts.googleapis.com/css?family=Lato');
/* @import 规则允许您将样式表导入另一张样式表中。
@import 规则必须位于文档顶部(但是在任何 @charset 声明之后)。
@import 规则还支持媒体查询,因此可以允许依赖媒体的导入。 */
body {
background-color: #ffefea;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
h1 {
text-align: center;/* text-align 属性规定元素中的文本的水平对齐方式。 */
}
.cotainer {
margin: auto;
padding: 20px;
}
.btn {
display: block;
cursor: pointer;
background-color: darksalmon;
border: 0;
border-radius: 4px;
color: #fff;
font-size: 16px;
padding: 8px;
margin:auto;
margin-bottom: 20px;
}
.btn:active {
transform: scale(0.98);
}
.text-box {
width: 70%;
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -800px);/* 设置居中且隐藏 */
background-color: #333;
padding: 20px;
border-radius: 5px;
color:#fff;
}
.text-box.show {
transform: translate(-50%, 0);
}
/* 设置关闭按钮 */
.text-box .close {
float:right;
cursor: pointer;
position: relative;
display: block;
/*relative属性相对比较简单,它是相对它所属父元素来进行偏移的,可以通过“top”、“bottom”、“left”、“right”4个偏移属性进行定位。
absolute绝对定位,依据父元素中最近设置为relative定位类型的元素进行偏移。fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。*/
}
.text-box .close::before {
content: '';
width: 2px;
height: 15px;
transform: rotate(45deg);
background-color: #fff;
display: block;
position: absolute;
}
.text-box .close::after {
display: block;
content: '';
width: 2px;
height: 15px;
transform: rotate(-45deg);
background-color: rgb(255, 255, 255);
position: absolute;
}
.text-box select{
background-color: darksalmon;
border:0;
width:100%;
height:30px;
font-size: 12px;
color:#fff;
}
.text-box textarea{
width:100%;
height:150px;
font-size:16px;
border:1px solid #dadada;
margin:15px 0;
padding:8px;
}
.text-box .btn{
width: 100%;
margin:0;
}
main {
display: grid;/* 学习网格布局 */
grid-gap: 10px;
grid-template-columns: repeat(4,1fr); /* 设置网格的列数。写几个值表示有几列
值可以是px这种固定大小的,也可以是百分比,也可以使用fr这种单位;fr表示总空间减去固定空间和百分比的大小,然后再分配 */
}
.box {
box-shadow: 0 2px 10px rgb(0, 0, 0, 20%);
border-radius: 5px;
cursor: pointer;
display: flex;
flex-direction: column;
overflow: hidden;
}
.box.active{
box-shadow:0 0 10px 5px darksalmon;
}
.box img {
height: 200px;
object-fit: cover;
width: 100%;
}
.box .info {
background-color: darksalmon;
color: #fff;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
padding: 10px;
text-align: center;
height: 100%;
}
/* @media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。
媒体查询可用于检查许多事情,诸如:
视口的宽度和高度
设备的宽度和高度
方向(手机或平板电脑处于横屏还是竖屏模式?)
分辨率 */
@media (max-width: 1100px) {
main {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 760px) {
main {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
main {
grid-template-columns: 1fr;
}
}
二、JS
①了解html5中新增的API播放语音,通过 new SpeechSynthesisUtterance()创建,利用他可以播放想要的内容,还能修改声音的音量、语言等。
②需要注意的是在获取浏览器的支持的语言时,需要通过监听事件speechSynthesis.addEventListener(‘voiceschanged’, getVoices);来更新表单,否则会出现浏览器控制台能获取,但是页面无法刷新出来的问题。
③整个JS部分包括将图片和文字append到html;将多语言append到html表单;以及一些按件操作,包括打开和关闭表单,播放输入的文字等。
$(document).ready(function () {
const data = [
{
image: 'uncompressed/drink.jpg',
text: "I'm Thirsty",
},
{
image: 'uncompressed/food.jpg',
text: "I'm Hungry",
},
{
image: 'uncompressed/tired.jpg',
text: "I'm Tired",
},
{
image: 'uncompressed/hurt.jpg',
text: "I'm Hurt",
},
{
image: 'uncompressed/happy.jpg',
text: "I'm Happy",
},
{
image: 'uncompressed/angry.jpg',
text: "I'm Angry",
},
{
image: 'uncompressed/sad.jpg',
text: "I'm Sad",
},
{
image: 'uncompressed/scared.jpg',
text: "I'm Scared",
},
{
image: 'uncompressed/outside.jpg',
text: 'I Want To Go Outside',
},
{
image: 'uncompressed/home.jpg',
text: 'I Want To Go Home',
},
{
image: 'uncompressed/school.jpg',
text: 'I Want To Go To School',
},
{
image: 'uncompressed/grandma.jpg',
text: 'I Want To Go To Grandmas',
},
];
// 初始化
const message = new SpeechSynthesisUtterance(); /* html5中新增播放语音 */
//写入option
let voices;
//添加事件监听很重要,否则无法加载
speechSynthesis.addEventListener('voiceschanged', getVoices);
function getVoices() {
voices = speechSynthesis.getVoices();
voices.forEach(voice => {
let $target = $('<option></option>');
$target.text(`${voice.name}
`);
$('#voices').append($target);
});
}
//改变语音
$('#voices').change(function (e) {
let set=$(":selected").val();
message.voice = voices.find(voice => voice.name === set);//===判断值和类型是否相同 ,==运算赋值等操作都会导致类型转换
//find()方法返回第一个满足过滤方法的元素
});
/* data.forEach(element => {
let $box = $('<div class="box"></div>');
$box.append('<img src="' + element['image'] + '" />');
$box.append('<p class="info">' + element['text'] + '</p>');
$('main').append($box);
}); */
data.forEach(element => {
let $box = $('<div class="box"></div>');
const { image, text } = element;
$box.append(`<img src="${image}"/>
<p class="info">${text}</p>`);
/* 在实际开发中我们一般在ajax请求中用`不变的html${变量}html标签`代替以前传统复杂的单引号双引号与+的拼接,简介明了,非常好用。 */
$box.click(function () {
$(this).addClass('active');
message.text = text;
speechSynthesis.speak(message);
setTimeout(function () {
$box.removeClass('active');
}, 500);
});
$('main').append($box);
});
$('.toggle').click(function () {
$('.text-box').toggleClass('show');
});
$('.close').click(function () {
$('.text-box').removeClass('show');
});
$('#read').click(function () {
message.text = $("#text").val();
speechSynthesis.speak(message);
});
});