百度前端学院第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>
来源：https://www.cnblogs.com/sogeisetsu/p/11734360.html
标签
background
fade