【day1】培训日志1 （指针时钟的实现，vue安装（本文章不提供教程，自己百度），最后vue实现小案例（简单红绿灯（通过按钮改变颜色），一个选择按钮的简单动画效果））

本文链接：https://blog.csdn.net/chirp_CQ/article/details/117950411

上午：

前端html，css和js实现刻度表盘，指针的旋转（时间实时更新）

最终结果展示：

小知识：

利用三角函数控制表盘的数字显示位置

最终代码程序 html 含css 和 js ：

<!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>teacher_clock</title>

    <style>
        .clock{
            height: 500px;
            width: 500px;
            border-radius: 50%;
            border:3px solid rgb(110, 232, 248);
            font-size: 30px;
            position:relative;   /*父元素有定位之后  子元素才会相对它来进行定位*/
        }
        .number{
            position: absolute;
            top: 0px;    /*利用三角函数进行计算     */
            left: 50%;/*继承  父元素  */

        }
        .scale{
            /*transform  变换   translate 平移 */
            transform: translate(-50%,-50%);   /*相对自身*/
        }
        .second{
            width: 2px;
            height: 200px;
            background-color: black;
            position: absolute;
            top: 50px;
            left: 249px;
            transform-origin: center 200px;   /*  代表 x 和y横纵坐标*/
        }
        .minute{
            width: 4px;
            height: 150px;
            background-color: black;
            position: absolute;
            top: 100px;
            left: 248px;  /*指针变粗了  所以左移动了1px的像素*/
            transform-origin: center 150px;   /*这个坐标是相对  标签本身的坐标*/
        }
        .hour{
            width: 6px;
            height: 110px;
            background-color: black;
            position: absolute;
            top: 140px;
            left: 247px;
            transform-origin: center 110px;   /*这个是相对标签本身的坐标*/
        }

    </style>
</head>
<body>
    <div class="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>

    </div>

    <script>
        var clock = document.querySelector('.clock');/*  queryselector  只选一个  queryselectorAll 选择同名所有*/
        //有一点区别就是  那个queryselectorAll  返回的是一个数组  后面有个appendChild  数组是不能使用这个的
        //而queryselector  的返回值就是一个  对应类名对象的标签
        var center ={
            x: 250,
            y: 250,
            
        };
        var radius = 250 - 20;   //时钟的半径   数字半径 要小于表盘的 半径
        for(var i = 0; i < 12; i++){
            //创建元素
            var scale = document.createElement("div");  //添加一个空的div  需要将数字添加进去
            if(i === 0){   //三等号  判断  全等  js语法
                scale.innerText = 12;
            }else{
                scale.innerText = i;
            }   
            scale.setAttribute("class","scale");   //给这个标签  添加一个类属性

            //计算角度
            var alpha = i * 30 * Math.PI/180;   /*  用于计算 */

            var x = center.x + radius*Math.sin(alpha);   /*一个正弦函数  一个余弦函数*/
            var y = center.y - radius*Math.cos(alpha);

            //es2015(es6)中的语法    下面的那个${x}
            scale.style = `position:absolute; top: ${y}px; left: ${x}px;`;  /*   注意  那个${x}  是一个数值  没有给单位的话不能显示   */
            //上面这个是个  反引号  就是 键盘左上角esc下面那个

            clock.appendChild(scale);

        }

        //下面开始控制指针的位移
        var second = document.querySelector(".second");
        var minute = document.querySelector(".minute");
        var hour = document.querySelector(".hour");

        function update(){
            var now = new Date();
            var s = now.getSeconds();   //获取秒
            var m = now.getMinutes();  //获取分
            var h = now.getHours()  % 12;  //获取小时   24小时制  下午会继续旋转，作为一个严谨  对12取余
            second.style = `transform: rotate(${s * 6 }deg)`;   //一分钟也是6 度
            minute.style = `transform: rotate(${(m + s / 60) *6 }deg)`;   //一分钟 6 度
            hour.style = `transform: rotate(${(h + m / 60 + s / 3600) * 30 }deg)`;   //一个小时30度
            //注意：单位deg前面不能有 空格  不然指针就转不动了

        }

        update();
        setInterval(update,1000);  /*1000毫秒之后*/
    </script>
</body>
</html>

下午：

js中const和let的用法：

在程序用有变化的变量如for循环中的 i 它的声明类型改为let 其余在过程中无实质变化的var更改为const

安装了一下午的vue环境，因为众多学生的电脑出现情况（各种报错）

先记录一下运行vue的方式，暂时我只有这种比较笨拙的方式：

找到vue的工程（在对应的工程目录下输入cmd指令，运行cmd）：

然后运行 npm run serve 指令来运行，后面在vscode中更改了vue后，就可以直接通过浏览器对8080端口访问来刷新

晚上：

vue 入门

差值表达式：

<template>
    <div> {{msg}} </div>
</template>

<script>
export default {
    data() {
        return{
           msg: 1,
        },    

    }

}

</script>

点击事件

<template>
	<div @click="onClick"></div>
</template>

<script>
export default {
  methods: {
    onClick () {
      // to do  执行相应的操作  比如说可对export 中return的数据进行修改
    }
  }
}
</script>

动态属性（下方是一个box 通过点击来改变颜色）

<template>
	<div :class="'box ' + currentColor" @click="onClick"></div>
</template>

<script>
export default {
  data () {
    return {
      currentColor: 'green'
    };
  },
  methods: {
    onClick () {
      this.currentColor = this.currentColor === 'red' ? 'green' : 'red';
    }
  }
}
</script>

<style>
  .box {
    width: 100px;
    height: 100px;
  }
  .green {
    background: green;
  }
  .red {
    background: red;
  }
</style>

红绿灯书写：

<template>
  <div id="app">
   
  <div :class="'box ' + light1"></div>

  <div :class="'box ' + light2"></div>
  <button @click="changeLight" >点我换灯</button>
  </div>
</template>

<script>
//默认导出的 对象，可以理解为当前vue 组件的配置项
export default {
  name: 'App',
  data (){
    return{
      count: 1,
      currentColor:'green',   //当前颜色
      light1:'grey',
      light2:'green',
    };
  },     

  //页面方法
  methods: {
    changeLight(){
      
      if(this.light1 === "grey"){
        this.light1 = "red";
        this.light2 = "grey";
      }
      else{
        this.light1 = "grey";
        this.light2 = "green";
      }
      
    },
  },

}
</script>

<style>
#app {
  font-size: 100px;
}
.box{
  width: 200px;
  height: 200px;
  border: solid;
  border-radius: 50%;
  float: left;
}
.green{
  background-color: green;
}
.red{
  background-color: red;
}
.grey{
  background-color: grey;
}
button{
  margin-left: 120px;
}

</style>

上面红绿灯效果展示（我转换为了gif图）：

其实就是通过给某一个标签进行类名的改变来实现效果的展示。

作业布置：

要求实现一个单选的switch，如下图所示：

当天晚上做出来的效果如下：

相应的vue源码如下所示：

<template>
  <div id="app">
  <div :class="'box ' + light2"></div>
  <button @click="changeLight" >点我换灯</button> -->
  <div :class="'back ' + backColor" @click="changeSwitch"></div>
  <div :class="'btn ' + btnCircle" @click="changeSwitch"></div>

  </div>
</template>

<script>
//默认导出的 对象，可以理解为当前vue 组件的配置项
export default {
  name: 'App',
  data (){
    return{
      
      backColor:'back1',  //分别对应两种状态
      btnCircle:'btn1',  //又是分别对应两种状态
    };
  },     //这个逗号不能少  是default 下面的

  //页面方法
  methods: {
    
    changeSwitch(){
      if(this.btnCircle === 'btn1'){ /*  btn1 是处于关闭状态 */
        this.btnCircle = 'btn2';
        this.backColor = 'back2';
      }
      else{
        this.btnCircle = 'btn1';
        this.backColor = 'back1';
      }
    },
  },

}
</script>

<style>
#app {
  font-size: 100px;
}

/* 下方对switch 选择框的按钮进行样式控制 */
.back{
  width: 50px;
  height: 20px;
  position: absolute;
  left: 50px;
  top: 50px;
  border-radius: 10px;   /* 控制边缘  */
}
.back1{
  background-color: grey;   /*未选择状态 */
}
.back2{
  background-color: green;  /*选择状态 */
}
.btn{
  width: 17px;
  height: 17px;
  border-radius: 50%;
  position: absolute;
  border-color: rgb(159, 208, 250);
  border: 1px;
  
  background-color: rgb(218, 214, 214);

  
  top: 52px; /* 与上边缘的距离没有改变  所以放在上一个里面了 */
}
.btn1{
  left: 52px;/*未选择 */
}
.btn2{
  left: 81px; /*选择 */
}


</style>

结束语

好了，第一天的实训已经结束了，现在是第二天的0:50了，差不多可以了，也不知道到了明天到底该何去何从，应该选的是java方向，但是他今天来问了一下，java要学的东西和涉及到的东西都太多了，被问到时瞬间明白了自己是多么的弱鸡，所以其实要学的东西还有很多，如果真的是走程序员这条路的话，还有很多的东西需要学，自己已经大三下学期了，该为自己后面规划下了