HTML5动画初学者

作为一个前端初学者，总是可以遇见很多人的指导，也是一种幸运8

“其实在你要实现点什么的时候，建议你先用笔写下来，写下需求，实现思路跟步骤”

1、在网页中添加一个单选框控件和一个div标签，并且通过CSS样式设置div鼠标移入到input上的时候，让div1显示，鼠标移出input的时候，让div1隐藏。保存该网页为鼠标提示框。（提示：div1显示：div1的display变成block，div1隐藏：div1的display变成none）

<style>
    #div1{
        width: 200px;
        height: 200px;
    background: #cccccc;
    border: 1px solid #000000;
    display: none;
    }
</style>
<body>
    <input type="checkbox" 
    "div1.style.display='block';"
    "div1.style.display='none';"/>
    <div id="div1">
        节日快乐哦~
    </div>

2、新建一个网页，命名为按钮点击变色，添加两个按钮，分别控制一个div分别变为红色或蓝色。

<script>
    function skin1() {

        var ol = document.getElementById('11');

        ol.href = 'css1.css';
    }

    function skin2() {

        var ol = document.getElementById('11');

        ol.href = 'css2.css';
    }
</script>

<body>
    <input type="button" value="变红" "skin1()" />
    <input type="button" value="变蓝" "skin2()" />
</body>

@charset "utf=8";
body{background: red}
input{width: 100px;height: 50px;background: yellowgreen;}

@charset "utf=8";
body{background: blue}
input{width: 100px;height: 50px;background: seashell;}

3、新建一个网页，命名为按钮点击显示隐藏.html，创建一个按钮及一个div，实现当点击按钮显示div，再点击按钮隐藏div。

    <style>
            #div {
                width: 200px;
                height: 200px;
                background: #e49c9c;
                border: 1px solid #000000;
                display: none;
            }
        </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div id="div">HTML5动画设计·hls</div>
</body>
</html>   
 <script>
        btn.addEventListener("click", function () {
            var display = div.style.display;
            if (display == "none") {
                div.style.display = "block";
            } else {
                div.style.display = "none";
            }
        });
    </script>

不是很明白这种代码含义：

document.getElementById
script放最下面:你放在上面的时候，下面的dom都没有生成
上次加了$(document).ready，这个意思就是等页面加载完毕再执行

参考：
如何实现JS点击按钮显示DIV，在点击按钮隐藏整个DIV？_360问答
https://wenda.so.com/q/1537122594219145?src=180
默认div隐藏，点击按钮时出现，再点击时隐藏。
http://www.cnblogs.com/wuss/p/7879613.html

总结：基础十分薄弱！！！多问！！！多练！！！多思考！！！

猜你喜欢