百度前端技术学院第二十到第二十一天:让你和页面对话

在HTML中增加上面的代码,然后通过JavaScript编写如下功能:

  1. 当点击按钮 submit-btn 时,在console中输出 name 中的内容。
  2. 在输入过程中,如果按回车键,则同样执行上一条的需求。
  3. 在输入过程中,如果按 ESC 键,则把输入框中的内容清空。

<html>
    <head>
            <meta charset="UTF-8">    
            <title>JS事件title>

    head>
    <body>
            <input id="name" type="text" onkeydown="keyDown()">    
            <button id="submit-btn" onclick="jsEvent()">Submitbutton> 
            <script>
            function keyDown(){
                switch(event.key){
                case "Enter":
                jsEvent(); 
                break;
                case "Escape":
                document.getElementById("name").value="";
                break;
                }
            }
            function jsEvent(){
             console.log(document.getElementById("name").value);

            }

            script>
    body>
html>

控制元素的显示及隐藏

基于如上 HTML,实现以下功能:
1. 当用户选择了 School 的单选框时,显示 School 的下拉选项,隐藏 Company 的下拉选项
2. 当用户选择了 Company的单选框时,显示 Company 的下拉选项,隐藏 School 的下拉选项


<html>
<head>
    <meta charset="UTF-8">    
    <title>控制元素的显示及隐藏title>
    <style>
        select {
            display: none;
        }
        .select{
            display: block;
        }
        .non-select{
            display: none;
        }
    style>
head>
<body>            
    <label>
        <input id="school" name="status" type="radio" onclick="choseSch()">
        School
    label>
    <label>
        <input id="company" name="status" type="radio" onclick="choseCompany()">
        Company
    label>

    <select id="school-select" >        
        <option>北京邮电大学option>
        <option>黑龙江大学option>
        <option>华中科技大学option>
    select>

    <select id="company-select" >        
        <option>百度option>
        <option>爱奇艺option>        
    select>
    <script>
        function choseSch(){
        x=document.getElementById("school-select");
        x.className="select";
        y.className="non-select";
        }
        function choseCompany(){
        y=document.getElementById("company-select");
        y.className="select";
        x.className="non-select";
        }
    script>
body>
html>

再次结合事件和样式设置,进行练习

点击某一个 Li 标签时,将 Li 的背景色显示在 P 标签内,并将 P 标签中的文字颜色设置成 Li 的背景色(事件代理)。

getElementByClassName()[0]
getElementByTagName()[0]
getElementById()不需要


<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScripttitle>
    <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 oUl=document.getElementsByClassName("palette")[0];
        oUl.onclick=function(ev){
            var ev=ev||window.event;
            var target=ev.target||ev.srcElement;
            if(target.nodeName.toLowerCase()=="li"){
                document.getElementsByClassName("color-picker")[0].innerHTML=target.style.backgroundColor;
                document.getElementsByClassName("color-picker")[0].style.color=target.style.backgroundColor;
            }


        }

    script>
body>
html>

针对以上 HTML,分别使用 setTimeout 和 setInterval 实现以下功能:

  1. 点击按钮时,开始改变 fade-obj 的透明度,开始一个淡出(逐渐消失)动画,直到透明度为0
  2. 在动画过程中,按钮的状态变为不可点击
  3. 在动画结束后,按钮状态恢复,且文字变成“淡入”
  4. 在 按钮显示 淡入 的状态时,点击按钮,开始一个“淡入”(逐渐出现)的动画,和上面类似按钮不可点,直到透明度完全不透明
  5. 淡入动画结束后,按钮文字变为“淡出”
  6. 暂时不要使用 CSS animation (以后我们再学习)

参考的别人的代码,自己用的setInterval ()存在问题ORZ。


<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScripttitle>

head>
<body>            
    <div id="fade-obj" style="width:300px;height:300px;background:#000">div>
    <button id="fade-btn">淡出button>
    <script>
    var fadeObj=document.getElementById("fade-obj");
    var fadeBtn=document.getElementById("fade-btn");
    var i=1;

    function fadeout(){
        fadeObj.style.opacity=i;
        i-=0.1;
        fadeBtn.disable=true;
        if(i>0){
            setTimeout(fadeout,100);
            console.log(i);
        }
        else if(i<=0){
            fadeBtn.innerHTML="淡入";
            fadeBtn.disable=false;
            fadeBtn.addEventListener("click",fadein);
        }
    }

    function fadein(){
        fadeObj.style.opacity=i;
        i+=0.1;
        fadeBtn.disable=true;
        if(i<1){
            setTimeout(fadein,100);
            console.log(i);
        }
        else if(i>=1){
            fadeBtn.innerHTML="淡出";
            fadeBtn.disable=false;
            fadeBtn.addEventListener("click",fadeout);
        }
    }
    fadeBtn.addEventListener("click",fadeout);
    script>
body>
html>

学习来实现一个帧动画:

  1. 基于一个我们提供的图片,实现 IFE2016中Erik笑容的动画
  2. 图片地址:http://ife.baidu.com/2016/static/img/erik_ce204002.jpg
  3. 注意,依然不要使用 CSS animation,因为我们这里要学习的是使用 JavaScript 来操作CSS,而不是为了完成这个任务。

<html>
    <head>
            <meta charset="UTF-8">    
            <title>笑容动画title>
    <style>
    .loadPic{
        background: url(erik_ce204002.jpg);
        width: 480px;
        height: 480px;
        background-repeat: no-repeat;
    }
    style>
    head>
    <body>
    <div class="loadPic">
    div>
        <script>

        window.onload = function () {
            var ani = document.getElementsByClassName("loadPic")[0];
            var Y = 0;

            function changePic() {

                ani.style.backgroundPositionY = '-' + Y + 'px';
                Y+=480;
                 if(Y==8160){
                    Y=0;
                }
            }
            setInterval(changePic, 100);
        }

        script>
    body>
html>

你可能感兴趣的:(前端)