当前位置：网站首页>无聊的冷知识3

无聊的冷知识3

2022-08-07 05:12:00 【张帆X】

1、希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架)

（1）、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" checked>
    <input type="checkbox" checked>
    <input type="checkbox">
</body>
</html>

<script>
    var inp=document.getElementsByTagName('input');
    var arry=[];
    for(let i in inp ){
        if(inp[i].checked==true){
            arry.push(i);
           
        }
    }
    console.log(arry.length);
</script>

2、设置一个已知 ID 的 DIV 的 html 内容为 xxxx，字体颜色设置为黑色

 <div id="box"></div>

 var box=document.getElementById('box');
    box.innerHTML='11111';
    box.style.color='red';

3、当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？

1、直接在 DOM 里绑定事件

 <div onclick="on()"></div>

2、在 JS 里通过 onclick 绑定

var box=document.getElementById('box');
        box.onclick=()=>{
            box.style.color='blue'
        }

3、通过事件监听进行绑定

  var box=document.getElementById('box');
        box.addEventListener('click',()=>{
            box.style.backgroundColor='yellow'
        })

4、undefined 会在以下三种情况下产生：

1、一个变量定义了却没有被赋值

2、想要获取一个对象上不存在的属性或者方法:

3、一个数组中没有被赋值的元素

5、看代码给答案

（1）、

var foo = "11"+2-"1";
         console.log(foo);//111 
         console.log(typeof foo);//number

首先前面是字符串与number数字类型相加会拼接，拼接后变成112字符串类型，后来与1相减，会进行隐式转换，变成两个数字类型相减；

（2）、

var a = new Object(); 
        a.value = 1; 
        b = a;  // {value:1} 
        b.value = 2; 
        alert(a.value);//2

详情解释可看我博客文章为node.js内容 node.js_张帆2001的博客-CSDN博客

（3）、

       var foo = 1; 
            function fn(){
                console.log(foo);//undefined
                var foo=2;
                console.log(foo);//2
            }
            fn();

上面的代码相当于下面这个，变量提升

       var foo = 1; 
            function fn(){
                var foo;
                console.log(foo);//undefined
                var foo=2;
                console.log(foo);//2
            }
            fn();

6、

已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法” getElementById”

var foo = "get-element-by-id"
        var arr = foo.split("-");
        console.log(arr); //["get", "element", "by", "id"]
        for (var i = 1; i < arr.length; i++) {
            arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
        }
        console.log(arr) //["get", "Element", "By", "Id"]
        var arr = arr.join("") //getElementById
        console.log(arr);

7、

var numberArray = [3,6,2,4,1,5];

1、实现对该数组的倒排

 var a=[4,8,2,0,4,1,9,2,0,4,9,3,6,7,0];
            a.reverse();
            console.log(a);//[0, 7, 6, 3, 9, 4, 0, 2, 9, 1, 4, 0, 2, 8, 4]

2、实现对该数组的降序排列

 var a=[4,8,2,0,4,1,9,2,0,4,9,3,6,7,0];
            a.sort((a,b)=>{
                return a-b;
            })
            console.log(a);// [0, 0, 0, 1, 2, 2, 3, 4, 4, 4, 6, 7, 8, 9, 9]

8、

输出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月 26 日，

则输出 2014-09-26

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        #main{
            width: 600px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            border-radius: 20px;
            margin: 0px auto;
            color: rgb(22, 182, 245);
            background-color: rgb(214, 235, 171);
        }
    </style>
</head>
<body>
    <input type="checkbox" checked="checked">
    <input type="checkbox" checked="checked">
    <input type="checkbox">

    <div id="box"></div>

    <div onclick="on()"></div>

    <div id="main"></div>
</body>
</html>

    var main=document.getElementById('main');
    var date_=new Date();
    var date_year=date_.getFullYear();
    var date_mon=date_.getMonth();
    var date_date=date_.getDate();
    var date_hour=date_.getHours();
    var date_min=date_.getMinutes();
    var date_sec=date_.getSeconds();
    var str=`${date_year}年-${date_mon}月-${date_date}日-
${date_hour}时-${date_min}分-${date_sec}秒`
    main.innerHTML=str;

9、把字符串str='<ul><li><$name></li><#age><li>#</li><@qq></ul>'中的<li>替换为change,把ul替换为again

 var str='<ul><li><$name></li><#age><li>#</li><@qq></ul>'
     str=str.replace(/<li>/g,'change').replace(/ul/g,'again');
     console.log(str);//<again>change<$name></li><#age>change#</li><@qq></again>

原网站

版权声明
本文为[张帆X]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_67490903/article/details/125248829