前端学习当中的一些js案例

约卡

已于 2023-04-22 20:06:04 修改

阅读量323

点赞数

分类专栏：前端javascript部分文章标签： javascript c语言开发语言前端

于 2023-04-04 21:46:32 首次发布

本文链接：https://blog.csdn.net/weixin_46247854/article/details/129962533

版权

前端javascript部分专栏收录该内容

1 篇文章 0 订阅

订阅专栏

标题 js案例

三目运算符求四个数中的最大值（使用js 和c 的实现）

找找感觉
#include<stdio.h>

void main()
{
	float a,b,c,d;
	float x,y,max,min;
	scanf("%f%f%f%f",&a,&b,&c,&d);
	x=a>b?a:b;
	y=c>d?c:d;
	max=x>y?x:y;
	x=a<b?a:b;
	y=c<d?c:d;
	min=x<y?x:y;
	printf("最大值为%.2f,最小值为%.2f\n",max,min);
}


15
12
10
20
最大值为20.00,最小值为10.00

## 使用js实现

```c
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Document</title>
</head>
<body>
    <script>
       var a=15;
       var b=12;
       var c=10;
       var d=20;

     console.log( ( a>b?a:b)>(c>d?a:d)?( a>b?a:b):(c>d?a:d) );//裹脚布又臭又长嵌套
    
    </script>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/03ccdede68a14326bddc09fa237072ac.png#pic_center)
csdn老上传不了图片

2##封装一个计算bmi的函数（体重kg除以身高米的平方）
男 18.5~23.9 男神，继续保持良好的生活状态低于要注意饮食，变强壮一点高于注意多运动，有点超重

女18.4~23.8 女神，继续保持良好的生活状态低于要注意饮食，不然太瘦弱了高于注意多运动，有点超重

 function bmi (weight,height,sex){
        var bm=weight/(height*height);
        if(sex=="女"){
          if(18.4<=bm<=23.8){
             alert("女神，继续保持良好的生活状态");
            }else if(bm<=18.4){
                alert("要注意饮食，不然太瘦弱了");
            }else if(23.8<=bm){
                alert(" 注意多运动，有点超重");
            }
        }
        if(sex=="男"){
          if(18.5<=bm<=23.9){
             alert("男神，继续保持良好的生活状态");
            }else if(bm<=18.4){
                alert("要注意饮食，变强壮一点");
            }else if(23.8<=bm){
                alert(" 注意多运动，有点超重");
            }
        }

     }
    bmi(63,1.70,"男");

在这里插入图片描述

用循环嵌套的方式在控制台输出一个99乘法表

 <script>
        for(i=1;i<=10;i++){
            for(j=1;j<=10;j++){
                console.log(i+"*"+j+"="+i*j)
            }
        }
    </script>

在这里插入图片描述

数组

如果遇到比7大的数或者不是的都不做处理，并且如果遇到了7要写成星期日，并且封装成函数返回值为封装好的数组
数组改造

 var a=[1,2,3,4,5,6,7,6,3,2,4,7,5,6,1,8,9,10,"hello",true,3]


        var a=[1,2,3,4,5,6,7,6,3,2,4,7,5,6,1,8,9,10,"hello",true,3];
      function arr(){
        for(i=0;i<a.length;i++){
            if(typeof(a[i])=="number"){
                if(a[i]<7){
                 a[i]="星期"+a[i];
                }
                if(a[i]==7){
                    a[i]="星期天";
                }
                
            }
        }
     return a;
      } 
    console.log(arr());

在这里插入图片描述

对象

通过控制台输出我女朋友有只什么动物，名字叫什么，有几个爱好，分别是sport 典型特点爱啃桌子
通过循环得到的

类似这样的输出结果
狗旺财 2 运动啃桌子
猫喵喵 2 运动吃猫粮

var girlFriend ={
        gender:"女",
        age:18,
        isMarried:true,
        hobby:{"听音乐","唱歌","看电影","逛街"}
        pets:[
            {
                name:"旺财",
                type:"dog",
                age:2
                like:[
                    {
                        likeName:"Sport",
                        info:"啃桌子"
                    }，
                    {
                        likeName:"food",
                        info:"吃狗粮"
                    }
                ]

            }
            {
                 name:"咪咪",
                 type:"cat",
                 age:3,
                 like:[
                    {
                        likeName:"sport",
                        info:"抓窗户"
                    },
                    {
                         likeName:"food",
                         info:"吃猫粮"
                    }
                 ]

            }

        ]
     }

js this属性点击切换内容，当前标题高亮，其余不高亮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        .tag{
            width:80px;
            height:50px;
            background-color: gray;
            float:left;
            text-align:center;
            line-height:50px;
            margin-right:5px;
            color:aliceblue;
        }
        .content{
            width:335px;
            height:300px;
            background-color: pink;
            display:none;
        }
        .act{display:block;}
    </style>
</head>
<body>
    <div>
        <div class="tag">体育新闻</div>
        <div class="tag">科技新闻</div>
        <div class="tag">电影新闻</div>
        <div class="tag">娱乐新闻</div>
        <div style="clear:both;"></div><!--样式清除-->

    </div>
    <div>
        <div class="content act">
            <p>我是体育新闻1</p>
            <p>我是体育新闻2</p>
            <p>我是体育新闻3</p>

        </div>
        <div class="content "><!--加个act属性  他就可以默认显示了-->
            <p>我是科技新闻1</p>
            <p>我是科技新闻2</p>
            <p>我是科技新闻3</p>

        </div>
        <div class="content">
            <p>我是电影新闻1</p>
            <p>我是电影新闻2</p>
            <p>我是电影新闻3</p>

        </div>
        <div class="content">
            <p>我是娱乐新闻1</p>
            <p>我是娱乐新闻2</p>
            <p>我是娱乐新闻3</p>

        </div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
<body>
   <script>

        var tags=document.getElementsByClassName("tag");
        //content 也需要获取   决定让谁显示  让谁隐藏
        var contents=document.getElementsByClassName("content");
        var index=0;
        for(var i=0;i<tags.length;i++){
            tags[i].index=i;
            tags[i].onclick=function(){
        //点体育新闻的时候让体育新闻显示其他的隐藏
        //this 是点谁指向谁

        //例如点谁  让谁变成红色就很简单
        //    this.style.backgroundColor="red";

        /* 当前标题高亮*/                               //问题怎么设置当前高亮，其它不高亮
        tags[this.index].style.background="blue";

        //先把所有东西先隐藏  再把当前对应对象显示
       
        for(var j=0;j<contents.length;j++){
            contents[j].style.display="none"
            
        }
/*
定义和用法
display 属性规定元素应该生成的框的类型。
说明
这个属性用于定义建立布局时元素生成的显示框类型。

display="none"此元素不会被显示
display="block"此元素将显示为块级元素，此元素前后会带有换行符
display="inline"默认。此元素会被显示为内联元素，元素前后没有换行符
display="inline-block"行内块元素

*/
        contents[this.index].style.display="block"

            }
        }
    </script>
   </script> 
</body>
</html>

效果

在这里插入图片描述
基本实现，存在bug 第二次点击时，先前的高亮没有消失

js定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
    <div id="txt">

    </div>
   <script>
        /*定时器（方法）：是让网页自动运行的唯一方法
        1.周期性定时器：每隔一段时间干啥事
            setInterval(干甚末事，间隔毫秒数)
        2.一次性定时器：等待一定时间，干什莫事
            setTimeout(干什莫事，等待毫秒数)
        */

     /*  setInterval(function(){
            console.log("你好")
        },1000)//周期性定时器
        setTimeout(function(){
            console.log("你好")
        },3000)//一次性定时器
     */
    //问题  会先打印你好   还是会先打印世界
    /* setTimeout(function(){
            console.log("你好")
        },3000)
        console.log("世界")*/
        //会先打印世界，三秒后打印你好    因为他们两个不是一个线程的
        //每次都是先执行主线程的代码


        var txt=document.getElementById("txt")
        
        //案例一   距离下课倒计时

        //周期性定时器
        var timer=setInterval(clock,1000)

        //创建目标日期对象
        var target=new Date("2023-06-03 00:00:00");//放外面  因为目标日期对象不需要重复创建

        function clock(){
            //当前日期对象应该放在里面,当前日期一直在变
            //每隔一秒就需要重新创建一个当前日期对象
            var now=new Date();
            //日期对象直接做减法  返回的是间隔的毫秒数
            var ms=target-now;

            //  获取当前对象 利用字符串拼接   和html，把倒计时显示在页面当中 
            txt.innerHTML="距离下课还有"+ms
        }


        
   </script> 

</body>
</html>

效果
在这里插入图片描述

定时器时分秒版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <head>
        <meta charset="UTF-8">
    
        <title>Document</title>
    </head>
    <body>
        <div id="txt">
    
        </div>
       <script>
            /*定时器（方法）：是让网页自动运行的唯一方法
            1.周期性定时器：每隔一段时间干啥事
                setInterval(干甚末事，间隔毫秒数)
            2.一次性定时器：等待一定时间，干什莫事
                setTimeout(干什莫事，等待毫秒数)
            */
    
         /*  setInterval(function(){
                console.log("你好")
            },1000)//周期性定时器
            setTimeout(function(){
                console.log("你好")
            },3000)//一次性定时器
         */
        //问题  会先打印你好   还是会先打印世界
        /* setTimeout(function(){
                console.log("你好")
            },3000)
            console.log("世界")*/
            //会先打印世界，三秒后打印你好    因为他们两个不是一个线程的
            //每次都是先执行主线程的代码
    
    
            var txt=document.getElementById("txt")
            
            //案例一   距离下课倒计时
    
            //周期性定时器
            var timer=setInterval(clock,1000)
    
            //创建目标日期对象
            var target=new Date("2023-06-03 00:00:00");//放外面  因为目标日期对象不需要重复创建
    
            function clock(){
                //当前日期对象应该放在里面,当前日期一直在变
                //每隔一秒就需要重新创建一个当前日期对象
                var now=new Date();
                //日期对象直接做减法  返回的是间隔的毫秒数
                var ms=target-now;
                if(ms>0){
                var h=Math.floor(ms/1000/60/60);
                var m=Math.floor((ms-h*60*60*1000)/1000/60)//总毫秒数  减去   小时占用的毫秒数
                var s=Math.floor((ms-h*60*60*1000-m*60*1000)/1000)  //秒数
                //Math.floor向下取整
                //  获取当前对象 利用字符串拼接   和html，把倒计时显示在页面当中 
                txt.innerHTML="距离下课还有"+h+"时"+m+"分"+s+"秒"
                }else{
                    clearInterval(timer);
                    txt.innerHTML="下课了"
                }
            }
    
    
            
       </script> 

</body>
</html>

在这里插入图片描述

如果是个位数显示0的拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <head>
        <meta charset="UTF-8">
    
        <title>Document</title>
    </head>
    <body>
        <div id="txt">
    
        </div>
       <script>
            /*定时器（方法）：是让网页自动运行的唯一方法
            1.周期性定时器：每隔一段时间干啥事
                setInterval(干甚末事，间隔毫秒数)
            2.一次性定时器：等待一定时间，干什莫事
                setTimeout(干什莫事，等待毫秒数)
            */
    
         /*  setInterval(function(){
                console.log("你好")
            },1000)//周期性定时器
            setTimeout(function(){
                console.log("你好")
            },3000)//一次性定时器
         */
        //问题  会先打印你好   还是会先打印世界
        /* setTimeout(function(){
                console.log("你好")
            },3000)
            console.log("世界")*/
            //会先打印世界，三秒后打印你好    因为他们两个不是一个线程的
            //每次都是先执行主线程的代码
    
    
            var txt=document.getElementById("txt")
            
            //案例一   距离下课倒计时
    
            //周期性定时器
            var timer=setInterval(clock,1000)
    
            //创建目标日期对象
            var target=new Date("2023-06-03 00:00:00");//放外面  因为目标日期对象不需要重复创建
    
            function clock(){
                //当前日期对象应该放在里面,当前日期一直在变
                //每隔一秒就需要重新创建一个当前日期对象
                var now=new Date();
                //日期对象直接做减法  返回的是间隔的毫秒数
                var ms=target-now;
                if(ms>0){
                var h=Math.floor(ms/1000/60/60);
                h=h<10?"0"+h:h;//如果是个位数   来一个0的拼接 看着整齐一点
                var m=Math.floor((ms-h*60*60*1000)/1000/60)//总毫秒数  减去   小时占用的毫秒数
                m=m<10?"0"+m:m;   
                var s=Math.floor((ms-h*60*60*1000-m*60*1000)/1000)  //秒数
                s=s<10?"0"+s:s;   
                //Math.floor向下取整
                //  获取当前对象 利用字符串拼接   和html，把倒计时显示在页面当中 
                txt.innerHTML="距离下课还有"+h+"时"+m+"分"+s+"秒"
                }else{
                    clearInterval(timer);
                    txt.innerHTML="下课了"
                }
            }
    
    
            
       </script> 

</body>
</html>

在这里插入图片描述

使用jQuery创建折叠式菜单（手风琴效果）

添加链接描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <style>
        
        body {
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }
 
        .accordion,
        .accordion ul { /* 折叠菜单及其子菜单的通用样式 */
            font-size: 14px;
            font-weight: bold;
            width: 300px;
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
            border: 5px solid #343b42;
        }
 
        .accordion ul {
            border: 0;
        }
 
        .accordion ul li { /* 子菜单的菜单项样式 */
            line-height: 50px;
            height: 50px;
            color: #e6efee;
            border-bottom: 1px solid #383b4c;
            background-color: #282b3a;
        }
 
        .accordion li span { /* 折叠菜单的标题样式 */
            line-height: 60px;
            display: block;
            height: 60px;
            color: #e6efee;
            border: 2px solid #343b42;
            background-color: #3789d3;
        }
 
        .accordion li.selected span { /* 折叠菜单选中项的标题样式 */
            color: #e6efee;
            background-color: #393c4b;
        }
 
        .accordion li div { /* 子菜单平时不显示 */
            display: none;
        }
 
        .accordion li.selected div { /* 添加了selected样式时才显示 */
            display: block;
        }
    </style>
 
    </style>
</head>
<body>
    <ul class="accordion">
        <li class="selected">
            <span></span>首页
            <div>
                <ul>
                    <li>关于我们</li>
                    <li>ESG</li>
                    <li>投资者关系</li>
                    <li>新闻及媒体资源</li>
                    <li>加入我们</li>
                </ul>
            </div>
        </li>
        <li>
            <span>社会招聘</span>
            <div>
                <ul>
                    <li>搜索你感兴趣的职位</li>
                    <li>业务介绍</li>
                    <li>流程公告</li>
                </ul>
            </div>
        </li>
        <li>
            <span>校园招聘</span>
            <div>
                <ul>
                    <li>通知专区</li>
                    <li>业务介绍</li>
                    <li>校招漫画书</li>
                    <li>多元生活</li>
                </ul>
            </div>
        </li>
        <li>
            <span>工作城市</span>
            <div>
                <ul>
                    <li>国内城市</li>
                    <li>海外城市</li>
                </ul>
            </div>
        </li>
        <li>
            <span>个人中心</span>
            <div>
                <ul>
                    <li>登录</li>
                </ul>
            </div>
        </li>
    </ul>
    <script>
    $(function () {
        $("ul.accordion li span").on('click', function () {
            $(this).parent().siblings().removeClass('selected').find('div').hide();
            $(this).parent().addClass('selected');
            $(this).next().slideDown(500);
        });
    });
    //
    </script>
</body>
</html>