前端面试题（含笔试）（二）

最新推荐文章于 2022-12-07 16:08:09 发布

ace_TiAmo

最新推荐文章于 2022-12-07 16:08:09 发布

阅读量187

点赞数 1

分类专栏： js 文章标签：前端面试

本文链接：https://blog.youkuaiyun.com/ace15824843202/article/details/84765157

版权

js 专栏收录该内容

16 篇文章

订阅专栏

11.JavaScript中如果判断一个变量为string，请用函数实现

 //string 有两种生成方式

  var str1 = '字符串1';
    var str2= new String('字符串2');
    var num =3424;
    function isString(str) {
        //console.log(str);
        if (typeof str==='string' || str.__proto__===String){
            //str.__proto__或用str.constructor来判断都行
            console.log(str+'是string');
        }else {
            console.log(str + '不是string')
        }
    }
    isString(str1);
    isString(str2);
    isString(num);

12.网页实现一个动态显示，距离xxxx年还有多少时间的倒计时格式为距离XX年还有XX天XX时XX分XX秒

<div id="box"></div>
<script>
    CountDown('box',2019);
function CountDown(el,year) {
    var timer='';
    var box = document.getElementById(el);
    var newYear = year-1;
    var targetTime = new Date(newYear,12,1,0,0,0); //月份是要+1 ,因此这里的月份要减去1
    //console.log(targetTime);
    countDown();
    clearInterval(timer);
    timer = setInterval(countDown,1000);
    function countDown() {
        var currentTime= new Date();
        var t = parseInt((targetTime-currentTime)/1000); //换算成秒
        var day = parseInt(t/86400);
        //console.log(day);
        var hours = parseInt(t%86400/3600);
        //console.log(hours);
        var min = parseInt(t%3600/60);
        // console.log(min);
        var sec = parseInt(t%60);
        //console.log(sec);
        box.innerHTML='距离'+year+'年还有'+getZero(day)+'天'+getZero(hours)+'时'+getZero(min)+'分'+getZero(sec)+'秒';
    }

    function getZero(n) {
        var n= n||0;
        return n<10?'0'+n:''+n
    }
}
</script>

13.鼠标点击后，讲button1移动button2的后面


<div>
    <button id="btn1">按钮一</button>
    <button>按钮二</button>
</div>
<script>
 let btn1 = document.getElementById('btn1');
    btn1.onclick = function(){
        btn1.parentNode.appendChild(btn1);
    };

</script>

14.js中有几种数据类型

/*
* <1>基本数据类型：Number String Undefined Null Boolean
* <2>引用数据类型：object function 数组
*
* */

15.鼠标点击任意标签，alert该标签的名称

document.onclick = function (ev) {
        var ev = window.event || ev;
        var _this = ev.target||ev.srcElement;
        alert(_this.nodeName);
        //console.log(ev);
    }

16.ajax是什么？什么是同步和异步，怎么解决跨域问题
    
    (1)异步JavaScript和XML，是一种创建交互式网页应用的技术技术，无需在整个页面加载的情况下，实现部分网页更新
    (2)同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。用户填写所有       信息后，提交给服务器，    等待服务器的回应（检验数据），是一次性的。信息错误又要重新填写！
    异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。当用户填写完一条信息后，该信息会自动向服务器提  交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验。(通俗的来说,同步：就是按顺序从上往下运行，必须要上一件完成，才能做下一件事，异步：就是多件事件同时进行，不会互相影响，效率更高)
    (3)动态创建script标签，document.domain+iframe

17.如何点击每一列的时候获取的是alert他的index

<ul id="test">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

//es6中let声明变量的一个特性，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量
    var ali = document.getElementById('test').getElementsByTagName('li');
    for (let i=0 ;i <ali.length ;i++){
        ali[i].onclick = function () {
            alert(i);
        }
    }

<ul id="test">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>
 //es5
    var ali = document.getElementById('test').getElementsByTagName('li');
    for (var i=0 ;i <ali.length ;i++){
        ali[i].index=i; //自定义index属性
        ali[i].onclick = function () {
            alert(this.index);
        }
    }

18.异步加载js

//(1) defer 只支持IE（注：所有的defer脚本必须保证按顺序执行的。）

<script type="text/javascript" defer></script>

    (2)async （HTML5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。）

<script type="text/javascript" async></script>

   (3)动态创建script标签


    (function(){
    var scriptEle = document.createElement("script");
    scriptEle.type = "text/javasctipt";
    scriptEle.async = true;
    scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
    var x = document.getElementsByTagName("head")[0];
    x.insertBefore(scriptEle, x.firstChild);
    })();


//获取XMLHttpRequest对象，考虑兼容性。
    var getXmlHttp = function(){
        var obj;
        if (window.XMLHttpRequest)
            obj = new XMLHttpRequest();
        else
            obj = new ActiveXObject("Microsoft.XMLHTTP");
        return obj;
    };  
    //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
    var xmlHttp = getXmlHttp();
    xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
    xmlHttp.send(); 
    xmlHttp.onreadystatechange = function(){
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
            var script = document.createElement("script");
            script.text = xmlHttp.responseText;
            document.getElementsByTagName("head")[0].appendChild(script);
        }
    }

19.如何添加HTML中元素的事件，有几种方法

(1)在标签的内部定义事件：<div οnclick=""></div>
(2)先选取到元素element，之后element.on事件=function(){}
(3)使用事件监听element.addEventListener('click(事件不加on)',function(){})
element.attachEvent('onclick',function(){})

20.document.write和innerHTML有什么区别

document.write是把页面里的内容全部清空，在往里写
innerHTML可以有选择性指定特定的元素，清空里面的内容往里面写，而不单单是整个页面
document.getElementByTagName('div')[0].innerHTML='XXXXXXX'