[JavaScript知识库] 腾讯光子工作室一面 (60min)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 腾讯光子工作室一面 (60min) -> 正文阅读

[JavaScript知识库]腾讯光子工作室一面 (60min)

腾讯光子工作室一面 (60min)

自我介绍
http版本之间区别
http有多少层，七层，实际上五层

两道编程题：

将一个圆向右移动100px，并放大2为两倍（没做出来，宽高设置错了）

<style>
body {
    margin: 0;
}
#circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: aquamarine;
    margin: 20px 0;
}
.circle {
	background-color:blueviolet;
}
</style>
<body>
    <div id="circle" class="circle">
    </div>
    <script>
        const div = document.getElementById("circle");
        let i = 0;
        const interval = setInterval(function(){
            if(i >= 10){
                clearInterval(interval);
                return;
            }
            const offsetTop = div.offsetTop;
            div.style.width = div.offsetWidth + 4 + "px";
            div.style.height = div.offsetHeight + 4 + "px";
            div.style.marginLeft = 10 * (i + 1) + "px";
            div.style.marginTop = offsetTop - 2 + "px";
            div.style.marginBottom = offsetTop - 2 + "px";
            i++;
        }, 1000);
    </script>
</body>

千分位分割，正则表达式和循环两种方式

function cut(num) {
    return num && num.toString().replace(/\d+/, function(s){
        return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
    })
}

function cut2(num) {
    num = num.toString();
    let res = "";
    let temp = 0;
    for (let i = num.length - 1; i >= 0; i--) {
        if (temp == 3) {
            res = num[i] + ',' + res;
            temp = 1;
        } else {
            res = num[i] + res;
            temp++;
        }
    }
    return res;
}

事件循环的理解，下面代码的打印顺序（答错了）

console.log(11);
setTimeout(()=>{console.log(33)}, 0);
console.log(22)

html有哪些标签，class和id的区别

<style>
    #circle {
       color: red;
    }
    .circle {
        color: blue;
    }
</style>
<div id="circle" class="circle"></div>
<div id="circle" class="circle"></div>