JavaScript Day04

最新推荐文章于 2024-05-24 13:39:19 发布

不万能的小李.

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量35

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/Li1023055421/article/details/132238583

版权

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 {
            width: 1000px;
            display: flex;
            flex-wrap: nowrap;
            transform: translateX(0);
            /* 添加过渡动画 */
            transition: all 1s;
        }
        #list img {
            width: 250px;
            height: 400px;
        }
        
        #box {
            height: 40px;
            width: 100%;
            position: absolute;
            background-color: 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 0px 5px #ccc;
        }
        
        .change {
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
            line-height: 40px;
            position: absolute;
            top: 180px;
            cursor: pointer;
            text-align: center;
        }
        .change:hover {
            background: rgba(0, 0, 0, 0.5);
        }
        #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/5.jpg" 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(){
        console.log('点击了第一个图片');
        list.style.transform = 'translateX(0px)';
        n=1;
    };
    spanBox[1].onclick = function(){
        console.log('点击了第二个图片');
        list.style.transform = 'translateX(-250px)';
        n=2;
    };
    spanBox[2].onclick = function(){
        console.log('点击了第三个图片');
        list.style.transform = 'translateX(-500px)';
        n=3;
    };
    spanBox[3].onclick = function(){
        console.log('点击了第四个图片');
        list.style.transform = 'translateX(-750px)';
        n=4;
    };
    // 获取左右按钮
    let leftBtn = document.getElementById('left');
    let rightBtn = document.getElementById('right');
    // 设置当前是第一张图片，从0开始
    let n = 0;

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

        list.style.transform = 'translateX(-'+n*250+'px)';
    }
</script>

02、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>
    
</body>
</html>
<script>
    /*
    程序结构
    1.基本结构(顺序执行)
    2.分支结构(分支语句)
    3.循环结构(循环语句)

    分支语句

    if(判断条件){
        只有当if中的判断条件为true的时候，{}中的代码才能够被执行如果判断条件不为true，则跳过{}中的代码，程序继续往下执行
    }

    if 后面 () 中的判断条件，不管里面的表达式有多复杂，返回的值永远只有true 或者 false

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

    if可以单独使用，else 必须结合if一起使用。else 指的是除了满足if条件之外的所有条件
    */
    let num = 0||6;
    console.log( num );
    if(0||6&&0){
        console.log('苏妲己');
    }

    console.log('武曌');

    let num1 = 20;

    if( num1>100 ){
        console.log('20>100');
    }else{
        console.log('20<100');
    }

</script>

03、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="score" value=""> <br />
    数据2：<input type="number" id="score2"> <br />
    <button id="btn">比较大小</button>


    <hr>

    输入年份：<input type="number" id="year" /> <button id="btn2">查看是否是闰年</button>
</body>
</html>
<script>
    /*
    分支语句的级联语句
    if(判断条件){

    }else if(判断条件){

    }else {

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


    判断闰年的条件
    1.能被4整除，不能被100整除
    2.能被400整除
    */
    let score = 59;
    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 sco = document.getElementById('score')
    let sco2 = document.getElementById('score2')
    let btn = document.getElementById('btn')

    btn.onclick = function(){  
        let S = sco.value-0;
        let S2 = sco2.value-0;
        if(S>S2){
            alert(S+'的值大于'+S2);
        }else if(S==S2){
            alert(S+'的值与'+S2+'相等')
        }else{
            alert(S+'的值小于'+S2)
        }
    }

    let year = document.getElementById('year');
    let btn2 = document.getElementById('btn2');

    btn2.onclick = function () {
        let y = Number(year.value)
        if(y%4==0&&y%100!=0){
            console.log(y+'年是闰年');
            alert(y+'年是闰年')
        }else if(y%400==0){
            console.log(y+'年是闰年');
            alert(y+'年是闰年')
        }else{
            console.log(y+'年是平年');
            alert(y+'年是平年')
        }
    }

</script>

04、水仙花数

<!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" id="txt">
    <button id="btn">判断</button>
</body>
</html>
<script>
/*
数学方法
Math.floor( num ) 把数字num向下取整，舍弃掉小数
Math.ceil( num ) 把数字num向下取整，舍弃掉小数，整数部分+1
Math.round( num ) 把数字num四舍五入
*/
console.log( Math.floor(3.95));
console.log( Math.ceil(3.25));
console.log( Math.round(3.25));

let txt = document.getElementById('txt');
let btn = document.getElementById('btn');


btn.onclick = function (){
    let val = Number( txt.value );
    // 百位
    let b = Math.floor(val/100);
    // 十位
    let c =  Math.floor( val%100/10 );
    // 各位
    let g = Math.floor( val%10 );

    if(b*b*b+c*c*c+g*g*g == val){
        alert( val+'是水仙花数' );
    }else{
        alert(val+'不是水仙花数');
    }
}

/*
注意：
1.当你书写判断条件的时候，注意等于是 == ，而不是=， = 代表的是赋值
2.0 '' null undefined 如果写在判断条件中，都被解析为false
    非0 非'' 非null 非undefined 如果写在判断条件中，都被解析为 true
*/
let a = 10;
if(a=20){ //一个=是赋值，不是比较
    console.log(a);
}

if(''){
    console.log('南村群童欺我老无力')
}else{
    console.log('忍能对面为盗贼');
}

if(!0){
    console.log('南村群童欺我老无力');
}
</script>

05、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 = 70;

    switch (count) {
        case 30:
            console.log('天涯何处觅知音');
            break; //阻断switch 语句，跳出switch
        case 170:
            console.log('一曲肝肠断');
            break; //阻断switch 语句，跳出switch
        // 如果上面的条件都不满足，则会执行default中的代码
        default:
            console.log('天涯何处无芳草'+'default');
            break;
    }

    let num = 1;

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

06、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>
    /*
    js 中的循环
    1. for 循环
    2. while
    3. do-while

    for(循环变量的初始值;满足循环的条件;循环变量的增值){
        循环体（循环要执行的代码）
    }

    对循环条件的理解，是变量满足循环条件的时候，才会执行 循环体中的代码
    只有循环结束，循环后面的代码才能执行

    执行过程
    1. 首先判断循环变量的初始值，是否满足循环条件
    2. 如果满足循环条件，则执行循环体中的代码
    3. 循环体中代码执行完毕，然后执行循环变量的增值操作
    4. 判断循环变量的当前值，是否满足循环条件
    5. 在下一次循环中，依次执行 2 3 4 步骤
    6. 直到循环变量的当前值 不满足 循环条件，跳出当前循环

    continue 当在循环体中执行 continue 之后，他后面的所有代码都不执行，直接跳出当前循环，执行下一次循环
    break 当在循环体中执行 break 之后，直接终止当前for循环
    */
   let i
    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);
    }
    console.log(sum);
    // 求 1-100中，所有2的倍数之和
    // 第一种
    let sum1 = 0;
    for ( let n=1;n<=100;n++ ){
        if(n%2==0){
            sum1+=n;
        }
    }
    console.log( sum1 );

    // 第二种
    let sum2 = 0;
    for(let o=0;o<=100;o+=2){
        sum2+=o;
    }
    console.log( sum2 );

    // 第三种，不可行
    let sum3 = 0;
    for(let k=0;k%2==0&&k<=100;k++){
        sum3+=k;
    }
    console.log( sum3 );

    // 求 1-100中，所有3的倍数之和
    let sum4 = 0;
    for (let z=0;z<=100;z+=3){
        sum4+=z;
    }
    console.log( sum4 );
    //输出所有的水仙花数
    //创建两个输入框，求两个输入框数的最大公约数

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

07、练习

<!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" name="" id="val2" value=""> <br>
    <input type="number" name="" id="val3" value=""> <br>
    <button id="btn">最大公约数为1</button> <br>
    <button id="btn1">最大公约数为2</button ><br>
    <input type="number" name="" id="val4"> <br>
    <button id="btn2">最小公倍数为</button> <br>
    <input type="number" name="" id="val5">
</body>
</html>
<script>
    //输出所有的水仙花数
    let a=0,b=0,c=0;
    for(let s=100;s<1000;s++){
        a = Math.floor(s/100);
        b = Math.floor(s%100/10);
        c = Math.floor(s%100%10);
        let val = a*a*a+b*b*b+c*c*c
        if(val == s){
            console.log( val );
        }    
    }
    
    //创建两个输入框，求两个输入框数的最大公约数
    let val2 = document.getElementById('val2');
    let val3 = document.getElementById('val3');
    let val4 = document.getElementById('val4');
    let val5 = document.getElementById('val5');
    let btn = document.getElementById('btn');
    let btn1 = document.getElementById('btn1');
    let btn2 = document.getElementById('btn2');

    // btn.onclick = function(){
    //     v2 = Number(val2.value);
    //     v3 = Number(val3.value);
    //     v4 = Number(val4.value);
    //     for(let d = v2;d>=0;d--){
    //         if(v2/d == v3){
    //             continue;
    //         }
    //     }
    //     for(let e = v3;e>=0;e--){
    //         if(v3/e ==v2/d){
    //             continue
    //         }
    //     }
    //     alert( v2/d )
    // }

    btn.onclick = function(){
        let v2 = Number(val2.value);
        let v3 = Number(val3.value);

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

        let v =0
        for(let i=0;i<=v2&&i<=v3;i++){
            if(v2%i==0 && v3%i==0){
                console.log(i);
                v = i;
            }
        }
        val4.value = v;
        console.timeEnd('时间');
    }

    btn1.onclick = function (){
        let v2 = Number(val2.value);
        let v3 = Number(val3.value);
        // 求出最小值
        let min = v2>v3? v3 :v2;
        // val4.value =min;
        
        // console.time() 测试运行时间
        console.time('时间');
        for(let i=min;i>=1;i--){
            if(v2%i==0 && v3%i==0){
                val4.value = i
                console.log('最大公约数：'+i);
                break
            }
        }
        
        console.timeEnd('时间');
    }

    btn2.onclick = function (){
        let v2 = Number(val2.value);
        let v3 = Number(val3.value);
        let min = v2>v3? v3 :v2;
        for(let i=min;i>=1;i--){
            if(v2%i==0 && v3%i==0){
                val5.value = v2*v3/i
                console.log('最小公倍数：'+v2*v3/i);
                break
            }
        }
    }
</script>