华清远见移动互联应用

最新推荐文章于 2024-07-25 09:24:40 发布

solxxi

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量78

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/solxxi/article/details/128531238

版权

1.transform的用法

1平移translate(a)

a——水平平移的位置

a>0 水平向右平移

<0 向左平移

=0 保存原生位置不变

translate(a,b)

正正右下

/* 水平向右平移100px，垂直方向不变 */
/* transform: translate(100px,0);  */
/* 水平不变，垂直方向向下100px */
/* transform: translate(0,100px);  */
 /* 练习：水平向右，垂直向下（两个值：正正） */
/* transform: translate(100px,100px); */
            
/* 错误：不能在同一个元素上添加多个transform，后面的transform会覆盖掉前面的 */
/* transform: translateX(100px);
transform: translateY(100px); */

正负右上

发现：y轴向下为正，向上为负！

控制某一轴的平移方向

translateX 水平方向/translateY 垂直方向

2.scale(a)缩放

a——倍率

一个值：控制水平方向+垂直方向的缩放比例

0<a<1 缩小

a>1 放大

a=0 让元素消失/被隐藏了，但是不会删除元素

a=1 不变

a=-1 大小不变，镜像显示

a<0 负数，倒向

0<|a|<1 缩小

|a|>1 放大

a>1

只控制水平方向放大

transform: scaleX(a);

只控制垂直方向放大

transform: scaleY(a);

两个值:a 水平 b 垂直

transform: scale(a,b);

 /* 练习：水平方向不变，垂直缩小0.2倍 */
        /* transform: scale(1,0.2); */
        /* 练习：水平反向不变，垂直放大2 */
        /* transform: scale(-1,2); */
        
        /* 练习：水平反向不变，垂直反向缩小0.1倍 */
        /* transform: scale(-1,-0.1); */

3. rotate(a)旋转

a 旋转的角度单位deg

a>0 顺时针

a<0 逆时针

 /* transform: rotate(10deg); */
        /* transform: rotate(-10deg); */

        /* 绕着x轴的正方向的顺时针旋转 */
        /* 绕着x轴的正方向的逆时针旋转 */
        /* transform: rotateX(30deg); */
        /* transform: rotateX(-30deg); */

        /* 绕着Y轴的正方向的顺时针旋转 */
        /* transform: rotateY(30deg); */
        /* 绕着Y轴的正方向的逆时针旋转 */
        /* transform: rotateY(-30deg); */

        /* 旋转，绕着原点/中心点 */

4.transform-origin变化旋转基点

值：

关键字top、left、right、bottom、center

百分比

数字

两个值：

第一个值——水平方向上的偏移量，关键字选择left right center

第二个值——垂直方向上的偏移量，关键字选择top bottom center

 /* 基点在左上角 */
        /* transform-origin:0 0; */
        /* transform-origin:left top; */

        /* 基点在右下角 */
        /* transform-origin:100% 100%; */
        /* transform-origin:right bottom; */

5.画三角形

<style>
      .sanjiao{
        width: 0;
    height: 0;
        /* background-color: aquamarine; */

        /* 边框实现画三角形 */
        /* transparent透明度--设置颜色 */
        border-width: 200px  200px  300px  300px;
        border-color: transparent red red transparent;
        border-style: solid;
      }
    </style>

<body>
    <div class="sanjiao"></div>
  </body>

6.skew(a)倾斜

a——角度值，单位是deg

一个值——水平方向的拉伸

两个值——水平方向的拉伸，垂直方向的拉伸

注意：a为负值，代表反向拉伸

保持某一方向不变

1.可以设置该方向为0

2.skewY/skewX 设置

控制某一方向上的拉伸，另一个方向不变

skewX——水平方向的拉伸

skewY——垂直方向的拉伸

            /* 水平方向上的拉伸 */
            /* transform: skew(10deg); */
            /* transform: skew(-10deg); */

            /* 保持水平方向拉伸不变，垂直方向拉伸 */
            /* transform: skew(0,10deg);  */
            /* transform: skewY(10deg); */

            /* transform: skew(10deg,20deg); */

6.transform兼容性


            /* 谷歌/edge所能识别的样式 */
            -webkit-transform: skew(10deg,20deg);
            /* 火狐浏览器所能识别的样式 */
            -moz-transform:skew(10deg,20deg);

7.transition过渡动画

复合写法: property duration timing-function delay*/

  /* transition-property设置过渡动画生效的对应css样式属性 
                值:all_需要变化的所有样式都生效
                    none_没有样式生效变化效果
                    property_指定某一个需要变化的css样式属性生效 
                            _需要指定多个变化属性,就用逗号分隔
             */
             /* transition-property:width; */
             /* transition-property:width,height,background-color; */
             transition-property:all;
             /* transition-property:none; */
             
             /* 动画变化的持续时间 s/ms*/
             /* 如果有多个时间值,会对应到多个property */
             /* transition-duration: 2s,5s,10s; */
             transition-duration: 2s;
             
             /* 动画变化的延迟时间 */
             /* transition-delay: 2s; */
             /* 如果有多个时间值,会对应到多个property */
             /* transition-delay: 2s,5s,10s; */

             /* 动画速度曲线 */
             /* transition-timing-function: ease;
             transition-timing-function: ease-in; */
             /* transition-timing-function: linear; */
             transition-timing-function: cubic-bezier(.18,.83,1,.2);

实现添加/移出需要变化到的样式类名

 box.classList.add('active')
box.classList.remove('active')

steps(5, jump-both) 参数1：弹跳次数，参数2：弹跳方式

/* transition-timing-function: steps(5, jump-both); */

真实表盘

<!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>
      body {
        margin: 0;
      }
      ul {
        /* 清空默认样式 */
        margin: 0;
        padding: 0;
        list-style: none;

        width: 300px;
        height: 300px;
        background-color: black;

        /* 表盘的外边框 */
        border: 12px solid grey;

        /* 变圆 */
        border-radius: 50%;

        position: relative;
      }
      li {
        width: 10px;
        height: 10px;
        background-color: red;

        /* 设置小圆点 */
        border-radius: 50%;

        /* 设置每一个小圆点的定位 */
        position: absolute;
        top: 5px;
        left: 145px;

        /* 旋转基点在元素外 */
        transform-origin: center 145px;
      }

      li:nth-child(5n + 1) {
        background-color: white;
        height: 20px;
        border-radius: 10px;
      }

      /* 表盘的中心点 */
      .dot {
        width: 32px;
        height: 32px;
        background-color: aqua;

        position: absolute;
        top: 145px;
        left: 145px;

        border-radius: 50%;
        z-index: 1;
      }

      /* 绘制时针 */
      .hour {
        width: 32px;
        height: 70px;
        background-color: blue;

        position: absolute;
        top: 108px;
        left: 145px;

        /* 设置旋转基点 */
        transform-origin: center 55px;
        /* transform: rotate(45deg); */
      }

      /* 通过伪元素设置指针的箭头 */
      .hour::before {
        content: "";

        position: absolute;
        top: -40px;

        border-width: 20px 16px;
        border-color: transparent transparent blue transparent;
        border-style: solid;
      }

      /* 绘制分针 */
      .minute {
        width: 24px;
        height: 90px;
        background-color: green;

        position: absolute;
        top: 88px;
        left: 150px;

        /* 设置旋转基点 */
        transform-origin: center 74px;

        /* transform: rotate(180deg); */

      }

      /* 通过伪元素设置指针的箭头 */
      .minute::before {
        content: "";

        position: absolute;
        top: -40px;

        border-width: 20px 12px;
        border-color: transparent transparent green transparent;
        border-style: solid;
      }

      /* 绘制秒针 */
      .second {
        width: 16px;
        height: 140px;
        background-color: red;

        position: absolute;
        top: 60px;
        left: 154px;

        /* 设置秒针的旋转基点——针对自身 */
        /* 左右居中，上下固定 */
        transform-origin: center 100px;
        /* transform: rotate(935deg); */
      }

      /* 通过伪元素设置指针的箭头 */
      .second::before {
        content: "";

        position: absolute;
        top: -40px;

        border-width: 20px 8px;
        border-color: transparent transparent red transparent;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <!-- 表盘 -->
    <ul></ul>
    <!-- 旋转中心点 -->
    <div class="dot"></div>

    <!-- 时针 -->
    <div class="hour"></div>
    <!-- 分针 -->
    <div class="minute"></div>
    <!-- 秒针 -->
    <div class="second"></div>
  </body>
  <script>
    var mul = document.querySelector("ul");

    // 1-获取三个指针
    var hour = document.querySelector(".hour");
    var minute = document.querySelector(".minute");
    var second = document.querySelector(".second");
    

    for (var i = 0; i < 60; i++) {
      mul.innerHTML += "<li style='transform: rotate(" + i * 6 + "deg);'></li>";
    }

    // 2-设置初始时间
    // h = 3
    // m = 59
    // s = 50
    
    // 6-获取系统当前时间
    var myDate =new Date()
    var h = myDate.getHours()
    var m = myDate.getMinutes()
    var s = myDate.getSeconds()

    
    // 4-开启定时器
    setInterval(() => {
      s++;
      // 5-判断进位逻辑
      if(s>=60){
        s=0;
        m++;
        if (m>=60) {
          m=0;
          h++;
          if (h>=24) {
            h=0
          }
        }
      }
      // 3-对应到钟表上的时间旋转角度
      // 1h = 30deg
      //1m = 6deg
      //1s = 6deg
      hour.style.transform=`rotate(${h*30}deg)`
      minute.style.transform=`rotate(${m*6}deg)`
      second.style.transform=`rotate(${s*6}deg)`
    }, 1000);
  </script>
</html>

animation属性

/* 关键帧的用法 */

animation: gmrun1 2s linear;

/* 指定要调用的属性名 */

animation-name: gmrun1;

/* 动画持续时间 */

animation-duration: 2s;

/* 动画速度曲线 */

animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* 控制最终显示的帧的位置

both 最后一帧+初始帧

forwards 最后一帧

backwards 保留第一帧

animation-fill-mode:forwards;

/* 指定动画演示的次数

infinite 无限循环

animation-iteration-count: 3;

/* 用于js控制动画的暂停与播放

running 播放

paused 暂停

animation-play-state: running;

/* 控制动画的执行方向，一般设置在多次动画实现中

alternate 交替反向运行

reverse 反向

animation-direction: alternate;

}

1vw等同于视口宽度的百分之一

3d盒子制作

/* 父容器设置3D空间 */

.box{

width: 200px;

height: 200px;

/* background-color: aquamarine; */

/* 1-构造3D空间 */

transform-style: preserve-3d;

/* 2-构造景深 */

perspective: 500px;

/* 3-观察立体图形的角度 */

perspective-origin: 500% 200%;

<!-- + 子元素是**不同类型**的排序————————真正位置上的

+ :first-child 匹配**父元素中的第一个子**元素，该元素必须是父元素中真正的第一个子元素

+ :last-child 匹配**父元素中的最后一个子**元素，该元素必须是父元素中真正的最后一个子元素

+ :nth-child(n) 改变**所有行**数样式，2n+1奇数行，**2n偶**数行，括号里填你要改变的行数；

+ n可以是关键字：**even偶数**，**odd奇数**

+ 子元素是**同类型**间的排序

+ :first-of-type 匹配**父元素中的同元素类型（div\p\span等）间的**第一个子元素

+ :last-of-type 匹配**父元素中的同元素类型（div\p\span等）间的**最后一个子元素

+ :nth-of-type(n) 匹配**父元素的同元素类型（div\p\span等）间的**第n个子元素 -->

渐变色

/* 渐变色只会作用域背景图片background-image这个属性 */

/*

参数1——角度/ to 方向

参数2——开始的颜色

参数3——结束的颜色

/* background-image: linear-gradient(to right,red,blue); */

/* background-image: linear-gradient(45deg,red,blue); */

/*

参数——开始颜色,结束颜色

/* background-image: radial-gradient(white,black,white,black) */

/* background-image: radial-gradient(red,blue,green,yellow) */

/*

1. 重复线性渐变

参数1——角度/ to 方向

参数2——第1个颜色开始位置

参数3——第1个颜色结束位置

参数4——第2个颜色开始位置

参数5——第2个颜色结束位置

2. 重复径向渐变

参数1——第1个颜色开始位置

参数2——第1个颜色结束位置

参数3——第2个颜色开始位置

参数4——第2个颜色结束位置

/* background-image: repeating-linear-gradient(to right,red 0px, red 10px,blue 0px,blue 30px); */

分栏布局

/* 分栏的数量 */

column-count: 2;

/* 分栏线的样式 */

column-rule: 1px solid red;

/* 以下属性，设置了分栏数就不生效 */

/* 每个栏目内容与分栏线的间距 */

column-gap: 20px;

/* 每个栏目的宽度 */

column-width: 20px;

响应式布局

 /* 只要屏幕宽度 < 800px就生效 */
      @media screen and (max-width: 800px) {
        .box {
          background-color: yellow;
        }
      }
      
      /* 只要屏幕宽度 > 800px就生效 */
      @media screen and (min-width: 800px) {
        .box {
          background-color: red;
        }
      }

      /* 只要屏幕 300px> 宽度 > 600px就生效 */
      @media screen and (max-width: 600px) and (min-width: 300px){
        .box {
          background-color: green;
        }
      }

jQuery

<!-- 使用jQuery -->
  <!-- 1-引入jQuery的js文件 -->
  <script src="jquery-3.6.3.min.js"></script>
  <script>
    // 2-jquery基础语法 $('selctor').action()
    // selctor————css相关的选择器名
    // action()——操作方法、事件函数

    console.log($);

    //js获取的dom对象
    var box = document.querySelector(".box");
    console.log(box);

    //获取jquery对象——不会局限于数量，返回的都是 数组集合
    var $box = $('.box')
    console.log($box);

    var $box1 = $('.box1')
    console.log($box1);

    //用jquery的方法获取dom对象
    var $boxDom = $('.box')[0]
    console.log($boxDom);

    var $box1Dom = $('.box1')[1]
    console.log($box1Dom);

    //用get函数获取jquery的dom对象
    //get的参数代表 该元素在jquery数组对象里面的下标
    var $boxGet = $('.box').get(0)
    console.log($boxGet);

jQuery筛选器

 // var $boxFirst = $('.box').get(0)
    // var $boxFirst = $('.box:first-child')

    // 获取第一个/最后一个
    // var $boxFirst = $('.box').first()
    // console.log($boxFirst);
    // var $boxLast = $('.box').last()
    // console.log($boxLast);

    // // eq(下标值从0开始)
    // var $box4 = $('.box').eq(3)[0]
    // console.log($box4);

    
    // 前一个——同级
    var $spanPrev = $('.ispan').prev()
    console.log($spanPrev);

    //前所有——同级，但是出来的数据顺序是倒叙的
    var $spanPrevAll = $('.ispan').prevAll()
    console.log($spanPrevAll);
    console.log($spanPrevAll[0]);

    // 后一个——同级
    // var $spanPrev = $('.Bspan').next()
    // console.log($spanPrev);

    // //后所有——同级，出来的数据顺序  顺的
    // var $spanPrevAll = $('.Bspan').nextAll()
    // console.log($spanPrevAll);
    // console.log($spanPrevAll[0]);


// 筛选器8：parent()
    console.log($('.span2').parent());

    // 筛选器9：parents() _ 找到所有父亲
    console.log($('.span2').parents());

    // 筛选器10：siblings()_找同级兄弟
    console.log($('.span1').siblings());

    // 筛选器11：find()_找子级满足条件的元素
    console.log($('.box').find('div'));

    //筛选器12：index()_找元素的索引
    console.log($('.box:nth-child(4)').index());
    
    //筛选器13：closest('B') _  找到 选择器A 的最近满足条件B的 开始于当前元素 的一个节点
    console.log($('.span2').closest('.box'));

jQuery操作元素

 // //html()——同innerHTML()
    // console.log($('.box').html());
    // 在某个元素内部添加/替换元素
    // console.log($('.box').html(`<div>1</div>`));



    // // text()——同innerText()
    // console.log($('.box').text());
    // console.log($('.box').text("123"));
    // console.log($('.box').text("<div>1</div>"));
    //页面只会显示<div>1</div> 不能进行转换



    //val()——读取/修改表单元素的值
   console.log($('input').val());
   console.log($('input').val("好上加好"));

jQuery操作类名

//注意 都不要加 小数点
    //hasClass() —— 判断类名是否存在,返回值为 true/false
    // console.log($('div').hasClass('box1'));

    // addClass()_ 添加类名
    // console.log($('div').addClass('box4'));

    // removeClass()_删除类名
    // console.log($('div').removeClass('box2'));

    //toggleClass()
    //获取切换按钮——只要原生有当前类名，他就会删除；没有当前类名，就会添加
    // console.log($('div').toggleClass('box2'));
   
    var btn = document.querySelector('button')
   btn.addEventListener('click',function () {
    $('div').toggleClass('box2')
   })

jQuery操作样式

 // // 获取指定样式 .css('样式属性名')
    // var box1css = $('.box1').css('width')
    // var box1css = $('.box1').css('opacity')
    // console.log(box1css);
    
    // // 修改指定样式名的值 .css('样式属性名','值')
    // var box2css = $('.box1').css('width','200px')
    // console.log(box1css);
    // // console.log(box2css);

    //通过函数来给样式属性名赋值
    //参数1  要修改的样式属性名
    // $('.box1').css('width',function (index,v) {
    //     // //index 每一个下标
    //     console.log(index);
    //     // //v 每一个对应的width 的初始值
    //     console.log(v);

    //     if (index % 2 == 0) {
    //         //如果下标 是2的倍数 ，就为其的width改值______通过return返回的就是要修改的值
    //         return '300px'
    //     }
    // })

    //修改多个样式 css({样式1:值,样式2:值})
    // $('.box1').eq(0).css({
    //     width:200,
    //     'background-color':'red'
    // })

jQuery操作属性

  // //attr()
    // console.log($('div').attr('class'));//box1
    // // 修改原生属性class的值
    // console.log($('div').attr('class','box2'));
    // console.log($('div').attr('class'));//box2

    // console.log($('div').attr('myclass1'));//abc
    //  // 修改自定义属性myclass1的值
    // console.log($('div').attr('myclass1','abcd'));
    // console.log($('div').attr('myclass1'));//abcd


    //removeAttr()——既可以移出自定义属性，也可以移出原生属性
    // console.log($('div').removeAttr('class'));
    // console.log($('div').removeAttr('myclass1'));


    //prop()——查询到原生属性值，也可以修改原生属性，并且，修改后的原生属性值，会显示在页面的标签中
    // console.log($('div').prop('class'));
    // console.log($('div').prop('class','box2'));
    // // console.log($('div').prop('class'));

    // console.log($('div').prop('myclass1'));//不可查询最初自定义的属性值
    // console.log($('div').prop('myclass1','abcd'));//修改自定义的属性值，但是不会显示在页面的标签中，只会出现在属性里
    // console.log($('div').prop('myclass1'));//获取到修改后的自定义的属性值


    //removeProp()——原生属性+原来的自定义属性不可移出
    // 只可移出，由prop添加的自定义属性
    console.log($('div').removeProp('class'));
    console.log($('div').removeProp('myclass1'));

    // console.log($('div').prop('myclass3','3333'));//添加属性
    // console.log($('div').attr('myclass3','3333'));//添加属性
    console.log($('div').removeProp('myclass3'));

jQuery操作元素

 // 创建一个jquery对象元素
    var myY = $('<div class="box2" style="width: 200px;height:200px;background-color: tomato;">我想添加的盒子</div>')

    // 添加元素
    // A被添加的元素（父），B添加的元素（子）
    //A.append(B)___向A的最后一个子节点添加元素
    // $('.box1').eq(0).append(myY)
    $('body').append(myY)

    //$(B).appendTo(A)  B必须通过$来进行操作
    //把B添加到A里面
    // $(myY).appendTo($('.box1').eq(2))
    // myY.appendTo($('.box1').eq(2))

    //prepend()——向A的第一个子节点添加元素
    // $('body').prepend(myY)
    //prependTo()——把$(B)添加到A里
    // $(myY).prependTo($('body'))

    
    //向指定的位置前/后添加元素
    // before()
    // $('.box1').eq(1).before(myY)
    // //after()
    // $('.box1').eq(1).after(myY)

    //insertBefore()/insertAfter()___把。。（子）。。添加到..（父）.里面去
    // $(myY).insertBefore($('.box1').eq(1))
    // $(myY).insertAfter($('.box1').eq(1))


 // width()/height()
    console.log($('div').width());
    console.log($('div').height());

    // innerWidth()/innerHeight()   width+左padding+右padding
    console.log($('div').innerWidth());
    console.log($('div').innerHeight());

    // outerWidth()/outerHeight()   width+左boder+右boder+左padding+右padding
    console.log($('div').outerWidth());
    console.log($('div').outerHeight());

    // outerWidth(true)/outerHeight(true)  width+左boder+右boder+左padding+右padding +左margin + 右margin
    console.log($('div').outerWidth(true));
    console.log($('div').outerHeight(true));

jQuery偏移量

  //offset()_____返回的对象值都是{top: aaa, left: bbb}___包含了非定位的偏移量
   console.log($('.box1').offset());
   console.log($('.box2').offset());
   console.log($('.box3').offset());

    //position()_____返回的对象值都是{top: aaa, left: bbb}——————只会算定位的偏移量
    console.log($('.box1').position());
   console.log($('.box2').position());
   console.log($('.box3').position());

jQuery获取滚动条的位置

 //scrollLeft()__滚动条距离左边的px
console.log($('html').scrollLeft());

    
    //scrollTop()__滚动条距离上边的px
    console.log($('html').scrollTop());

jQuery事件绑定on

//基础事件绑定on('监听的事件名click\mouseover',function(){})
    // $('.box3').on('click',function () {
    //   console.log(1111);
    // })

    //事件委托绑定事件——父委托给子 on('监听的事件名click\mouseover','交给谁委托的选择器',function(){})
    // 委托事件完成后，父亲就不会触发事件，而接到委托的选择器才会触发事件
    // $(".box2").on("click", ".box3", function () {
    //   console.log(1111);
    // });

    // 批量事件绑定 on({事件1:function () {事件1逻辑},事件2:function () {事件2逻辑}})
    // $(".box3").on({
    //   click: function () {
    //     console.log(1111);
    //   },
    //   mouseover: function () {
    //     console.log(22);
    //   },
    // });

    //one()____事件只会触发一次
    // $('.box3').on('click',function () {
    //   console.log(1111);
    // })
    $('.box3').one('click',function () {
      console.log(1111);
    })

常见jQuery事件

//click('事件处理函数')

//mouseover('事件处理函数')

//mouseout('事件处理函数')

//change('事件处理函数')——————只作用于表单

//hover('事件处理函数')——————移入/移出都会触发的函数

jQuery解绑

//off('需要解绑的事件处理函数')

// $('.box2').off('click')

//off('需要解绑的事件处理函数',所要指定解绑的事件名)

$('.box2').off('click',B)

jquery动画函数

// 基本动画函数

// 参数1：运动时间——不写就瞬间完成

// 参数2：运动曲线__jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件

//参数3：动画完成时的执行函数

show()————显示

hide()————隐藏

toggle()————切换

finish()————结束——瞬间结束

折叠动画函数

slideDown()

slideUp()

slideToggle()

渐隐渐显动画函数

fadeIn()

fadeOut()

fadeToggle()

fadeTo()——————多一个指定到的透明度 0~1

jquery的ajax请求

$.ajax({

//发起/访问的请求地址

url: "https://www.bilibili.com",

//请求方法

method: "GET",

//请求成功时的回调函数

success(res) {

console.log(res);

// 请求失败时的回调

error(reason) {

console.error(reason);

complete() {

console.log("无论请求成功还是失败，都会调用 complete里面的内容");

});

canvas基本使用

<!-- 画布的宽高，只能在属性里设置 -->
    <canvas class="canv" width="400" height="400">
        <img src="img/photo4.jpg" alt="">
        当浏览器版本过低，才会看到这里面的内容
    </canvas>

 // 1-通过原生js获取到canvas
    var myCan = document.querySelector('canvas')
    //2-构造一个canvas 2D画布空间
    var myCont = myCan.getContext('2d')

    // 向画布里画图片
    // 1-获取图片
    var myimg = document.querySelector('img')
    //2-监听图片是否加载成功
    myimg.addEventListener('load',function () {
        //3-图片加载成功后，在画布空间里画图片
        myCont.drawImage(myimg,0,0)
    })

canvas线条绘制

 //1-获取canvas对象
    var myCan = document.getElementById('cavs')

    //2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
    var myCont = myCan.getContext('2d')


    //画布，类似于坐标系，坐标原点在左上角，x轴向右为正，y轴向 下！为正
    
    //3-指定绘画的起始位置
    myCont.moveTo(200,200)


    // 4-指定绘画的结束位置
    myCont.lineTo(400,400)


    //设置绘画的颜色
    myCont.strokeStyle = "red"


    //设置线条的宽度
    myCont.lineWidth = 10


    //设置线条结束端点的样式__square/butt(默认)/round
    myCont.lineCap = "round"


    //5-执行绘制
    myCont.stroke()

用线条画图

 //多个lineTo
    //画倒三角形
    //1-获取canvas对象
    var myCan = document.getElementById('cavs')

    //2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
    var myCont = myCan.getContext('2d')

    myCont.moveTo(100,100) //确定绘制的起始点
    myCont.lineTo(200,100)
    myCont.lineTo(150,150)
    myCont.lineTo(100,100)



    //多个moveTo——起始点有多个
    //画正三角
    myCont.moveTo(150,150) //确定绘制的起始点
    myCont.lineTo(200,200)
    myCont.lineTo(100,200)
    myCont.lineTo(150,150)


    myCont.lineWidth = 10
    //此时的两个三角形并没有成独立的个体
    myCont.stroke()

闭合空间

 //beginPath()/closePath()——一对，相当于分区
    
    //1-获取canvas对象
    var myCan = document.getElementById('cavs')

    //2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
    var myCont = myCan.getContext('2d')
    
    //画倒三角形
    // 3-beginPath() 真正的开始绘制路径
    myCont.beginPath()

    //4-确定绘制的起始点
    myCont.moveTo(100,100) 
    //5-确定第1次的结束点
    myCont.lineTo(200,100)
    //5-确定第2次的结束点
    myCont.lineTo(150,150)
    //5-确定第3次的结束点——因为有closePath，就不需要再绘制最后一个点
    // myCont.lineTo(100,100)

    myCont.lineWidth = 10
    myCont.strokeStyle = "red"

    // 6-closePath() 确定真正的结束绘制路径，会在当前位置绘制一条到起始点的线，真正形成封闭图形
    myCont.closePath()
    // 7-执行绘制
    myCont.stroke()


    // //画正三角
    // 3-beginPath() 真正的开始绘制路径
    myCont.beginPath()

    myCont.moveTo(150,150)
    myCont.lineTo(200,200)
    myCont.lineTo(100,200)


    myCont.lineWidth = 20
    myCont.strokeStyle = "blue"

    // 6-closePath() 确定真正的结束绘制路径，会在当前位置绘制一条到起始点的线，真正形成封闭图形
    myCont.closePath()
    // 7-执行绘制
    myCont.stroke()

填充空间

//修改填充颜色————必须再执行填充之前
    // myCont.fillStyle = "red";

    //填充渐变色
    //1-必须先创建渐变色块
    // createLinearGradient(x0当前填充快在画布中的起始X坐标,y0当前填充快在画布中的起始y坐标,x1当前填充快在画布中的结束X坐标,y1结束y坐标)
    var myG = myCont.createLinearGradient(150, 150, 200, 200);
                                    
                                    //起始圆心的x,y,起始圆半径
                                    //结束圆心x,y,结束圆半径
    // var myG = myCont.createRadialGradient(200, 200,100, 100, 100,100);
    // addColorStop(渐进范围,'颜色')，为渐进色块填充颜色
    // myG.addColorStop(0, "red");
    // myG.addColorStop(0.5, "blue");
    // myG.addColorStop(1, "yellow");
    //2-渐变色块赋给fillStyle
    // myCont.fillStyle = myG;


    //图片填充____一定要写在加载事件完成里
    var mImg = document.querySelector('img')
    window.onload=function(){

      var mCimg = myCont.createPattern(mImg,"no-repeat");
      myCont.fillStyle = mCimg;
      myCont.fill();
    }

    //进行填充

    // 6-closePath() 确定真正的结束绘制路径，会在当前位置绘制一条到起始点的线，真正形成封闭图形
    myCont.closePath();
    // 7-执行绘制
    myCont.stroke();

    //fillStyle---纯色 √

    //fillStyle---渐变色

    //fillStyle---对象

矩形绘制

 //1-获取canvas对象
    var myCan = document.getElementById("cavs");

    //2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
    var myCont = myCan.getContext("2d");
    
    //空心矩形 strokeRect()
    // myCont.strokeRect(起始点x坐标,起始点y坐标,宽,高)
    // myCont.strokeRect(200,200,100,100)

    //实心矩形 fillRect()
    myCont.fillStyle = "red"
    myCont.fillRect(200,200,100,100)

清空画布

//clearRect
    var oC = document.getElementById("cavs");
    var context = oC.getContext("2d"); //获取canvas画布2d空间

    // 实心矩形
    context.fillStyle = '#a61b29'//填充颜色要写到绘制之前
    context.fillRect(100,100,200,200)

    // 矩形区域清除
    // clearRect(起始点x坐标,起始点y坐标,宽,高)
    context.clearRect(100,100,100,100)
    
    //清空整个画布
    context.clearRect(0,0,400,400)

圆弧绘制

 // 弧度的计算=角度数*（Math.PI/180°）

    //1-获取canvas对象
    var myCan = document.getElementById("cavs");

    //2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
    var myCont = myCan.getContext("2d");

    // 起始角度 0 ----起始弧度 0*（Math.PI/180°）------ 右边3点钟方向为 0 度
    // 结束角度 180 --- 结束弧度 180*（Math.PI/180°）
    // arc(100圆心的x坐标,100圆心的y坐标,50圆的半径,0圆弧的起始弧度,180*(Math.PI/180)圆弧的结束弧度,true逆时针画/false顺时针)

    myCont.beginPath()
    myCont.arc(100,100,50,0,180*(Math.PI/180),true)
    myCont.closePath()
    myCont.stroke()

    myCont.beginPath()
    myCont.arc(300,100,50,0,180*(Math.PI/180),true)
    myCont.closePath()
    myCont.stroke()

    myCont.beginPath()
    myCont.arc(200,200,100,0,180*(Math.PI/180))
    myCont.closePath()
    myCont.stroke()//执行绘制线条

扇形绘制

//线+圆弧
    // 弧度的计算=角度数*（Math.PI/180°）
    //1-获取canvas对象
    var myCan = document.getElementById("cavs");

    //2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
    var myCont = myCan.getContext("2d");

    myCont.beginPath()
    //3-绘制起始位置
    myCont.moveTo(200,200)

    //4-画圆弧
    myCont.arc(200,200,100,0,27*(Math.PI/180))

    // myCont.closePath()
    myCont.strokeStyle = "red"
    // myCont.lineWidth = 10
    myCont.fillStyle = "red"

    myCont.fill()
    //5-执行绘制
    myCont.stroke()

钟表的绘制

 //线+圆弧
    // 弧度的计算=角度数*（Math.PI/180°）
    //1-获取canvas对象
    var myCan = document.getElementById("cavs");

    //2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
    var myCont = myCan.getContext("2d");

    // 1-画圆
    myCont.beginPath();
    myCont.arc(200, 200, 100, 0, 360 * (Math.PI / 180));
    myCont.closePath();
    myCont.stroke();

    //2-画刻度线
    for (var i = 0; i < 60; i++) {
      myCont.beginPath();

      myCont.moveTo(
        Math.cos(i * 6 * (Math.PI / 180)) * 100 + 200,
        Math.sin(i * 6 * (Math.PI / 180)) * 100 + 200
      );

      myCont.lineTo(
        Math.cos(i * 6 * (Math.PI / 180)) * (i % 5 == 0 ? 80 : 90) + 200,
        Math.sin(i * 6 * (Math.PI / 180)) * (i % 5 == 0 ? 80 : 90) + 200
      );
      myCont.closePath();
      myCont.stroke();
    }

    
    // 设定初始时间
    // var h = 5;
    // var m = 59;
    // var s = 50;
    
    //获取真实时间
    var date = new Date()
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();

    // 3-画指针
    //时针
    myCont.beginPath();

    myCont.moveTo(200, 200);

    // -90把指针还原到真实位置
    myCont.lineTo(
      Math.cos((h * 30 - 90) * (Math.PI / 180)) * 30 + 200,
      Math.sin((h * 30 - 90) * (Math.PI / 180)) * 30 + 200
   
    );
    console.log(666);

    myCont.strokeStyle = "red";
    myCont.closePath();
    myCont.stroke();

    //分针
    myCont.beginPath();

    myCont.moveTo(200, 200);

    // -90把指针还原到真实位置
    myCont.lineTo(
      Math.cos((m * 6 - 90) * (Math.PI / 180)) * 50 + 200,
      Math.sin((m * 6 - 90) * (Math.PI / 180)) * 50 + 200
    );

    myCont.strokeStyle = "green";
    myCont.closePath();
    myCont.stroke();

    //秒针
    myCont.beginPath();

    myCont.moveTo(200, 200);

    // -90把指针还原到真实位置
    myCont.lineTo(
      Math.cos((s * 6 - 90) * (Math.PI / 180)) * 70 + 200,
      Math.sin((s * 6 - 90) * (Math.PI / 180)) * 70 + 200
    );

    myCont.strokeStyle = "blue";
    myCont.closePath();
    myCont.stroke();

    setInterval(() => {
      //设置清空画布__要重新绘制圆盘
      myCont.clearRect(0, 0, 400, 400);

      // 1-画圆
      myCont.beginPath();
      myCont.arc(200, 200, 100, 0, 360 * (Math.PI / 180));
      myCont.strokeStyle = "black";
      myCont.closePath();
      myCont.stroke();

      //2-画刻度线
      for (var i = 0; i < 60; i++) {
        myCont.beginPath();

        myCont.moveTo(
          Math.cos(i * 6 * (Math.PI / 180)) * 100 + 200,
          Math.sin(i * 6 * (Math.PI / 180)) * 100 + 200
        );

        // (i % 5 == 0 ? 80 : 90) 判断是否达到小时的刻度位置
        myCont.lineTo(
          Math.cos(i * 6 * (Math.PI / 180)) * (i % 5 == 0 ? 80 : 90) + 200,
          Math.sin(i * 6 * (Math.PI / 180)) * (i % 5 == 0 ? 80 : 90) + 200
        );
        myCont.closePath();
        myCont.stroke();
      }

      //设置时间的进位
      s++;
      if (s == 60) {
        s = 0;
        m++;
        if (m == 60) {
          m = 0;
          h++;
          if (h == 24) {
            h = 0;
          }
        }
      }
      //时针
      myCont.beginPath();

      myCont.moveTo(200, 200);

      // -90把指针还原到真实位置
      myCont.lineTo(
        Math.cos((h * 30 - 90) * (Math.PI / 180)) * 30 + 200,
        Math.sin((h * 30 - 90) * (Math.PI / 180)) * 30 + 200
      );

      myCont.strokeStyle = "red";
      myCont.closePath();
      myCont.stroke();

      //分针
      myCont.beginPath();

      myCont.moveTo(200, 200);

      // -90把指针还原到真实位置
      myCont.lineTo(
        Math.cos((m * 6 - 90) * (Math.PI / 180)) * 50 + 200,
        Math.sin((m * 6 - 90) * (Math.PI / 180)) * 50 + 200
      );

      myCont.strokeStyle = "green";
      myCont.closePath();
      myCont.stroke();

      //秒针
      myCont.beginPath();

      myCont.moveTo(200, 200);

      // -90把指针还原到真实位置
      myCont.lineTo(
        Math.cos((s * 6 - 90) * (Math.PI / 180)) * 70 + 200,
        Math.sin((s * 6 - 90) * (Math.PI / 180)) * 70 + 200
      );

      myCont.strokeStyle = "blue";
      myCont.closePath();
      myCont.stroke();
    }, 1000);

图片的绘制

 //1-如果html页面中没有图片标签，就需要创建图片源
    //先创建图片对象
    var mImg = new Image()
    mImg.src = "photo4.jpg"

    
    //2-如果有图片标签，就可以获取图片源
    // var mImg = document.querySelector('img')
    
    //监听图片加载是否成功
    mImg.onload = function () {
      //如果加载成功
      console.log(1);
      //在画布里画图片
      context.drawImage(mImg,0,0)
        //参数1：所要绘制的图片源--元素 
        //参数2、3 ：截取的图片x,y坐标____在画布内部的坐标
        //参数4、5：截取的图片宽、高____在画布内部的图片宽高
        //参数6、7 ：在画布中绘制的图片x,y坐标
        //参数8、9 ：在画布中绘制的图片宽、高
      context.drawImage(mImg,0,0,240,240,200,200,100,100)
    }

多媒体标签

+ width 标签宽度

+ height 标签高度

+ **controls** 控制面板：包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放

+ **muted** 布尔属性，代表是否静音

+ **autoplay** 自动播放：可能会破坏用户体验，所以应该尽可能避免

+ **src** 媒体源

+ **loop** ：布尔属性，代表是否循环 -->

<!-- 音频标签

常见的音频格式：mp3\ogg\wav

<source> 一般用于给多媒体标签添加多个媒体源，当某一个音源不能正常播放的时候，就会自动切换到能播放的音源（按顺序来）

属性 poster 指定video的海报，用于在视频处于下载中的状态时显示，如果没有设置，就默认为视频源的第一帧画面

swiper

<!-- 2-搭建swiper框架 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>

<script src="swiper-bundle.min.js"></script>
  <script>
    // 3-初始化swiper
    var mySwiper = new Swiper(".swiper", {
      direction: "horizontal", // vertical垂直切换选项  horizontal水平方向

      effect: "fade", //设置切换效果 fade淡入
      fadeEffect: {
        //一般用于内部元素大小不一致,一般情况是开启状态,true
        //false就不能隐藏前一个元素
        crossFade: true,
      },

      autoplay: true, //开启自动播放

      //   loop: true, // 循环模式选项，第一个Slide和最后一个Slide，都会被复制一份,操作的时候要注意控制真实的+复制的
      //定义的是   a b c
      //实际网页中需要操作的 c a b c a

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        //如果需要修改被选中状态的样式与未选中状态的样式——建议，选中状态的样式名写在未选中状态的后面，不然会被覆盖掉
        bulletActiveClass: "my-bullet-active",
      },

      // 如果需要前进后退按钮---导航按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
        // 自定义前进后退按钮不可用时的样式名
        disabledClass: "my-button-disabled",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },

      //   on监听事件
      on: {
        slideChangeTransitionEnd: function () {
          if (this.isEnd) {
            this.navigation.$nextEl.css("display", "none");
          } else {
            this.navigation.$nextEl.css("display", "block");
          }
        },
        click: function (s) {
          console.log(s);
          this.navigation.$prevEl.css("display", "none");
          this.navigation.$nextEl.css("display", "none");
        },
      },
    });
  </script>

// 3-必须要进行swiper初始化，才可以真正使用swiper——创建swiper对象

//参数1：swiper大框架，Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'

//参数2：对swiper每一个组件/模块，进行相关的配置操作，是以JSON对象格式编写

var mySwiper = new Swiper(".swiper", {

// 设置滚动方向_horizontal：横向； vertical：纵向

direction: "horizontal",

//设置滚动条

scrollbar: {

el: ".swiper-scrollbar",

//开启自动播放————文档--组件--autoplay

// autoplay: {

// delay: 1000, //设置切换到下一个slide的时间间隔

// disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。默认为true

// },

// 设置是否循环---文档--配置选项--无限循环--autoplay

loop: true,

// 设置切换样式————文档--组件--effects

//每一个样式都可以单独对其设置相关的配置

//例如fade可以通过设置fadeEffect的参数crossFade来调整是否关闭前一个的slide

// effect: "cube",

// cubeEffect: {

// slideShadows: true,//控制是否开启阴影：开启了立体样式之后，没有被光照射的面，就会暗一点

// shadow: true,//控制是否开启投影

// shadowOffset: 200,//投影距离

// shadowScale: 0.2,//投影缩放比例

// },

effect: "fade",

// 设置分页器————文档--组件--pagination

pagination: {

//指向哪一个分页器，一般不去修改

el: ".swiper-pagination",

//设置分页器的样式

// type:"fraction"

//如果需要设置自定义active样式，最方便的办法，直接在它原有的样式名上修改

// 原有的样式名 swiper-pagination-bullet-active

// 设置前进\后退按钮

navigation: {

nextEl: ".swiper-button-next", //后退按钮

prevEl: ".swiper-button-prev", //前进按钮

});

// 4-绑定鼠标移入移出事件

mySwiper.el.onmouseover = function () {

// 用js控制按钮显示和隐藏——找到按钮——mySwiper.navigation.$nextEl/$prevEl

// mySwiper.navigation.$nextEl.css("display", "block");

// mySwiper.navigation.$prevEl.css("display", "block");

mySwiper.navigation.$nextEl.removeClass("hide");

mySwiper.navigation.$prevEl.removeClass("hide");

};

mySwiper.el.onmouseout = function () {

// 用js控制按钮显示和隐藏——找到按钮——mySwiper.navigation.$nextEl/$prevEl

// mySwiper.navigation.$nextEl.css("display", "none");

// mySwiper.navigation.$prevEl.css("display", "none");

// 通过display：none来控制隐藏，不会保留原有的位置

//建议通过添加class类名来控制隐藏显示

console.log(mySwiper.navigation.$nextEl);

mySwiper.navigation.$nextEl.addClass("hide");

mySwiper.navigation.$prevEl.addClass("hide");

};

微信小程序

1-新建页面的操作，建议选择方法2
注意：app.json里面的pages属性里的数据 === pages文件夹数据

方法1-注意：需要检查 app.json里面的pages属性里的数据是否添加成功刚刚新建的页面路径
右键pages文件夹——新建文件夹——自命名，例如demo1——右键新建的文件夹（demo1）——新建page——命名为刚刚新建的文件夹名字，不加任何后缀

方法2-注意：需要检查 pages文件夹里是否添加成功
直接复制 app.json里面的pages属性里路径，修改第2项、第3项，两项内容命名要一致，要加“,”,但是最后一条就不加“，”

2-以下内容文档位置：微信开放文档——框架——小程序配置——全局配置

"entryPagePath": "pages/demo1/demo1",//默认进入小程序后，第一个看得到的页面，可以通过左上角的“房子”按钮，回到真正的小程序首页，即app.json里面的pages属性里的第一条数据
如果没有设置，默认就显示app.json里面的pages属性里的第一条数据页面，并且没有“房子”按钮

app.json里面的pages属性里的第一条数据：首页/当前显示的页面

pages：注册成功的页面路径信息

"window":{"backgroundColor":"#00f"}//控制下拉刷新窗口的背景颜色

3-list:[
{ "pagePath": "pagePath",//01-当前的这个导航选项框所对应的页面路径,路径一般就是从pages属性里面的路径复制即可，不允许重复！ 02-如果页面路径没有出现再list中，那么该页面就不会显示tabbar
"text": "text",//当前的这个导航选项框下面的文本内容
"iconPath": "iconPath",//当前的这个导航选项框未选中状态的图片路径
"selectedIconPath": "selectedIconPath"//当前的这个导航选项框选中状态的图片路径
}
]
list————底部tabbar的列表，内部包含的数据对象个数，就是tab所显示的个数——最多5个，最少2个

4-常用的快捷键
快捷当前光标的代码复制到上一行、下一行 alt+shift+上/下建
快捷移动当前光标的代码 alt+上/下建

solxxi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
华清远见移动互联应用

"entryPagePath": "pages/demo1/demo1",//默认进入小程序后，第一个看得到的页面，可以通过左上角的“房子”按钮，回到真正的小程序首页，即app.json里面的pages属性里的第一条数据。+ :nth-child(n) 改变**所有行**数样式，2n+1奇数行，**2n偶**数行，括号里填你要改变的行数；+ :last-child 匹配**父元素中的最后一个子**元素，该元素必须是父元素中真正的最后一个子元素。
复制链接

扫一扫