代码教程 - 微6g博客【记录生活分享心得】

js三种注册事件 JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button class="btn">1</button>
        <button onclick="btn2()">2</button>
        <button class="btn3">3</button>
        <script>
            const Btn = document.querySelector(".btn")
            Btn.onclick=function(){
                console.log("在DOM上注册事件")
            }
            function btn2(){
                console.log("自定义函数")
            }

            const Btn3 = document.querySelector(".btn3")
            Btn3.addEventListener("click",function(){
                console.log("W3C标准注册事件")
            })
        </script>
    </body>
</html>

小诸葛注册事件 3-20

评论(0) 浏览(431)

时钟前端

<!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>拟态时钟</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #d7e1f0;
        }

        /* 外壳 */
        .con {
            width: 300px;
            height: 300px;
            margin: 200px auto;
            cursor: default;
            user-select: none;
        }

        /* 圆 */
        .clock {
            width: 300px;
            height: 300px;
            padding: 3px;
            border-radius: 50%;

            /* 拟态 */
            box-shadow: 10px 10px 15px 8px rgba(0, 0, 0, 0.18),
                -10px -10px 15px 8px rgba(255, 255, 255, 0.626),
                inset 8px 8px 20px 0px rgba(0, 0, 0, 0.05);

            position: relative;
        }

        /* 数字组 */
        .clock-nums {
            margin: 0;
            padding: 0;
            position: absolute;
            width: 30px;
            height: 30px;
            /* 居中 */
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        /* 数字节点盒子 */
        .item {
            color: blue;
            list-style-type: none;
            font-size: 20px;
            font-weight: 600;
            width: 30px;
            height: 30px;

            position: absolute;

            /* 设置元素旋转的基点到圆心 */
            transform-origin: 50% 150px;
            /* 先移动再旋转，切记先移动，再旋转 */
            transform: translate(0, -135px) rotate(calc(var(--i)*30deg));

        }

        /* 数字 ，让数字旋转回来。保存竖直的角度 */
        .item text {
            display: inline-block;
            text-align: center;
            line-height: 30px;

            width: 100%;
            height: 100%;

            transform: rotate(calc(var(--i)*-30deg));
        }

        /* 旋转动画 */
        @keyframes ro {
            from {
                transform: rotate(-180deg);
            }

            to {
                transform: rotate(180deg);
            }
        }

        /* 时针头部 */
        .hour_pointer {
            /* 居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            /* 头部圆的大小 */
            height: 7px;
            width: 7px;
            background-color: rgb(156, 83, 83);
            box-shadow: 0px 0px 0 4px rgb(156, 83, 83);
            border-radius: 50%;

            /* 设置基点在圆心 */
            transform-origin: 50% 50%;
            /* 设置24小时转1圈 */
            animation: ro 43200s linear infinite;
            /* 为防止事件对准前的闪动，先隐藏，其他指针也有同样的设置 */
            display: none;
        }

        /* 伪元素设置时针 */
        .hour_pointer::before {
            content: "";
            /* 与头部连接 */
            position: absolute;
            left: 0;

            /* 设置宽高 */
            height: 65px;
            width: 7px;

            /* 设置颜色和边角 */
            background-color: rgb(156, 83, 83);
            border-radius: 100px;
        }

        /* 分针 */
        .minute_pointer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            height: 5px;
            width: 5px;
            border-radius: 50%;

            background-color: rgb(57, 176, 180);
            /* 为了让它与时针形成同心圆，需要增加边框，弥补宽高的变小 */
            border: 1px solid rgb(57, 176, 180);

            box-shadow: 0px 0px 0 2px rgb(57, 176, 180);

            transform-origin: 50% 50%;
            animation: ro 3600s linear infinite;
            display: none;
        }

        .minute_pointer::before {
            content: "";
            position: absolute;
            left: 0;
            height: 85px;
            width: 5px;
            background-color: rgb(57, 176, 180);
            border-radius: 100px;
        }

        .seconde_pointer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            height: 3px;
            width: 3px;
            background-color: rgb(253, 0, 232);
            /* 同样为了形成同心圆，设置边框 */
            border: 2px solid rgb(253, 0, 232);
            border-radius: 10px;
            transform-origin: 50% 50%;

            animation: ro 60s linear infinite;
            display: none;
        }

        .seconde_pointer::before {
            content: "";
            position: absolute;
            left: 0;
            height: 100px;
            width: 3px;
            background-color: rgb(253, 0, 232);
            border-radius: 100px;
        }

    </style>
</head>
<body>
    <!-- 外层盒子 -->
    <div class="con">
        <!-- 时钟的圆 -->
        <div class="clock">
            <!-- 时钟数字 -->
            <ul class="clock-nums">
                <li class="item" style="--i:1"><text>1</text></li>
                <li class="item" style="--i:2"><text>2</text></li>
                <li class="item" style="--i:3"><text>3</text></li>
                <li class="item" style="--i:4"><text>4</text></li>
                <li class="item" style="--i:5"><text>5</text></li>
                <li class="item" style="--i:6"><text>6</text></li>
                <li class="item" style="--i:7"><text>7</text></li>
                <li class="item" style="--i:8"><text>8</text></li>
                <li class="item" style="--i:9"><text>9</text></li>
                <li class="item" style="--i:10"><text>10</text></li>
                <li class="item" style="--i:11"><text>11</text></li>
                <li class="item" style="--i:12"><text>12</text></li>
            </ul>
            <!-- 时针 -->
            <div class="hour_pointer" id="HourP"></div>
            <!-- 分针 -->
            <div class="minute_pointer" id="MinuP"></div>
            <!-- 秒针 -->
            <div class="seconde_pointer" id="SecoP"></div>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        // 获取当前时，分，秒，并且准换成秒为单位
        let starS = new Date().getSeconds()
        let starM = new Date().getMinutes() * 60
        let starH = new Date().getHours() * 3600
        // 获取时针，分针，秒针节点
        let HourP = document.querySelector('#HourP')
        let MinuP = document.querySelector('#MinuP')
        let SecoP = document.querySelector('#SecoP')

        // 设置动画，通过设置 负值的延迟，调准指针。
        HourP.style.animation = `ro 43200s ${-starH}s linear infinite`
        MinuP.style.animation = `ro 3600s ${-starM}s linear infinite`
        SecoP.style.animation = `ro 60s ${-starS}s linear infinite`

        // 个指针就位后显示
        HourP.style.display = "block";
        MinuP.style.display = "block";
        SecoP.style.display = "block";
    }
</script>
</html>

小诸葛时钟 3-19

评论(0) 浏览(394)

js获取对象的长度 JavaScript

let obj = {name: 'John', age: 30, city: 'New York'};
let count = 0;
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    count++;
  }
}
console.log(count); // 3

小诸葛获取对象长度 3-16

评论(0) 浏览(470)

判断数组元素是否大/小于平均值 JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            // 定义一个数组arr=[23,3,15,7,28,1,40,25,38]，将该数组中小于等于平均数的数字整合到一个新数组arr1中，将大于平均数的数字整合到一个新数组arr2中。
            // （考点：定义数组、遍历数组、操作数组元素方法）  
            let arr = [23, 3, 15, 7, 28, 1, 40, 25, 38]
            let arr1 = []; //小于平均数
            let arr2 = []; //大于平均数
            let sum = 0;

            for (i = 0; i < arr.length; i++) {
                sum = sum + arr[i]
            }
            sum = sum / arr.length
            for (i = 0; i < arr.length; i++) {
                if (sum >= arr[i]) {
                    arr1[arr1.length] = arr[i];
                }
                else{
                    arr2[arr2.length] = arr[i];

                }
            }
            console.log("初始数组：", arr)
            console.log("平均值：", sum)
            console.log("【小于】平均值", arr1)
            console.log("【大于】平均值", arr2)
        </script>
    </body>
</html>

小诸葛数组 3-13

评论(0) 浏览(406)

数组的拼接 JavaScript

假如你和寝室的另外3个同学一起出去吃午饭。①用一个数组nameArr表示你们的名字。
②分别吃的是鱼香肉丝、青椒炒肉、红烧牛肉、番茄炒西红柿。用数组foodArr表示你们吃的4种菜。
③分别打印出每个人吃的菜。例如：”张三吃的是鱼香肉丝”。（考点：数组遍历、数组元素访问）

方法一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            let nameArr = ["鱼香肉丝", "青椒肉丝", "红烧牛肉", "番茄炒鸡蛋"]
            let foodArr = ["张三", "李四", "王二", "盖亚"];
            foodArr.forEach(function(v, i) {
                console.log(`${v}喜欢吃${nameArr[i]}`)
            })
        </script>
    </body>
</html>

方法二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            let nameArr = ["鱼香肉丝", "青椒肉丝", "红烧牛肉", "番茄炒鸡蛋"]
            let foodArr = ["张三", "李四", "王二", "盖亚"];
            for (i = 0; i < nameArr.length; i++) {
                console.log(`${foodArr[i]}吃${nameArr[i]}`)
            }
        </script>
    </body>
</html>

小诸葛数组拼接 3-13

评论(0) 浏览(356)

定义一个数组，包含9个任意的整数，求该数组中奇数的个数 JavaScript

方法一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
            let sum = 0;
            let j = 0;
            for (i = 0; i < arr.length; i++) {
                if (arr[i] % 2 == 0) {
                    sum = sum + 1;
                } else {
                    j = j + 1
                }
            }

            console.log(`偶数有： ${sum}个`)
            console.log(`奇数有： ${j}个`)
        </script>
    </body>
</html>

方法二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            // 拓展题：定义一个数组，包含9个任意的整数，求该数组中奇数的个数，要求使用forEach方法。（考点：定义数组、forEach遍历数组、判断奇偶）
            let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
            let sum = 0;
            let j = 0;
            arr.forEach(function(v,i) {
                if (v % 2 == 0) {
                    sum = sum + 1;
                } else {
                    j = j + 1;
                }
            })

            console.log(`偶数有： ${sum}个`)
            console.log(`奇数有： ${j}个`)
        </script>
    </body>
</html>

小诸葛数组判断奇数偶 3-13

评论(0) 浏览(380)

判断本月休息天数 JavaScript

假如本月有30天，第1天开始上课。严格按照上2天自习一天，上2天休息一天的作息来执行。请使用数组month保存30个元素，rest保存休息的天数，study保存自习的天数，得出这个月总共休息多少天，自习多少天

判断本月休息天数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            let month = []; //定义一个空数组
            let rest = 0; //休息
            let study = 0; //自习
            let sk = 0
            for (var i = 1; i <= 30; i++) {
                month.push(i); //利用for循环吧1-30传入给数组
                if (month.length % 3 == 0 && month.length % 2 != 0) {

                    rest = rest + 1; //休息天数
                    console.log(`${month.length}号休息`)

                } else if (month.length % 6 == 0) {
                    study = study + 1; //自习天数
                    console.log(`${month.length}号【自习】`)
                } else {
                    sk = sk + 1; //上课天数
                }
            }

            console.log("日历：", month)
            month.join('号')
            console.log(`累计休息${rest}天`)
            console.log(`累计自习${study}天`)
            console.log(`正常上课${sk}天`)
        </script>
    </body>
</html>

小诸葛休息天数 3-13

评论(0) 浏览(350)

Js给空数组生成1-n的值 JavaScript

方法一：循环赋值

var arr = new Array(100);
for(var i=0;i<arr1.length;i++){
arr1[i] = i;
}

方法二：push方法实现

var arr = new Array();
for(var i=0;i<100;i++){
 arr.push(i);
}

方法三：while

var arr = new Array();
var i = 0;
while(i<100){
arr.push(i);
i++;
}

方法四：do while

var arr = new Array();
var i = 0;
do{
arr.push(i);
i++;
}
while(i<100)

方法五：Object.keys

var arr = Object.keys(Array.apply(null, {length:100})).map(function(item){
return +item;
});

方法六：Array.from

var arr = Array.from({length:100}, (v,k) => k);

方法七：Array.from

var arr = Array.from(Array(100), (v,k) =>k);

方法八：new Array

var arr = new Array(100).keys();

方法九：setInterval

var arr = [];
var i = 0;
var timer = setInterval(function(){
 arr[i] = ++i;
 if(i>=100){
  clearInterval(timer);
 }
},1);

方法十：递归

var arr = [];
var i = 0;
function MakeArray(num){
if(i<num){
arr[i] = i++;
 MakeArray(num);
 }
 return arr;
}

方法十一：map

var arr = new Array(100).toString().split(',').map(function(item,index){
 return index;
});

小诸葛生成值 3-13

评论(0) 浏览(404)