随机颜色作业

Original 2019-01-07 07:03:39 275
abstract:<!DOCTYPE html> <html> <head>    <title></title>     <script type="text/javascript" src="http://apps.b
<!DOCTYPE html>
<html>
<head>
   <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <style>
        .div {
            width: 90%;
            height: 20px;
            background-color: blue;
            display: inline-block;
        }
        span {
            width:6%;
            height: 20px;
            line-height: 20px;
            display: inline-block;
        }
    </style>
    <script>
        function a(num){
            var len = document.getElementsByClassName(num).length
            for(var i =0; i<len; i++){
                document.getElementsByClassName(num)[i].style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'
            }
        }

        $(document).ready(function(){
            a('div')
            $('.div').mouseenter(function(){
                $(this).animate(
                    {
                        width:Math.random()*90+'%'
                },1000)
            })
            $('.div').mouseleave(function(){
                $(this).animate(
                    {
                        width:'90%'
                    },1000)
            })
        })
    </script>
</head>
<body>
<div>
<span>html</span>
<div class="div"></div>
</div>
<br>
<div>
<span>JavaScript</span>
<div class="div"></div>
</div>
<br>
<div>
<span>jQuery</span>
<div class="div"></div>
</div>
<br>
<div>
<span>php</span>
<div class="div"></div>
</div>
</body>
</html>

通过最近做案例总结,html还是css逻辑还是非常重要,在写样式的时候不是因为不知道代码怎么写,而是上下层关系比较乱

Correcting teacher:韦小宝Correction time:2019-01-07 09:09:59
Teacher's summary:对于样式不清楚怎么写还是因为你写少了 或者是你对课程中讲的知识还没理解透彻 课后记得要多复习和练习

Release Notes

Popular Entries