JavaScript day04

最新推荐文章于 2024-09-13 08:33:26 发布
最新推荐文章于 2024-09-13 08:33:26 发布
阅读量29 收藏
点赞数
文章标签： javascript css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73572762/article/details/132217101
版权

01 轮播图练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 250px;
            height: 400px;
            border: 1px #f00 solid;
            margin: 40px auto 0;
            position: relative;
            overflow: hidden;
        }
        #list{
            display: flex;
            width: 1000px;
            transform: translateX(0);

            /* 添加过渡动画 */
            transition: all 1s;
        }
        #list img{
            width: 250px;
            height: 400px;
        }

        #box{
            width: 100%;
            height: 40px;
            position: absolute;
            background: rgba(0, 0, 0, 0.5);
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #box span{
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
        #box span:hover{
            background: #f60;
            box-shadow: 0 0 5px 5px #ccc;
        }
        .change{
            width: 40px;
            height: 40px;
            background: #f60;
            color: #fff;
            line-height: 40px;
            position: absolute;
            top: 180px;
            cursor: pointer;
            text-align: center;
        }
        #left{left: 0;}
        #right{right: 0;}
    </style>
</head>
<body>
    <!-- 外层的div，包含图片列表 -->
    <div class="wp">
        <div id="list">
            <img src="../images/1.png" alt="">
            <img src="../images/2.png" alt="">
            <img src="../images/3.png" alt="">
            <img src="../images/4.png" alt="">
        </div>

        <!-- 分页器 -->
        <div id="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

        <!-- 左右切换 -->
        <span class="change" id="left"><</span>
        <span class="change" id="right">></span>
    </div>
</body>
</html>
<script>
    // 获取需要点击的分页器
    let box = document.getElementById('box');
    let spanBox = box.getElementsByTagName('span');

    // 获取列表元素
    let list = document.getElementById('list');

    // 点击分页器
    spanBox[0].onclick = function(){
        list.style.transform = 'translateX(0)';
        n=0;
    };
    spanBox[1].onclick = function(){
        // console.log('点击了第二个图片');
        list.style.transform = 'translateX(-250px)';
        n=1; 
    };
    spanBox[2].onclick = function(){
        list.style.transform = 'translateX(-500px)';
        n=2;
    };
    spanBox[3].onclick = function(){
        list.style.transform = 'translateX(-750px)';
        n=3;
    };


    // 获取左右按钮
    let leftBtn = document.getElementById('left');
    let rightBtn = document.getElementById('right');

    // 设置当前是第一张图片, 从0开始
    let n = 0;

    // 点右边的按钮
    rightBtn.onclick = function(){
        n++;
        n = n>=3 ? 3 :n;
        console.log(n);
        list.style.transform = 'translate(-'+n*250+'px)'
    }

    // 点左边的按钮
    leftBtn.onclick = function(){
        // n = n<=0 ? 0 : --n;   //先运算再赋值
        n<=0 ? n=0 : n--;  //在三元中的表达式赋值
        console.log(n);
        list.style.transform = 'translate(-'+n*250+'px)'
    }
</script>

02 if语句

程序结构
1.基本结构(顺序执行)
2.分支结构(分支语句)
3.循环结构(循环语句)
分支语句
if(判断条件){
	只有当if中的判断条件为true时，{}中的代码才能被执行，如果判断条件不为true，则跳过{}中的代码，程序继续往下执行
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if语句</title>
</head>
<body>
    
</body>
</html>
<script>
    
	if (0 || 6){
    	console.log('苏妲己');
	}
	console.log('武曌');
</script>

if(判断条件){
	如果判断条件为true，则执行这里的代码
}else{
	如果判断条件 不为 true，则执行else中的代码
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if语句</title>
</head>
<body>
    
</body>
</html>
<script>
	let num1 = 20;
	if(num1>100){
    	console.log('20>100');
	}else{
    	console.log('20<100');
	}
</script>

if可以单独使用，else必须结合if一起使用；else指的是除了满足if条件之外的所有条件

03 if语句练习

分支语句的级联语句
if(判断条件){
	
}else{

}
在使用if语句的时候，else的范围有时候会比较大，因此可以使用else
if对具体的情况进行细分
else if 可以根据情况设置多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if语句练习</title>
</head>
<body>
    数据1:<input type="number" id="num1" value=""> <br/>
    数据2:<input type="number" id="num2" value=""> <br/>
    <button id="btn">比较大小</button>
</body>
</html>
<script>
  
    let score = 70;
    if (score == 100) {
        console.log('奖励一个对象');
    } else if (score >= 90) {
        console.log('优秀');
    } else if (score >= 80) {
        console.log('良好');
    } else if (score >= 70) {
        console.log('中等');
    } else if (score >= 60) {
        console.log('及格');
    } else {
        console.log('开除学籍');
    }

    if(3>4){
        console.log('周末出去玩');
    }else{
        console.log('周末不出去玩');
    }

    3>4?console.log('周末出去玩'):console.log('周末不出去玩');




    let num1 = document.getElementById('num1');
    let num2 = document.getElementById('num2');
    let btn = document.getElementById('btn');

    btn.onclick = function (){
        if(num1.value>num2.value){
            alert('下课');
        }else if(num1.value==num2.value){
            alert('吃饭')
        }else{
            alert('放假');
        }
    }

</script>
判断是否为闰年
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if语句练习</title>
</head>
<body>
    输入年份: <input type="number" id="year" value="">
    <button id="btn2">查看是否是闰年</button>
</body>
</html>
<script>

    /*
    判断闰年的条件：
        1.能被400整除
        2.能被4整除，不能被100整除
    */ 
    let year = document.getElementById('year');
    let btn2 = document.getElementById('btn2');
    btn2.onclick = function(){
        if(year.value%400==0){
            alert(year.value+'年是闰年');
        }else if(year.value%4==0 && year.value%100!=0){
            alert(year.value+'年是闰年')
        }
        else{
            alert(year.value+'年是平年')
        }
    }

</script>

04 水仙花数练习

数学方法
Math.floor(num)  把数字num向下取整，舍弃小数
Math.ceil(num) 把数字num向上取整，舍弃掉小数，整数部分加1
Math.round(num) 把数字num四舍五入
水仙花数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水仙花数</title>
</head>
<body>
    <input type="number" value="" id="txt">
    <button id="btn">判断</button>
</body>
</html>
<script>
   console.log(Math.floor(3.95)); 
   console.log(Math.ceil(3.05));
   console.log(Math.round(3.45));

   let txt = document.getElementById('txt');
   let btn = document.getElementById('btn');
   btn.onclick = function(){
        let v = txt.value - 0;
        let v1 = Math.floor(v/100);
        let v2 = Math.floor(v%100/10);
        let v3 = Math.floor(v%10);
        if(v==v1*v1*v1+v2*v2*v2+v3*v3*v3){
            alert(v+'是水仙花数');
        }else{
            alert(v+'不是水仙花数');
        }
    };
</script>

05 switch语句

switch 语句，特点是 默认贯穿整个结构，可以使用关键字break阻止贯穿
break的作用是阻断当前结构语句，可以阻断 switch 也可以阻断循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch语句</title>
</head>
<body>

</body>
</html>
<script>
    /*
    switch 语句，特点是 默认贯穿整个结构，可以使用关键字break阻止贯穿
    break的作用是阻断当前结构语句，可以阻断 switch 也可以阻断 循环
    */
    let count = 80;
    switch (count) {
        case 30:
            console.log('天涯何处觅知音');
            break;//阻断switch 语句，跳出switch
        case 70:
            console.log('一曲肝肠断');

        // 如果上面的条件都不能满足，则会执行default里面的代码
        default:
            console.log('天涯何处无返芳草+default');
            break;
    }



    let num = 1;
    switch (num) {
        case 1:
            console.log('当前是1');
            num++;
        case 2:
            console.log('当前是2');
            num++;
            break;
        
        default:
        console.log('当前是default');
            num--;
            break;
    }
    console.log(num);
</script>

06 for循环

js中的循环
	1.for循环
	2.while
	3.do-while

for(循环变量的初始值;循环条件;循环变量的增值){
	循环体(就是循环要执行的代码)
}
对循环条件的理解，是变量满足循环条件的时候，才会执行循环体中的代码
只有循环结束，循环后面的代码才能执行
执行过程：
	1.首先判断循环变量的初始值，是否满足循环条件
	2.如果满足循环条件，则执行循环体中的代码
	3.循环体中的代码执行完毕，执行循环变量的增值操作
	4.判断循环变量的当前值是否满足循环条件
	5.在下一次循环中依次执行 2 3 4 步骤
	6.直到循环变量的当前值不满足 循环条件，跳出当前循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for循环</title>
</head>
<body>

</body>
</html>
<script>
   
    for (i=0;i<5;i++) {
        console.log(i);
    }
    
    console.log('世上无难事只怕有心人'+i);

    let sum = 0;
    for(let a=0;a<=100;a++){
        sum+=a;
    }
    console.log(sum);

    // 球1~100的偶数和，包含1和100
    let sum1=0;
    for(let n=1;n<=100;n++){
        if(n%2==0){
            sum1+=n;    
        }
    }
    console.log(sum1);

    let sum2=0;
    for(let m=0;m<=100;m+=2){
        sum2+=m;
    }
    console.log(sum2);


    // 求1~100中，所有3的倍数之和
    let sum3=0;
    for(let s=0;s<=100;s+=3){
        sum3+=s;
    }
    console.log(sum3);

</script>
continue用法
continue   当在循环体中执行continue之后，它后面的所有代码都不执行，直接跳出当前循环，执行下一次循环
break  当在循环体中执行break之后，直接终止当前的for循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for循环</title>
</head>
<body>

</body>
</html>
<script>
    //continue 用法 
    console.log('========================================');
    for(let m=0;m<5;m++){
        if(m%2==0){
            continue;//停止当前一次循环，直接进入下一次循环
        }
        console.log(m);
    }
    // break 用法
    for(let m=1;m<10;m++){
        if(m%3==0){
            break;//终止当前for循环
        }
        console.log(m);
    }
</script>

输出所有的水仙花数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输出所有的水仙花数</title>
</head>
<body>

</body>
</html>
<script>
    for (v=0;v<1000;v++){
        // let v = txt.value - 0;
        let v1 = Math.floor(v/100);
        let v2 = Math.floor(v%100/10);
        let v3 = Math.floor(v%10);
        if(v==v1*v1*v1+v2*v2*v2+v3*v3*v3){
            console.log(v+'是水仙花数');
        }
    }
       
</script>

最大公约数和最小公倍数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最大公约数</title>
</head>
<body>
    数据1: <input type="number" id="num1">
    数据2: <input type="number" id="num2"><br/>
    <button id="btn">最大公约数1</button>
    <button id="btn1">最大公约数2</button>
    <button id="btn2">最小公倍数3</button><br/>
    最大公约数: <input type="number" id="num3">
    最小公倍数: <input type="number" id="num4">
</body>

</html>
<script>
    let num1 = document.getElementById('num1');
    let num2 = document.getElementById('num2');
    let num3 = document.getElementById('num3');
    let num4 = document.getElementById('num4');
    let btn = document.getElementById('btn');
    let btn1 = document.getElementById('btn1');
    let btn2 = document.getElementById('btn2');

    btn.onclick = function () {
        let val1 = num1.value - 0;
        let val2 = num2.value - 0;

        // console.time() 测试运行时间
        console.time('时间');

        let v=0;
        for(let i=0;i<val1&&i<=val2;i++){
            if(val1%i==0 && val2%i==0){
                console.log('最大公约数'+i);
                v=i;
            }
        }
        num3.value=v;
        console.timeEnd('时间');
    };

    btn1.onclick = function(){
        let val1 = num1.value - 0;
        let val2 = num2.value - 0;

        // 求出最小值
        let min = val1>val2 ? val2 : val1;
        for(let i=min;i>=0;i--){
            if(val1%i==0 && val2%i==0){
                num3.value=i;
                console.log('最大公约数'+i);
                // break;
            }
        }
    };


    // 最小公倍数
    btn2.onclick = function(){
        let val1 = num1.value - 0;
        let val2 = num2.value - 0;

        let min = val1>val2 ? val2 : val1;
        for(let i=min;i>=0;i++){
            if(val1%i==0 && val2%i==0){
                num3.value=i;
                num4.value=val1*val2/num3.value;
                console.log(num4.value+'最小公倍数');
                break;
            }
        }
    };
</script>
烟雨平生768
关注
JavaScript Day01
m0_61373758的博客
03-08 889
JavaScript历史：网景公司（布兰登·艾奇）ECMAScript是一个标准，JavaScript是语言 js概念 概念：支持面向对象的跨平台脚本语言。 理解： 脚本语言：依赖别的语言才能运行 html必须在浏览器中才能运行，js嵌套在html中才能运行 跨平台：可以在不同的平台上运行 windows、linux、安卓... 支持面向对象 使用面向对象的思想编程 应用场景： 表单验证：规范用户输入数据，和后台数据进行交互 网页特效：给页
JavaScript---day09
Amanecer_的博客
09-01 378
时间对象、字符串对象
JavaScript-day04
2201_75449897的博客
07-20 286
【代码】JavaScript-day04。
JavaScript Day_03
m0_66095162的博客
03-24 1087
Javascript学习笔记
JavaScript-day03
2201_75449897的博客
07-19 221
【代码】JavaScript-day03。
day04-javascript高级.pdf
03-22
JavaScript是一种广泛应用于网页和网络应用的脚本语言，尤其在前端开发中占据核心地位。本教程主要关注JavaScript的高级特性，特别是与浏览器对象模型（BOM）相关的编程知识。 BOM（Browser Object Model）编程是...
JavaScript Day_01
03-24
javascript学习第一天笔记
JavaScript Day_02
03-24
javascript第二天笔记
JavaScript 30 Day.rar_javascript_javascript30
09-24
这个压缩包文件"JavaScript 30 Day.rar"包含了整个课程的资源，专注于JavaScript的基础和高级特性，特别是对于那些想要深入理解JavaScript并提升其应用能力的人来说极具价值。 在这个挑战中，每个练习都会涵盖一个...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2788
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 829
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 413
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 853
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1274
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 344
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
JS的输出语句
最新发布
J3259392566的博客
09-13 183
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 498
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 220
echarts饼图内容循环播放实现
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值