百度前端学院学习-DAY20-21：和页面对话
课程概述
作业提交截止时间：09-01
第二十到第二十一天：让你和页面对话
课程目标
- 掌握 JavaScript 事件的概念，并能写出基本的事件相关的代码
- 掌握如何通过 JavaScript 操作 DOM 的样式
课程描述
阅读
首先学习了解 JavaScript 事件的知识
编码
<input id="name" type="text">
<button id="submit-btn">Submit</button>
在HTML中增加上面的代码，然后通过JavaScript编写如下功能：
- 当点击按钮
submit-btn时，在console中输出name中的内容 - 在输入过程中，如果按回车键，则同样执行上一条的需求
- 在输入过程中，如果按 ESC 键，则把输入框中的内容清空
阅读
接下来学习如何用 JavaScript 操作 DOM 样式
- W3School 样式
- W3School HTML DOM Style 对象
- javascript 动态修改css样式方法汇总(四种方法)
- cssText的用法以及特点
- JavaScript之ClassName属性学习
编码
控制元素的显示及隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
select {
display: none;
}
</style>
</head>
<body>
<label>
<input id="school" name="status" type="radio">
School
</label>
<label>
<input id="company" name="status" type="radio">
Company
</label>
<select id="school-select">
<option>北京邮电大学</option>
<option>黑龙江大学</option>
<option>华中科技大学</option>
</select>
<select id="company-select">
<option>百度</option>
<option>爱奇艺</option>
</select>
</body>
</html>
基于如上 HTML，实现以下功能：
- 当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
- 当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项
编码
再次结合事件和样式设置，进行练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
.palette {
margin: 0;
padding: 0;
list-style: none;
}
.palette li {
width: 40px;
height: 40px;
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="palette">
<li style="background-color:crimson"></li>
<li style="background-color:bisque"></li>
<li style="background-color:blueviolet"></li>
<li style="background-color:coral"></li>
<li style="background-color:chartreuse"></li>
<li style="background-color:darkolivegreen"></li>
<li style="background-color:cyan"></li>
<li style="background-color:#194738"></li>
</ul>
<p class="color-picker"></p>
<script>
var list = document.querySelectorAll("li");
for (var i = i = 0, len = list.length; i < len; i++) {
list[i].onclick = function(e) {
var t = e.target;
var c = t.style.backgroundColor;
var p = document.getElementsByClassName("color-picker")[0]
p.innerHTML = c;
p.style.color = c;
}
}
</script>
</body>
</html>
基于如上 HTML，实现如下功能：
- 点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
阅读
继续阅读，再次理解 JavaScript 的事件机制，并了解事件代理
编码
基于上面的学习，如果你上一个练习没有用到事件代理的方式，那么请重构上一个编码练习，如果已经用到了，则进入下一个练习
阅读
在进行下一个练习之前，我们顺便学习一个新知识：定时
扫描二维码关注公众号，回复：
1731731 查看本文章
- W3School SetTimeout
- JS中setTimeout()的用法详解
- W3School SetInterval
- js setInterval详解
- JavaScript中SetInterval与setTimeout的用法详解
编码
<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn">淡出</button>
针对以上 HTML，分别使用 setTimeout 和 setInterval 实现以下功能：
- 点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
- 在动画过程中，按钮的状态变为不可点击
- 在动画结束后，按钮状态恢复，且文字变成“淡入”
- 在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
- 淡入动画结束后，按钮文字变为“淡出”
- 暂时不要使用 CSS animation （以后我们再学习）
阅读
在进行今天最后一个练习时，我们来学习一个新概念：CSS Sprite
编码
学习来实现一个帧动画：
- 基于一个我们提供的图片，实现 IFE2016中Erik笑容的动画
- 图片地址：http://ife.baidu.com/2016/static/img/erik_ce204002.jpg
- 注意，依然不要使用 CSS animation，因为我们这里要学习的是使用 JavaScript 来操作 CSS，而不是为了完成这个任务。
阅读
最后，可以通过阅读标准，加深理解
提交
把你今天觉得做得最好的代码放在Github后进行提交
总结
- 中间暂停了一段时间，现在开始捡起来
- 学习用时2天，主要学习了DOM 事件类型、事件委托
- 刚开始觉得编码比较困难，布置从何下手
下一个任务预告
我们已经通过许多练习让你体会了 JavaScript 究竟用来干嘛，明天开始，我们将回到许多基础概念，并通过练习来巩固一些基础知识
编码练习
以下是我在学习过程中的编码：
1.随机背景颜色
<button>Change color</button>
<script>
var btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random()*(number+1));
}
btn.onclick = function() {
var rndCol = 'rgb('+random(255)+','+random(255)+','+random(255)+')';
document.body.style.backgroundColor = rndCol;
}
</script>2.input框
- 当点击按钮
submit-btn时，在console中输出name中的内容 - 在输入过程中，如果按回车键，则同样执行上一条的需求
- 在输入过程中，如果按 ESC 键，则把输入框中的内容清空
<input id="name" type="text">
<button id="submit-btn">Submit</button>
<script>
var btn = document.getElementById('submit-btn');
btn.onclick = function(){
var inputText = document.getElementById('name').value;
console.log(inputText);
}
document.onkeydown = function getKey(){
if(event.keyCode == 13){
var inputText = document.getElementById('name').value;
console.log(inputText);
}
if(event.keyCode == 27){
var inputText = document.getElementById('name');
inputText.value = "";
inputText.focus();
}
}
</script>3.控制元素的显示及隐藏
<style>
select {
display: none;
}
</style> <label>
<input id="school" name="status" type="radio">
School
</label>
<label>
<input id="company" name="status" type="radio">
Company
</label>
<select id="school-select">
<option>北京邮电大学</option>
<option>黑龙江大学</option>
<option>华中科技大学</option>
</select>
<select id="company-select">
<option>百度</option>
<option>爱奇艺</option>
</select>
<script>
var schoolRadio = document.querySelector('#school');
var companyRadio = document.querySelector('#company');
var schoolSelect = document.querySelector('#school-select');
var companySelect = document.querySelector('#company-select');
schoolRadio.onclick = function () {
console.log(1);
}
function checkSelect(e) {
if (e.target.checked) {
console.log(1);
if (e.target.id.indexOf('school') >= 0) {
schoolSelect.style.cssText = "display:block"
companySelect.style.cssText = 'display:hide';
} else if (e.target.id.indexOf('company') >= 0) {
schoolSelect.style.cssText = 'display:hide';
companySelect.style.cssText = "display:block"
}
}
}
schoolRadio.addEventListener('click', checkSelect);
companyRadio.addEventListener('click', checkSelect);
// schoolSelect.style.display = 'block';
</script>
<!-- 当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项 -->4.控制DIV属性
<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script>
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div> 5.事件代理
- 点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
<style>
.palette {
margin: 0;
padding: 0;
list-style: none;
}
.palette li {
width: 40px;
height: 40px;
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="palette">
<li style="background-color:crimson"></li>
<li style="background-color:bisque"></li>
<li style="background-color:blueviolet"></li>
<li style="background-color:coral"></li>
<li style="background-color:chartreuse"></li>
<li style="background-color:darkolivegreen"></li>
<li style="background-color:cyan"></li>
<li style="background-color:#194738"></li>
</ul>
<p class="color-picker"></p>
<script>
var ul = document.querySelectorAll("ul")[0];
var p = document.querySelectorAll("p")[0];
ul.onclick = function (e) {
var target = e.target;
colorPicker(target);
};
function colorPicker(target) {
var bgColor = target.style.backgroundColor;
p.innerHTML = bgColor;
p.style.color = bgColor;
}
</script>
</body>6.淡入淡出
- 点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
- 在动画过程中，按钮的状态变为不可点击
- 在动画结束后，按钮状态恢复，且文字变成“淡入”
- 在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
- 淡入动画结束后，按钮文字变为“淡出”
- 暂时不要使用 CSS animation （以后我们再学习）
<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn">淡出</button>
<script>
var btn = document.getElementById("fade-btn");
var fade = document.getElementById("fade-obj");
var i = 1;
function fadeout(){
fade.style.opacity = i;
i-=0.1;
btn.disabled = true;
if(i>0){
setTimeout(fadeout,100);
}else if(i<=0){
btn.innerText = '淡入';
btn.disabled = false;
btn.addEventListener('click',fadein);
}
}
function fadein() {
fade.style.opacity = i;
i+=0.1;
btn.disabled = true;
if(i<1){
setTimeout(fadein,100);
}else if(i>=1){
btn.innerText = '淡出';
btn.disabled = 'false';
btn.addEventListener('click',fadeout);
}
}
btn.addEventListener('click',fadeout);
</script>7.CSS Sprite
<style>
div{
width:480px;
height: 480px;
background: url("erik.jpg");
}
</style>
</head>
<body>
<div id="ani"></div>
<script>
window.onload=function(){
var ani=document.getElementById("ani");
var Y = 480;
function gif() {
ani.style.backgroundPositionY = '-' + Y + 'px';
Y>8160?Y=480:Y+=480;
}
setInterval(gif, 100);
}
</script>
</body>