运动到了数字随机函数以及鼠标光标移动函数以及jQuery的基本函数应用

原创2018-11-20 17:04:0155
摘要:<!DOCTYPE html><html><head> <title>获取随机颜色</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style type="text

<!DOCTYPE html>

<html>

<head>

<title>获取随机颜色</title>

<script type="text/javascript" src="jquery-3.3.1.js"></script>

<style type="text/css">

         a{

          float: left;

          display:block;

          margin:50px;

          width: 100px;

          line-height: 100px;

          height: 100px;

          color: #fff;

         

          border-radius: 50px;

          text-decoration: none;

          text-align: center;


         }

</style>

<script type="text/javascript">

//改变标签的北京颜色

         function aa(tag){

          var len=document.getElementsByTagName(tag).length

          for(var i=0;i<len;i++){

          document.getElementsByTagName(tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'

          }

         }

         $(document).ready(function(){

          aa('a')

         $('a').mouseover(function(){

          $bg=$(this).css('backgroundColor')

          $(this).css('shadow','0px 0px 25px'+$bg)

          $(this).css('borderRadius','25px')

         })

           $('a').mouseleave(function(){

         

          $(this).css('shadow','none')

          $(this).css('borderRadius','50px')

         })

         })

</script>

</head>

<body>

<a href="#">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

</body>

</html>


批改老师:灭绝师太批改时间:2018-11-20 17:27:39
老师总结:作业是完成了,但是代码基本跟老师一样,这我就忧心呐,你有没有掌握呢?要确保自己完全掌握了这个知识点,下次遇到也可以解决奥,这是你学习的目的

发布手记

热门词条