js实例练习代码

wuchangjian2021-11-25 17:55:14编程学习

JaveScript 案例

输入三个值比大小

           var a=prompt('请输入数值:')
            var b=prompt("请输入数值:")
            var c=prompt('请输入数值:')
        function maxMin(max,min,mid){
            if(max>min&&max>mid){
                alert(max+'大')
            }
            else if(min>max&&min>mid){
                alert(min+"大")
            }
            else if(mid>max&&mid>min){
                alert(mid+'大')
            }
            else{
                alert("相等")
            }
        }
        maxMin(a,b,c)

数组内相加

        var arr1=[23,213,43,5,34,3]
        function getSum(arr){
            var sum=0;
            for(var i=0;i<arr.length;i++){
                sum+=arr[i];
            }
            console.log(sum);
        }
        getSum([10,20,30,40]);
        getSum(arr1);

输入几行几列星星

        var a = prompt('输入行:')
        var b = prompt('输入列:')
        function xx(hang, lie) {
            for (var i = 1; i <= hang; i++) {
                for (var j = 1; j <= lie; j++) {
                    document.write('*');
                }
                document.write('<br/>');
            }
        }
        xx(a, b)

计算器

  var a = Number(prompt('输入第一个数:'))
        var b = prompt('输入符号:')
        var c = Number(prompt('输入第二个数:'))
        function jsq(one,fu,two){
            switch (fu) {
            case "+":
                alert(one + two );
                break;
            case "-":
                alert(one - two);
                break;
            case "*":
                alert(one * two);
                break;
            case "/":
                alert(one / two);
                break;
        }
        }
        jsq(a,b,c)

打印1-100相加的数

        var a=prompt('输入最大数:')
        function shu(max){
            var num=0
        for(i=1;i<=max;i++){
            num=num+i
        }
        document.write(num)
        }
        shu(a)

声明式函数

预解析可以提前调用

        function fn(a){
            console.log(a);
        }

匿名表达式

不会预解析 不能提前调用

       var fn2=function(a){
            console.log(a);
        };
        fn2(4)

return返回值

        function fn3(a,b){
            return a+b;
        }
        var res=fn3(2,3);
        console.log(res);

return终止代码执行

        function fn4(a,b){
            return false;
            console.log(a,b);
        }
        fn(2,3);

随机抽取姓名

方法一

        var sz=['刘金龙','鎏金聋','六斤龙','溜进龙','流进龙','刘晋聋','柳金隆','瘤斤笼','⑥锦龙','硫斤聋','遛紧聋','刘津珑','李传统','李船帆','李传桨','里穿衣服的','叫孤鸿寡鹄','瑠紧聋','蓅尽陇','王坚果','王坚果Pro max','王指纹']
        var index =Math.floor(Math.random()*22);
        console.log(sz[index]);

方法二(定时抽奖)

  <style>
        #d1{
            width: 100px;
            height: 50px;
            background-color: red;
            color:white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
        #d3{
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="d1">

    </div>
    <button id="d2">
        抽奖
    </button>
    <script>
        var arr=['鎏金聋','理串逸','亡坚果','痒总锐','假异哞','亡智闻','余总说','联名',
        '胡俊丽','家臣非','玛襑豫','尘世好','伤与球','阿伟'];
        var sun=3;
       var a=document.querySelector('#d2');
     
       
        a.addEventListener("click",function(){
            a.disabled=true;
            function dingshi(){
                var c=document.querySelector('#d1');
                sun--;
                if(sun==0){
                var index=Math.ceil(Math.random()*13);
                c.innerHTML='恭喜'+arr[index];
                clearInterval(timer);
                a.disabled=false;
                sun=3;
            }
        }

            var timer=setInterval(dingshi,1000);
            
        },false)
    </script>

Date对象的常用方法

        var date2=new Date('2021/10/1');//获取指定某个日期的日期对象
        var date=new Date();//获取的是当前的日期对象
        var year=date.getFullYear();//获取的年份
        var month=date.getMonth();//获取月份
        var day=date.getDate();//获取几号
        var week=date.getDay();//获取星期几
        var hour=date.getHours();//获取小时数
        var minute=date.getMinutes();//获取分钟数
        var second=date.getSeconds();//获取秒数
        console.log(year);
        console.log(month);   //打印出来的月份比实际月份少1
        console.log(day);   
        console.log(week);   
        console.log(hour);   
        console.log(minute);   
        console.log(second);   
        console.log(new Date().getTime());//获取当前日期距离1970年1月1日的时间戳(毫秒数)
        console.log(new Date('2021/10/1').getTime());//获取10月1日距离1970年1月1日的毫秒数

数组去掉重复值

方法1

        var arr=[12,12,34,34,5,6,78,876]
        var newArr=[];//定义一个空数组
        for(var i=0;i<arr.length;i++){
            if(newArr.indexOf(arr[i])==-1){
                 newArr.push(arr[i]);                      
               }
           
            //思路:对原始数组进行for循环,判断新数组中是否存在原始数组中的元素,如果有,
            //代表室第二次出现,没有说明第一次出现,就存在新数组,最后把新数组打印出来
        }
        console.log(newArr);

方法2

var arr=[1,2,3,44,1,44,55,66,77,8];
    function unique(arr){
        for(var i=0,len=arr.length;i<len;i++){
          for(var j=i+1,len=arr.length;j<len;j++){
              if(arr[i]===arr[j]){
                  arr.splice(j,1);
                  j--;//每删除一个数j的值就减1;
                  len--;//j值减小时len也要相应减1(减少循环次数,节省性能)
              }
            }
          }
        return arr;
    }
    document.write(unique(arr));
    //1,2,3,44,55,66,77,8

数组方法

        var arr1 = [1, 2, 3, 4, 5]//字面量方式
        var arr2 = new Array(6);//如果传递一个参数,代表数组的长度是6
        var arr3 = new Array(5, 6, 7, 8);//如果传递多个参数,代表数组中的多个元素
        //判断某个变量是否为数组
        var num = 10;
        console.log(Array.isArray(arr1));//true
        console.log(Array.isArray(num));//false

        //数组中添加和删除元素
        var arr=[10,3434,5,3,55,45];
        //数组中前面添加一个元素
        arr.unshift(5);
        //数组中尾部追加一个元素
        arr.push(50);
        //删除数据中全面第一个元素
        arr.pop();
        //删除数组中指定的某个元素 参数分别是:删除的索引号、删除几个、添加的元素
        arr.splice(1,1,"a");
        console.log(arr);
        //数组的倒序排列
        var arr=[23,12,45,26,77]
        arr.reverse();//顺序翻转
        arr.sort(function(a,b){
            return a-b;//从小到大 升序排列
        });
        arr.sort(function(a,b){
            return b-a;//从大到小降序排列
        })
        console.log(arr);
        //求数组中元素是否存在 如果用indexOf的返回值为-1  代表查找的元素在数组中不存在
        var arr=["a","b",'c','d','e'];
        var index=arr.indexOf('h');
        console.log(index);
        //数组转换成字符串
        var arr=['hello','world','everyone'];
        var str=arr.join('');//把数组转换成字符串
        document.write(str);
        //数组合并
        var math=[66,45,67,333];
        var eng=[30,20,10,60];
        var bigArr=math.concat(eng);
        console.log(bigArr);

冒泡排序法*

            var arr=[23,34,45,56,1,63,54];//从小到大排列
            //外层控制的是跑几趟 内层控制的是两两互换
            for(var i=0;i<arr.length-1;i++){
                for(var j=0;j<arr.length-1-i;j++){
                    //假设前面的数比后面的数大 ,前后换位置
                    if(arr[j]>arr[j+1]){
                        //两两交换位置
                        var temp=arr[j+1];
                        arr[j+1]=arr[j];
                        arr[j]=temp;
                    }
                }
            }
			document.write(arr)

定义对象

        var obj={
            name:'荣耀',
            cpu:'i5-10210u',
            jidai:16,
            say:function(){
                alert('版本号')
            }
        }
        console.log(obj.jidai);
        console.log(obj['name']);
        obj.say();

对象的循环

        var obj={
            name:'荣耀',
            cpu:'i5-10210u',
            jidai:16,
            say:function(){
                alert('版本号')
            }
        }

        for(var k in obj){
            console.log(k);
            console.log(obj[k]);
        }

统计字符串中出现次数最多的字符

        var str='attfiossssfsfsjosfsfjogg';
        var obj={};
        for(var i=0;i<str.length;i++){
            var zimu=str[i];//根据索引号获取对应单个字符
            //如果原来的次数存在就累加1,否则直接赋值为1次
            if(obj[zimu]){
                obj[zimu]++;
            }else{
                obj[zimu]=1;
            }
        }
        console.log(obj);
        var max=0;//假设最大次数
        var maxFu='';//假设出现次数最多的字符
        for(var k in obj){
            if(obj[k]>max){
                max=obj[k];
                maxFu=k;
            }
        }
        console.log(maxFu+'是出现次数最多的符号');
        console.log("出现的次数是"+max);

获取Dom元素的几种方式

        var box1=document.getElementById('d1');//通过id名获取元素
        var box2=document.getElementsByTagName('div');//通过标签名获取元素['div','div']
        //h5新增的获取元素方法
        var box3=document.getElementsByClassName('c1');//通过类名获取元素['div']
        var box4=document.querySelector('#d1');//获取唯一的一个元素 一定要添加标识符
        var box5=document.querySelectorAll('#d1');//获取的是数组

js更换背景图

方法1

<body>
    <button id='d1'>火烧云</button>
    <button id='d2'>陨石坑</button>
    <button id=d3>云</button>
    <script>
        var btn=document.getElementById('d1');
        btn.οnclick=function(){
            var box=document.body;
            box.style.background="url(../精选背景图/火烧云.jpg)";
        }
        var btn=document.getElementById('d2');
        btn.οnclick=function(){
            var box=document.body;
            box.style.background="url(../精选背景图/陨石坑.jpg)";
        }
        var btn=document.getElementById('d3');
        btn.οnclick=function(){
            var box=document.body;
            box.style.background="url(../精选背景图/云.jpg)";
        }
    </script>
</body>

方法2

    <button id='d1' class="c1">火烧云</button>
    <button id='d2' class="c1">陨石坑</button>
    <button id=d3 class="c1">云</button>

       var btns=document.querySelectorAll('.c1');
        for(var i=0;i<btns.length;i++){
            btns[i].index=i;
            btns[i].οnclick=function(){
                var index=this.index;
                console.log(index);
                document.body.style.background='url(../images/0"+(index+1)+".png)'
            }//图片名称改成01,02,03...的格式
        }

复选框全选

    全选<input type="checkbox" id='checkAll'><br/>
    <input type="checkbox" class='checkOne'>
    <input type="checkbox" class='checkOne'>
    <input type="checkbox" class='checkOne'>
    <input type="checkbox" class='checkOne'>
    <input type="checkbox" class='checkOne'>
    <script>
        var checkAll=document.getElementById("checkAll");//获取大复选框
        var checkOnes=document.querySelectorAll('.checkOne');//获取所有的小复选框
        checkAll.οnchange=function(){
            var status=this.checked;//获取大复选框的选中状态 true false
            if(status==true){
                //大的被选中了 下面的小盒子被选中
                for(var i=0;i<checkOnes.length;i++){
                    checkOnes[i].checked=true;
                }
            }else{
                //大盒子取消选中 小盒子全部取消选中
                for(var i=0;i<checkOnes.length;i++){
                    checkOnes[i].checked=false;
                }
            }
            console.log(this.checked);
        }

分时问候

        var hour=new Date().getHours();
        if(hour>=8&&hour<12){
            alert('早上好')
            document.body.style.background="url(../精选背景图/模糊.jpg)"
        }else if(hour>=12&&hour<18){
            alert('中午好')
            document.body.style.background="url(../精选背景图/年轮.jpg)"
        }else if(hour>=18&&hour<=24){
            alert('晚上好')
            document.body.style.background="url(../精选背景图/任意门.jpg)"
        }

点击按钮控制盒子显示

    <style>
#d2{
    width: 300px;
    height: 300px;
    background-color: red;
    display:none;
}
    </style>
</head>
<body>
    <button id="d1">显示</button>
    <div id='d2'></div>
    <script>
        var a=document.getElementById('d1');
        var flag=0;
        a.οnclick=function(){
            if(flag==0){
                var box=document.querySelector('#d2');
                box.style.display='block';
                a.innerHTML='隐藏'
                flag=1;
            }else if(flag==1){
                var box=document.querySelector('#d2');
                box.style.display='none';
                flag=0;
                a.innerHTML='显示'
            }
        }
    </script>
</body>

用户发表评论

<body>
    <div id='box'>
        <!-- 让用户输入评论的内容 -->
        <textarea name="" id="content" cols="30" rows="10"></textarea>
        <button id="btn">评论</button>
        <ul id="list"></ul>
    </div>
    <script>
        var btn=document.querySelector('#btn');//获取按钮
        btn.οnclick=function(){
            var textArea=document.querySelector('#content');//获取文本域标签
            var content=textArea.value;//获取表单标签的内容
            var li=document.createElement('li')//创建li标签
            li.innerHTML=content+'<a href="javascript:void(0)">删除</a>'//把用户输入的内容赋值给li标签
            var ul=document.querySelector('#list');
            ul.appendChild(li);
            textArea.value='';
            var delBtns=document.querySelectorAll('#list li a');//[a,a,a]
            for(var i=0;i<delBtns.length;i++){
                delBtns[i].οnclick=function(){
                    var res=confirm('你确定要删除吗');
                    if(res){
                        ul.removeChild(this.parentNode);//把当前的li标签删除
                    }
                }
            }
            console.log(delBtns);
        }
    </script>
</body>

盒子跳转(tab选项卡)

    <div id="box">
        <button id="d1" class='red'>按钮1</button>
        <button id="d2">按钮2</button>
        <button id="d3">按钮3</button>
        <button id="d4">按钮4</button>
        <div class="box active" >我是按钮1内容</div>
        <div class="box">我是按钮2内容</div>
        <div class="box">我是按钮3内容</div>
        <div class="box">我是按钮4内容</div>
    </div>

    
    <script>
        var btns=document.querySelectorAll('#box>button');
        var boxs=document.querySelectorAll('.box');//获取所有div
        for(var i=0;i<btns.length;i++){
            btns[i].index=i;//把所有i保存到index属性
            btns[i].οnclick=function(){
                //让所有的button按钮回复初始状态
                for(var j=0;j<btns.length;j++){
                    btns[j].className='';
                }
                this.className='red';
                //让对应的div出来 注意在这之前让所有的div先全不隐藏
                for(var k=0;k<boxs.length;k++){
                    boxs[k].className='box';
                }
                boxs[this.index].className='box active';
            };
            
        }
</script>

鼠标跟随

方法1

<style>
#d1{
    width: 100px;
    height: 100px;
    position:absolute;
    top:100px;
    left:50px;
}
</style>
<body>
    <img src="../精选背景图/恶魔城.jpg" alt="" id="d1">
    <script>
        //鼠标跟随原理:用js获取鼠标的位置,然后把参数设置成图片的位置
        document.addEventListener(
            "mousemove",
            function(event){
                var pagex=event.pageX;//获取鼠标移动的那个点的x轴坐标
                var pagey=event.pageY;//获取鼠标移动的那个点的y轴坐标
                var d1=document.querySelector("#d1");//获取图片的DOm对象
                d1.style.top=pagey+"px";
                d1.style.left=pagex+"px";
            }
        )
    </script>

方法2(放大镜效果)

  <style>
      #box {
        width: 800px;
        height: 800px;
        background-color:pink;
        margin: 30px auto;
        position: relative;
      }
      #small {
        width: 100px;
        height: 100px;
        background-color: rgba(250, 250, 119, 0.411);
        position: absolute;
        top: 50px;
        left: 60px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="small"></div>
    </div>
    <script>
      // 思路:遮罩移动的原理就是遮罩触发onmousemove事件时候,动态设置它的位置
      var box = document.querySelector("#box"); //获取大盒子
      var small = document.querySelector("#small"); //获取小盒子 遮罩
      box.onmousemove = function(event) {
        var pageX = event.pageX; //你移动到的那个点距离页面左边的距离
        var pageY = event.pageY; //你移动到的那个点距离页面顶部的距离
        var boxX = box.offsetLeft; //获取大盒子在页面中左边的距离
        var boxY = box.offsetTop; //获取大盒子在页面中顶部的距离

        var zhongX = pageX - boxX;
        var zhongY = pageY - boxY;

        var smallX = zhongX - small.offsetWidth / 2;
        var smallY = zhongY - small.offsetHeight / 2;
        if (smallX <= 0) {
          smallX = 0;
        }
        if (smallY <= 0) {
          smallY = 0;
        }
        var leftx = box.offsetWidth - small.offsetWidth;
        var topY = box.offsetHeight - small.offsetHeight;
        if (smallX > leftx) {
          smallX = leftx;
        }
        if (smallY > topY) {
          smallY = topY;
        }
        small.style.left = smallX + "px";
        small.style.top = smallY + "px";
      };
    </script>
  </body>

验证码倒计时

<body>
    <input type="text" id="txt">
    <button id='btn'>发送</button>
    <div id="box"></div>
    <script>
        var num=10;//定义初始时间
        var btn=document.getElementById('btn');
        btn.addEventListener("click",function(){
            //按钮禁用
            btn.disabled=true;
            function countTime(){
                var box=document.getElementById('box');//获取div元素
                box.innerHTML=num+"秒后重新验证";
                num--;
                if(num==0){
                    clearInterval(timer);//清除定时器
                    box.innerHTML='请重新输入验证码'
                    //允许再次点击
                    btn.disabled=false;
                    num=10;
                }
            }
            var timer=setInterval(countTime,1000);//开启定时器,并且保留返回值
        },false)

    </script>

京东倒计时

<style>
    #bigBox {
        width: 190px;
        height: 260px;
        margin: 0 auto;
        background-image: url(../切图库2/闪电倒计时.png);


    }

    #bigBox h2 {
        width: 190px;
        text-align: center;
        color: white;
        padding-top: 40px;
    }


    .c1 div {
        background-color: #2f3430;
        width: 28px;
        height: 28px;
        display: inline-block;
        margin-left: 6px;
        margin-top: 100px;
        color: white;
        font-size: 23px;
    }

    .c1 span {
        color: white;
        font-size: 28px;
        height: 28px;
        display: inline-block;
        padding-top: 1px;
        line-height: 28px;

    }
</style>

<body>
    <div id="bigBox">
        <h2>
            距离假期结束
        </h2>
        <div class="c1">
            <div id="tian"></div>
            <span>:</span>
            <div class="shi"></div>
            <span>:</span>
            <div class="fen"></div>
            <span>:</span>
            <div class="miao"></div>
        </div>
    </div>
    <script>
        var tian = document.querySelector('#tian')
        var shi = document.querySelector('.shi')
        var fen = document.querySelector('.fen')
        var miao = document.querySelector('.miao')
        var inputtime = new Date("2021-10-07 12:00:00")
        mingzi()
        setInterval(mingzi, 1000)
        function mingzi() {
            var nowtime = new Date();
            var timer = (inputtime - nowtime) / 1000;
            var a = parseInt(timer / 60 / 60 / 24);
            a = a < 10 ? "0" + a : a;
            tian.innerHTML = a
            var b = parseInt(timer / 60 / 60 % 24);
            b = b < 10 ? "0" + b : b;
            shi.innerHTML = b
            var c = parseInt(timer / 60 % 60);
            c = c < 10 ? "0" + c : c;
            fen.innerHTML = c
            var d = parseInt(timer % 60);
            d = d < 10 ? "0" + d : d;
            miao.innerHTML = d
            if(d==0){
                clearInterval=(minzi);
            }
        }
    </script>

随机抽奖

<style>
    #d1 {
        width: 1880px;
        height: 900px;
        background-color: red;
        line-height: 900px;
        text-align: center;
        color: white;
        font-size: 360px;
    }
</style>

<body>
    <button id="d2">抽奖</button>
    <button id="d3">结束</button>
    <div id="d1">

    </div>

    <script>
        var a = document.getElementById('d2');
        var b = document.getElementById('d3');
        var c = document.getElementById('d1');
        var timer;
        var arr = ['鎏金聋', '理串逸', '亡坚果', '痒总锐', '假异哞', '亡智闻', '余总说', '联名',
            '胡俊丽', '家臣非', '玛襑豫', '尘世好', '伤与球', '阿伟'];
        a.addEventListener('click', function () {
            a.disabled = true;
            function fu() {
                var h = Math.floor(Math.random() * arr.length)
                c.innerHTML = "恭喜" + arr[h];
            }
            timer = setInterval(fu, 1)
        }, false);
        b.onclick = function () {
            clearInterval(timer);
            a.disabled=false;
        }
    </script>
</body>

###

相关文章

Java 处理常见的 HTTP 请求类型

5 种常见的请求类型: GET :请求从服务器获取特定资源。举个例子&#...

CUDA 编程指南(Shane Cook) 第10章 第5节 编写自己的内核摘录

10.5 编写自己的内核 在高层指定并行性让编译器执行繁重的lifting到使用更擅长...

湖南“制造湘军”名片实力“出圈”

湖南“制造湘军”名片实力“出圈”

2022-08-09 17:02:46 8月9日,湖南省委宣传部召开打...

未做安全措施,19岁女孩打卡网红沙滩车被甩下车,导致肝破裂住进ICU

未做安全措施,19岁女孩打卡网红沙滩车被甩下车,导致肝破裂住进ICU

2022-08-08 17:47:47 近日,湖南航天医院重症医学科(...

(47)FPGA指数运算符(V代码实现)

(47)FPGA指数运算符(V代码实现) 1.1 目录 1)目录 2)FPGA简介...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。