HTML——css与js案例练习

发布于：2022-12-17 ⋅ 阅读:(392) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

目录

一、css案例

1.小米布局案例效果图

  • 要求图
    请添加图片描述
  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .y1{
                width: 234px;
                height: 615px;
                background-color: #800080;
                float: left;
                box-sizing: border-box;
            }
            .y2{
                width: 234px;
                height: 300px;
                background-color: #87ceeb;
                display: inline-block; 
                position: relative;
                left: 14px;
                box-sizing: border-box;
            }
            .y3{
                width: 234px;
                height: 300px;
                background-color: #87ceeb;
                display: inline-block; 
                position: absolute;
                left: 496px;
            }
            .y4{
                width: 234px;
                height: 300px;
                background-color: #87ceeb;
                display: inline-block; 
                position: absolute;
                left: 744px;
            }
            .y5{
                width: 234px;
                height: 300px;
                background-color: #87ceeb;
                display: inline-block; 
                position: absolute;
                left: 992px;
            }
            .y6{
                width: 234px;
                height: 300px;
                background-color: #87ceeb;
                display: inline-block; 
                position: absolute;
                top: 314px;
                left: 248px;
            }
            .y7{
                width: 234px;
                height: 300px;
                background-color: #87ceeb;
                display: inline-block; 
                position: absolute;
                top: 314px;
                left: 496px;
            }
            .y8{
                width: 234px;
                height: 300px;
                background-color: #87ceeb;
                display: inline-block; 
                position: absolute;
                top: 314px;
                left: 744px;
            }
            .y9{
                width: 234px;
                height: 300px;
                background-color: #87ceeb;
                display: inline-block; 
                position: absolute;
                top: 314px;
                left: 992px;
            }

    </style>
</head>
<body>
    <div class="y1"></div>
    <div class="y2"></div>
    <div class="y3"></div>
    <div class="y4"></div>
    <div class="y5"></div>
    <div class="y6"></div>
    <div class="y7"></div>
    <div class="y8"></div>
    <div class="y9"></div>
</body>
</html>
  • 代码效果图
    在这里插入图片描述

2.侧边导航

  • 说明：盒子:宽234， 高420
    按钮：高42，底色#2c505f
    字体颜色:#fff
    字体大小:14px;
    文字距离左侧:30px;

  • 要求图
    请添加图片描述

  • 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            .box{
                width: 234px;
                height: 420px;
                background-color: #2c505f;
            }
            .box a{
                font-size: 14px;
                font-family: "宋体";
                color: #fff;
                text-decoration: none;
                display: block;
                line-height: 42px;
                padding: 0px 0px 0px 30px;              
            }
            .box a:hover{
                background-color: red;               
            }

    </style>
</head>
<body>
        <div class="box">
            <a href="">手机 电话卡</a>
            <a href="">电视 盒子</a>
            <a href="">笔记本 显示器</a>
            <a href="">家电 插线板</a>
            <a href="">出行 穿戴</a>
            <a href="">智能 路由器</a>
            <a href="">电源 配件</a>
            <a href="">健康 儿童</a>
            <a href="">耳机 音箱</a>
            <a href="">生活 箱包</a>
        </div>
</body>
</html>
  • 代码效果图
    在这里插入图片描述

3.hot图片案例

  • 图片
    请添加图片描述

请添加图片描述

  • 要求图

请添加图片描述

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            .d1{
                width: 234px;
                height: 700px;
            }
            .b1{
                height: 156px;
                width: 234px;
                background-image: url("./product.png");
            }
            .a1{
                line-height: 60px;
                padding: 30px 0px 20px 30px;
                font-size: 14px;
                text-decoration: none;
            }
            .h1{
                float: right;
                position: absolute;
                top: 18px;
                left:206px;
            }
    </style>
</head>
<body>
    <div class="d1">
        <div class="h1"><img src="./hot.png" alt=""></div>
        <div class="b1"></div>
        <a href="" class="a1" style="color:black;">Android网络图片加载框架详解</a><p>
        <span style="color:orange; padding:0px 0px 20px 30px; font-size:9px;">高级</span>
        <span style="color:grey; font-size:9px;">·1125人在学习</span>
            
    </div>
        
</body>
</html>
  • 代码效果图
    在这里插入图片描述

二、js案例

1. 增加年龄

  • 题目描述

    1、询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁

    2、增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了”

请添加图片描述请添加图片描述

  • 代码
<script>
    //第一种
    // var age = prompt("你现在多少岁了？");
    // var a = 5;
    // var b = Number(age) + a;
    // alert("据我估计，五年后，你可能"+b+"岁了");

    //第二种
    var age = prompt("你现在多少岁了？");
    var a = 5;
    var b = parseInt(age) + a;
    alert("据我估计，五年后，你可能"+b+"岁了");
</script>
  • 代码效果图
    在这里插入图片描述
    在这里插入图片描述

2.班级聚餐

  • 题目描述：

    ​ 接收班长口袋里的钱数？

    ​ 若大于等于2000，大家吃西餐。

    ​ 若小于2000，大于等于1500，大家吃快餐。

    ​ 若小于1500，大于等于1000，大家喝饮料。

    ​ 若小于1000，大于等于500，大家吃棒棒糖。

    ​ 否则提醒班长该收班费了

  • 题目提示：

    ​ 使用switch或者if else if 来进行逻辑书写

  • 代码

<script>
        var mon = prompt("班长兜里的钱为？")
        if(Number(mon)>=2000){
            alert("大家吃西餐。");
        }else if(Number(mon)>=1500){
            alert("大家吃快餐");
        }else if(Number(mon)>=1000){
            alert("大家喝饮料。");
        }else if(Number(mon)>=500){
            alert("大家吃棒棒糖。");
        }else{
            alert("没钱了，快给班长交班费!");
        }
</script>
  • 代码效果图（这里不做过多演示没找到好的gif截图工具）
    在这里插入图片描述

3.打印99乘法表

  • 在控制台打印具体效果如下：
1×1=1	
1×2=2	2×2=4	
1×3=3	2×3=6	3×3=9	
1×4=4	2×4=8	3×4=12	4×4=16	
1×5=5	2×5=10	3×5=15	4×5=20	5×5=25	
1×6=6	2×6=12	3×6=18	4×6=24	5×6=30	6×6=36	
1×7=7	2×7=14	3×7=21	4×7=28	5×7=35	6×7=42	7×7=49	
1×8=8	2×8=16	3×8=24	4×8=32	5×8=40	6×8=48	7×8=56	8×8=64	
1×9=9	2×9=18	3×9=27	4×9=36	5×9=45	6×9=54	7×9=63	8×9=72	9×9=81
  • 代码
<script>
    var cfb = "";
    for(var i=1; i<=9; i++){
        for(var y=1; y<=i; y++){
            cfb += i+"x"+y+"="+i*y+"\t";
        }
        cfb += "\n";
    }
    console.log(cfb);
</script>
  • 代码效果图
    在这里插入图片描述

4.写一个函数

  • 题目描述：​能翻转传入的任意数组，并把翻转结果通过返回值返回

  • 代码

<script>
        function fz(sz){
            var new_sz = [];
            for(var i=sz.length-1; i>=0; i--){
                new_sz[new_sz.length] = sz[i];               //根据下标
            }
            return new_sz;           
        }
        var sz = ['red','green','blue','pink','purple'];
        var sz1 = [1,2,3,4,5,6]
        console.log(fz(sz));
        console.log(fz(sz1));
</script>
  • 代码效果图
    在这里插入图片描述

5.创建一个电脑对象

  • 题目描述：该对象要有颜色、重量、品牌、型号，可以看电影、听音乐、打游戏和敲代码，颜色、重量、品牌、型号是属性；看电影、听音乐、打游戏、敲代码是方法，在调用方法时打印 “我在看电影/听音乐/打游戏/敲代码”

  • 代码

<script>
        var omen = {
            name: '暗影精灵',        //型号
            color: 'black',         //颜色
            weight: '2.5kg',        //重量
            brand: '惠普',          //品牌
            way: function(){
                alert("我在看电影");
            },
            way1: function(){
                alert("我在听音乐");
            },
            way2: function(){
                alert("我在打游戏");
            },
            way3: function(){
                alert("我在敲代码");
            }
            }
        omen.way();
        alert("我的型号是"+omen.name);
        // for(var v in omen){
        //     alert(omen[v]);
        //     if(typeof omen[v] == 'function'){
        //     continue;
        //     console.log(omen[v]);
        //     }                         
</script>
  • 代码效果图
    在这里插入图片描述
    在这里插入图片描述

6.简易ATM

  • 题目描述：

  • 里面现存有 100 块钱。

  • 如果存钱，就用输入钱数加上先存的钱数, 之后弹出显示余额提示框

  • 如果取钱，就减去取的钱数，之后弹出显示余额提示框

  • 如果显示余额，就输出余额

  • 如果退出，弹出退出信息提示框

  • 操作界面如下
    在这里插入图片描述

  • 代码

<script>
    while(1){
        var mon = 100;
        var atm = prompt("请输入您要的操作：\n"+"1.存钱\n"+"2.取钱\n"+"3.显示余额\n"+"4.退出\n");
        if(Number(atm) == 1){
            var atm1 = prompt("请输入你要存入的金额");
            var nmon = Number(atm1) + Number(mon);
            alert("您的余额是："+nmon+"元");
        }else if(Number(atm) == 2){
            var atm1 = prompt("请输入你要取出的金额");
            var nmon = Number(mon) - Number(atm1);
            alert("您的余额是："+nmon+"元");
        }else if(Number(atm) == 3){
            alert("您的余额是："+mon+"元");
        }else{
            alert("拜拜！");
        }
    }
</script>
  • 代码效果图(可以自己试一试，效果与题目一致)
    在这里插入图片描述

7.简易计算器

  • 用户在弹出的输入框中选择要做的运算

  • 用户选择后弹出两个输入框，让用户输入数据

  • 根据用户选择的操作和输入的数据，计算出最后结果并弹出提示框显示结果

  • 操作界面如下：
    在这里插入图片描述

  • 代码

<script>
    while(1){
        var jsq = prompt("欢迎使用简易计算器：\n"+"1.加法运算\n"+"2.减法运算\n"+"3.乘法运算\n"+"4.除法运算\n"+"5.退出\n"+"请输入您的选项\n");
        if(Number(jsq) == 1){
            var y1 = prompt("请输入第一个数据：");
            var y2 = prompt("请输入第二个数据：");
            var jg = Number(y1) + Number(y2);
            alert("运算结果是："+jg);
        }else if(Number(jsq) == 2){
            var y1 = prompt("请输入第一个数据：");
            var y2 = prompt("请输入第二个数据：");
            var jg = y1 - y2;
            alert("运算结果是："+jg);
        }else if(Number(jsq) == 3){
            var y1 = prompt("请输入第一个数据：");
            var y2 = prompt("请输入第二个数据：");
            var jg = y1 * y2;
            alert("运算结果是："+jg);
        }else if(Number(jsq) == 4){
            var y1 = prompt("请输入第一个数据：");
            var y2 = prompt("请输入第二个数据：");
            var jg = y1 / y2;
            alert("运算结果是："+jg);
        }else{
            alert("拜拜！");
        }
    }

</script>
  • 代码效果图
    在这里插入图片描述
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布