Inicio Explorar Ayuda
Iniciar sesión
lovecoding
/
VIP24
6
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

new

zsydgithub hace 1 año
padre
270ed0b041
commit
4b8bd18ecb
Se han modificado 4 ficheros con 209 adiciones y 0 borrados
Dividir vista Mostrar estadísticas de diff
  1. 60 0
      6_Dom/22_下落的树叶/index.html
  2. 24 0
      7_css3/1_test.html
  3. 94 0
      7_css3/2_选择器.html
  4. 31 0
      7_css3/3_文本样式.html

+ 60 - 0
6_Dom/22_下落的树叶/index.html
Ver fichero 

@@ -19,6 +19,66 @@
 
     //获取屏幕的宽高
 
     var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
 
     var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
 
+    //构造函数 写属性
 
+    function leaf() {
 
+      //图片宽度
 
+      this.width = Math.random() * 100 + 100;
 
+      //图片距离左边的距离
 
+      this.xLeft = Math.random() * (screenWidth - this.width)
 
+      //距离顶部
 
+      this.xTop = 0
 
+      //图片路径
 
+      this.bg = 'img/' + Math.floor(Math.random() * 4 + 1) + '.png'
 
+      /* 
+        如何让随机数为1，2，3，4整数
 
+        Math.random() 0-1随机小数
 
+        Math.random() * 4  0-4随机小数
 
+        Math.random() * 4 + 1    1-5之间的随机小数  不包括5
 
+
 
+        Math.floor() 向下取整   跟四舍五入没关系  
+        Math.floor(Math.random() * 4 + 1)   1，2，3，4
 
+      */
 
+    }
 
+    // 原型下面写方法
 
+    leaf.prototype.init = function(){
 
+      //创建img标签
 
+      var oImg = document.createElement('img')
 
+      //引用路径
 
+      oImg.src = this.bg
 
+      oImg.style.width = this.width + 'px'
 
+      oImg.style.left = this.xLeft + 'px'
 
+      oImg.style.top = this.xTop + 'px'
 
+      this.img = oImg
 
+      document.body.appendChild(oImg)
 
+    }
 
+    //下落的方法
 
+    leaf.prototype.fall = function(){
 
+      //叶子起始延迟时间
 
+      setTimeout(function(){
 
+        this.timer = setInterval(function(){
 
+          console.log(this)
 
+          if(this.img.offsetTop < screenHeight - this.img.offsetHeight){
 
+            this.img.style.top = this.img.offsetTop + 10 + 'px'
 
+          } else {
 
+            clearInterval(this.timer)
 
+          }
 
+        }.bind(this),20)
 
+        // console.log(this)
 
+      }.bind(this),Math.random()*2000)
 
+      // console.log(this)
 
+    }
 
+    var leafArr = []
 
+    for (var i = 0; i < 20; i++) {
 
+      //创建实例化对象
 
+      var leaf1 = new leaf()
 
+      leafArr.push(leaf1)
 
+      leaf1.init()
 
+    }
 
+    document.onclick = function(){
 
+      for(var i=0;i<leafArr.length;i++){
 
+        leafArr[i].fall()
 
+      }
 
+    }
 
   </script>
 
 </body>

+ 24 - 0
7_css3/1_test.html
Ver fichero 

@@ -0,0 +1,24 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      border-radius: 50%;
 
+      /* -webkit-border-radios: 5px   为了兼容 chrome浏览器  或者 safari */
 
+      /* -moz-border-radios: 5px  为了兼容火狐浏览器*/
 
+      /* -o-border-radios:5px;   为了兼容欧鹏浏览器*/
 
+      /* -ms-border-radios: 5px */
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 94 - 0
7_css3/2_选择器.html
Ver fichero 

@@ -0,0 +1,94 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    /* 关系选择符 */
 
+    /* div + p {
 
+      background: red;
 
+    } */
 
+    /* div ~ p {
 
+      background: red;
 
+    } */
 
+    /* 属性选择器 */
 
+    /* li[class]{
 
+      background: red;
 
+    } */
 
+    /* li[class='aaa']{
 
+      background: red;
 
+    } */
 
+    /* li[class~='a']{
 
+      background: red;
 
+    } */
 
+    /* 以a为首个字母 */
 
+    /* li[class^='a']{
 
+      background: red;
 
+    } */
 
+    /* li[class*='a']{
 
+      background: red;
 
+    } */
 
+    /* li[class$='b']{
 
+      background: red;
 
+    } */
 
+
 
+    /* li:last-child{
 
+      background: red;
 
+    } */
 
+    /* li:nth-child(4){
 
+      background: red;
 
+    } */
 
+    /* li:nth-child(even){
 
+      background: red;
 
+    } */
 
+    /* li:nth-child(odd){
 
+      background: orange;
 
+    } */
 
+
 
+    #div1::after {
 
+      content: 'xixixi';
 
+      background: pink;
 
+    }
 
+    #div1::before{
 
+      content: 'hahahhah';
 
+      background: green;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <!-- 
+    id选择器
 
+    class选择器
 
+    元素选择器
 
+    关系选择器
 
+    属性选择器
 
+    伪类选择器
 
+  -->
 
+  <p>000000000</p>
 
+  <div>111111111</div>
 
+  <div>xxxxxxxx</div>
 
+  <p>2222222222</p>
 
+  <p>3333333333</p>
 
+  <p>4444444444</p>
 
+  <br>
 
+  <ul>
 
+    <li class="aabb">11111</li>
 
+    <li>22222</li>
 
+    <li class="ba">33333</li>
 
+    <li>44444</li>
 
+    <li class="aaa">55555</li>
 
+    <li class="bbb">66666</li>
 
+    <li class="ab">777777</li>
 
+    <li>8888</li>
 
+    <li class="a">999999</li>
 
+    <li class=" a b">00000</li>
 
+    <div id="div1">哈哈哈哈哈哈哈哈哈</div>
 
+  </ul>
 
+</body>
 
+</html>

+ 31 - 0
7_css3/3_文本样式.html
Ver fichero 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      /* 文本阴影   左右  上下  清晰度  颜色 */
 
+      text-shadow: 5px 5px 5px red;
 
+
 
+      overflow: hidden;
 
+      white-space: nowrap ;
 
+      /* 文本溢出... */
 
+      text-overflow: ellipsis;
 
+
 
+      border-radius: 5px;
 
+      box-shadow: 2px 15px 30px rgb(0,0,0,0.5)
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    hahahahhaahhahahahhahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
 
+  </div>
 
+</body>
 
+</html>