百度前端学院第20天笔记
感觉只有源代码有放上来的必要，没啥感悟，嘿嘿🤭
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
div{
display: block;
height: 160px;
}
select{
width: 120px;
height: 70px;
margin-top: 30px;
/* border:red,solid,2px; */
border-color: rgba(255, 228, 196, 0.349);
border-style: solid;
/* border: 3px; */
border-radius: 10px;
outline: none;
margin-left: 30px;
background-color: rgba(255, 228, 196, 0.349);
box-shadow: 5px 2px 4px rgba(143, 9, 9, 0.411);
}
.palette {
margin: 0;
padding: 0;
list-style: none;
}
.palette li {
width: 40px;
height: 40px;
border: 1px solid #000;
cursor: pointer;
}
.color-picker{
height: 120px;
width: 120px;
}
</style>
</head>
<body>
<label>
<input id="school" name="status" type="radio">
School
</label>
<label>
<input id="company" name="status" type="radio">
Company
</label>
<div>
<select id="school-select">
<option>北京邮电大学</option>
<option>黑龙江大学</option>
<option>华中科技大学</option>
</select>
<select id="company-select">
<option>百度</option>
<option>爱奇艺</option>
</select>
</div>
<hr>
<ul class="palette" id="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>
<p class="color-picker"></p>
<!-- <p class="color-picker">1234</p> -->
<div id="fade-obj" style="width:300px;height:300px;background:#000;opacity:1;"></div>
<button id="fade-btn">淡出</button>
<script>
// 基于如上 HTML，实现以下功能：
// 当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
// 当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项
function $(id) {
return document.getElementById(id);
}
$("school-select").style.display="none";
$("company-select").style.display="none";
$("school").onchange=()=>{
$("school-select").style.display="";
$("company-select").style.display="none";
}
$("company").onchange=()=>{
$("company-select").style.display="";
$("school-select").style.display="none";
}
// 点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
$("palette").onclick=(e)=>{
// console.log(e.target)
if(e.target.tagName==="LI"){
var t = e.target;
var c = t.style.backgroundColor;
var p = document.getElementsByClassName("color-picker")[0]
var pp= document.getElementsByClassName("color-picker")[1]
p.innerHTML = c;
p.style.color = c;
pp.style.backgroundColor=c;
}
}
// function shownode(node){
// if(node.style.opacity>1){
// $("fade-btn").innerHTML="淡出";
// $("fade-btn").disabled=null
// }else{
// node.style.opacity+=parseFloat(node.style.opacity)+=0.05;
// setTimeout(() => {
// shownode(node)
// }, 1000/60);
// }
// }
function showNode(node) {
if (node.style.opacity >= 1) {
$('fade-btn').innerHTML = '淡出'
$('fade-btn').disabled = null
} else {
node.style.opacity = parseFloat(node.style.opacity) +0.05;
setTimeout(() => {
showNode(node);
}, 1000 / 60);
}
}
// function hiddenode(node){
// if(node.style.opacity<=0){
// $("fade-btn").innerHTML="淡入";
// $("fade-btn").disabled=null
// }else{
// node.style.opacity+=parseFloat(node.style.opacity)-=0.05;
// setTimeout(() => {
// hiddenode(node);
// }, timeout);
// }
// }
function hideNode(node) {
if (node.style.opacity <= 0) {
$('fade-btn').innerHTML = '淡入'
$('fade-btn').disabled = null
} else {
node.style.opacity -= 0.05;
setTimeout(() => {
hideNode(node);
}, 1000 / 60);
}
}
$("fade-btn").onclick=(e)=>{
$("fade-btn").disabled=true
if(e.target.innerHTML==="淡出"){
hideNode( $("fade-obj"));
}else{
showNode( $("fade-obj"));
}
}
// $('fade-btn').addEventListener('click', function (e) {
// $('fade-btn').disabled = true;
// if (e.target.innerText === '淡出') {
// hideNode($('fade-obj'))
// } else {
// showNode($('fade-obj'))
// }
// })
</script>
</body>
</html>
