202303 - 微6g博客【记录生活分享心得】

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) 浏览(405)

求数组中最大值 JavaScript

方法一：

arr = [1, 3, 5, 79, 11];
            let max = arr[0];
            arr.forEach(function(v, i) {
                if (v > max) {
                    max = v;
                }
            })
console.log("最大值：", max)

方法二：

arr = [1, 3, 5, 79, 11]
            let max = arr[0];
            for (let i = 0; i < arr.length; i++) {
                if (arr[i] > max) {
                    max = arr[i]
                }
            }
            console.log("最大值", max)

小诸葛最大值 3-12

评论(0) 浏览(379)

商品计算 JavaScript

张大头开了一个超市，平时所有商品在进货价的基础上，提价40%销售，到国庆节这天要做全场活动，在平时售价的基础上全场打8折。
请编写函数计算所有商品的打折价。
如：洗衣粉进货价 3.7元，法式小面包进货价6.2元，苹果进货价 2.66元。（考点：函数定义、函数调用、参数传递、返回值）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
<script>
            function money(name, a) {
                let result = [a + (a * 0.4)] * 0.8
                console.log(`[${name}]价格：${result}元`);
                return result;
            }
            money("洗衣服", 3.7);
            money("法式小面包", 6.2);
            money("苹果", 2.66);
        </script>

    </body>
</html>

小诸葛商品结算 3-12

评论(0) 浏览(356)

函数封装计算商品价格 JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 场景：编写一个函数返回商品总价。情况一：小红购买了5双袜子，每双1.8元，运费3元，她有张2元的优惠卷。
        情况二：小刘购买了3盒牙膏，每盒25元，商家包邮，没有优惠卷。（考点：函数的定义、函数调用、参数默认值、编程思维） -->

        <script>
            function CalTotal(name, num, price, reight = 0, coupon = 0) {
                /*name=商品名称
                num=商品数量
                prince=商品价格
                reight=运费
                coupon=优惠券*/
                let result = num * price + reight - coupon
                return `${name}商品价格：${result}元`;
            }
            console.log(CalTotal("袜子", 5, 1.8, 3, 2));
            console.log(CalTotal("牙膏", 3, 25));
        </script>
    </body>
</html>

小诸葛商品结算 3-12

评论(0) 浏览(327)

JS三目运算比大小 JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            function getThreeMax(x, y, z) {
                return x > y ? (x > z ? x : z) : (y > z ? y : z);
            }
            max = getThreeMax(8, 0, 1)
            console.log("最大值:", max);
        </script>
    </body>
</html>

小诸葛比大小 3-12

评论(0) 浏览(340)

计算2数累计之和 JavaScript

计算2数累计之和

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p {
                margin: 0 auto;
                height: 73px;
                width: 660px;
                background-color: seagreen;
                text-align: center;
            }

            input {
                outline: none;
                height: 50px;
                margin-top: 11px;
                border: 0;
                vertical-align: bottom;
            }

            button {
                height: 52px;
                width: 100px;

                border: 0;
            }
        </style>
    </head>
    <body>
        <!-- 输入两个数，计算2个数之间的整数之和 -->

        <p>
            <input type="text" name="" id="a" placeholder="请输入起始值">
            ~
            <input type="text" name="" id="b" placeholder="请输入目标值">
            <button onclick="js()">计算</button>
            <input type="text" name="" id="c">
        </p>
        <script>
            function js() {
                let A = parseInt(a.value);
                let B = parseInt(b.value);
                let sum = 0;

                if (A < B) {
                    for ( ; A <= B; A++) {

                        sum = sum + A;
                        document.getElementById("c").value = sum;
                    }
                } else {
                    document.getElementById("c").value = "参数错误";
                }
            }
        </script>
    </body>
</html>

小诸葛 2数累计和 3-10

评论(0) 浏览(348)

数值判断 JavaScript

工资判断输出
根据工资判断选择出行工具

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            .box {
                margin: 20px auto;
                border-radius: 5px;
                font-size: 16px;
                font-weight: bold;
                width: 400px;
                height: 200px;
                background-color: #00aa7f;
                padding-top: 20px;
                box-shadow: -2px 7px 12px #000000;
            }

            input {
                border: 0;
                margin: 5px;
                height: 30px;
                line-height: 30px;
                padding: 0 15px;
                box-shadow: inset -2px 3px 6px #000000;
                outline: none;
            }

            p {
                color: #fff;
                margin: 5px;
            }

            button {
                box-shadow: -2px 2px 2px #000000;
                vertical-align: middle;
                height: 30px;
                border: 0;
                width: 80px;
            }

            button:hover {
                color: #55aaff;
            }

            button:active {
                box-shadow: inset -2px 2px 2px #000000;
            }
        </style>
    </head>
    <body>
        <!-- 4. 编程题：根据存款的多少决定使用什么交通工具：10万元以上，就买小汽车上班; 有5000元以上，就买摩托上班；
        如果有300元以上，就买自行车上班；如果有20元以上，
        就坐公交上班；否则，就只好步行上班。使用一个变量money保存存款数，
        对该变量进行判断以输出所用的交通工具。（考点：if多分支结构） -->
        <div class="box">
            <h1 style="text-align: center;">收入查询</h1>
            <p>您的工资：<input type="text" name="" id="s" placeholder="请输入你的工资"> <button onclick="cx()">查询</button></p>
            <p>出行推荐：<input type="text" id="j"></p>
        </div>

        <script>
            function cx() {
                //console.log("测试按钮是否关联成功！")
                let a = s.value;
                if (a == "" || isNaN(a) == true) {
                    alert("请输入您的工资")
                    s.value = null;
                } else if (a > 100000) {
                    document.getElementById("j").value = "小汽车";
                    console.log(j.value)

                } else if (a > 5000) {
                    document.getElementById("j").value = "摩托";
                    console.log(j.value)

                } else if (a > 300) {
                    document.getElementById("j").value = "自行车";
                    console.log(j.value)
                    console.log("自行车")
                } else if (a > 20) {
                    document.getElementById("j").value = "公交车";
                    console.log(j.value)

                } else {
                    document.getElementById("j").value = "走路";
                    console.log(j.value)
                }
            }
        </script>
    </body>
</html>

小诸葛工资判断 3-10

评论(0) 浏览(356)

性别判断 JavaScript

性别判断

代码

<!-- 2. 编程题：定义变量gender保存性别，再使用if语句进行判断。如果是男，
在网页中输出“先生你好”，如果是女，在网页中输出“小姐你好”。（考点：if分支语句） -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style>
            .name{
                box-shadow: 0px 1px 4px #000000;
                border-radius: 15px;
                text-align: center;
                font-size: 20px;
                width: 300px;
                margin: 20px auto;
                background-color: #55aaff;
            }
            input{
                margin-top: 15px;
                width: 210px;
                height: 30px;
                background-color: #ffffff;
                border: 0;
                box-sizing: border-box;
                padding: 0 15px;
                box-shadow: inset 0px 1px 4px #000000;
                outline-color: #ffffff;
            }
            button{
                font-size: 20px;
                width: 150px;
                height: 40px;
                border: 0;
                background-color: #ffffff;
                margin-bottom: 15px;
                box-shadow: 0px 1px 4px #000000;
                outline-color: #ffffff;
            }
            button:hover{
                box-shadow: inset 0px 1px 4px #ffffff;
            }
            button:active{
                box-shadow: inset 0px 1px 4px #000000;
            }
            span{
                text-align: center;
                margin: 0 auto;
                width: 150px;
                height: 30px;
                line-height: 30px;
                line: height;: 30px;
                background-color:#fff;
                display: block;
                box-shadow: inset 0px 1px 4px #000000;
            }
        </style>
    </head>
    <body>
        <div class="name">
             <p style="color: #fff; font-weight: bold;">性别：<input type="text" id="gender" placeholder="请输入性别" ></p>
             <p><span id="name" ></span></p>
             <p><button onclick="log()">注册</button></p>
        </div>

        <script>
             function log(){

                 //console.log("绑定按钮测试")
                 if (gender.value === "男"){
                 document.getElementById("name").innerHTML = "先生您好";
                 console.log("先生您好")

                 }
                 else if(gender.value === "女"){
                 document.getElementById("name").innerHTML = "女士您好";
                 console.log("女士您好")

                 }
                 else{
                     alert("请输入性别");
                     gender.value=""
                }

             }
            /*let man = "先生您好";
            let lady = "女士您好";
            let gender ="男"

            if (gender === "男"){
            document.write(man)
            }

            else if(gender === "女"){
             document.write(lady)
            }*/
        </script>
    </body>
</html>

小诸葛性别判断 3-10

评论(0) 浏览(415)