前端面试题（一）

  • 编写一个JavaScript函数，实时显示当前时间，格式‘年-月-日 时：分：秒’？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input id="show" style="300px;"/>
  <script>
    function getTime(){
      var nowDate = new Date();
      var year = nowDate.getFullYear();
      var month = (nowDate.getMonth() + 1) > 10 ? nowDate.getMonth() + 1 : '0' + (nowDate.getMonth() + 1);
      var day = nowDate.getDate() > 10 ? nowDate.getDate() : '0' + nowDate.getDate();
      var hour = nowDate.getHours() > 10 ? nowDate.getHours() : (nowDate.getHours() == 0 ? 24 : '0' + nowDate.getHours());
      var minutes = nowDate.getMinutes() > 10 ? nowDate.getMinutes() : '0' + nowDate.getMinutes();
      var seconds = nowDate.getSeconds() > 10 ? nowDate.getSeconds() : '0' + nowDate.getSeconds();
      var str= year +"-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
      document.getElementById("show").value = str;
    }
    window.setInterval("getTime()", 1000);
  </script>
</body>
</html>

  • JavaScript包括哪些数据类型，请分别编写3种以上类型的判断函数如：isString（）？

　　数据类型：字符串、数字、布尔、数组、对象、null、undefined

　　判断数据类型函数：typeof, instanceof, prototype

  • 如何显示/隐藏一个DOM元素？

显示：object.style.display="block";
隐藏：object.style.display="none";

  • 如何添加html元素的事件处理，有几种方法。

　　1. 在控件上直接激发事件

　　2. 在页面加载的时候就调用脚本激发控件的某个事件

　　3. 在后台利用后台代码强行执行控件的事件。

  • 如何控制alert中的换行。

　　 alert("text text");

  • 判断一个字符串中出现次数最多的字符，统计这个次数。

　　

<script>
    var str = "abcdefgaddda";
    var obj = {};
    // 每个字符出现次数
    for (let i = 0; i < str.length; i++) {
        var key = str[i];
        typeof obj[key] === 'undefined' ? obj[key] = 1 : obj[key]++
    }
    var max = -1;
    var max_key = key;
    // 排序
    for (let key in obj) {
        if (max < obj[key]) {
            max = obj[key];
            max_key = key;
        }
    }
    document.write("字符:" + max_key + ",出现次数最多为:" + max + "次")
</script>

  • 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/
console.log(reg.test("11a__a1a__a1a__a1a__"))

  • 请编写一个JavaScript函数parseQueryString，他的用途是把URL参数解析为一个对象

   function parseQueryString(url) {
        var result = {};
        var arr = url.split("?");
        if (arr.length <= 1) {
            return result;
        } else {
            arr = arr[1].split("&");
            arr.forEach(item => {
                let a = item.split('=')
                result[a[0]] = a[1]
            })
            return result;
        }
    }

    var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
    var ps = parseQueryString(url);
    console.log(ps)

  • 在页面中有如下html：

    <div id="field">
    <input type="text" value="User Name"/>
</div>
<span class="red"></span>

    要求用闭包方式写一个JS从文本框中取出值并在标签span中显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="firld">
    <input type="text" value="User Name"/>
</div>
<span id="red" class="red"></span>
<span class="red"></span>
<span class="red"></span>
<span class="red"></span>

<script>
    var result = (function () {
        var value = document.getElementById("firld").children[0].value;
        var all = document.getElementsByTagName("span");
        for (let i = 0; i < all.length; i++) {
            if (all[i].className == 'red') {
                all[i].innerHTML = value;
            }
        }
    })();
</script>
</body>
</html>

  • 在IE6.0下面是不支持position：fixed的，请写一个JS使用固定在页面的右下角。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tit {
            position: absolute;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box" class="tit"></div>
<script>
    window.onscroll = window.onresize = window.onload = () => {
        var getDiv = document.getElementById('box');
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        getDiv.style.left = document.documentElement.clientWidth - getDiv.offsetWidth + 'px';
        getDiv.style.top = document.documentElement.clientHeight - getDiv.offsetHeight + scrollTop + 'px';
    }
</script>
</body>
</html>

  • 请实现，鼠标移到页面中的任意标签，显示出这个标签的基本矩形轮廓。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tit {
            display: block;
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
<div id="box" class="tit">div</div>
<p class="tit">p</p>
<a class="tit" href="www.baidu.com" alt="www.baidu.com">a</a>
<script>
    function mouseBorder(t) {
        var c = t.childNodes

        for (let i = 0; i < c.length; i++) {
            var d = c[i];

            if (d.nodeType == 1) {
                d.onmouseover = function () {
                    this.style.border = '1px solid red'
                }
                d.onmouseout = function () {
                    this.style.border = ''
                }
                mouseBorder(d);
            }
        }

    }

    mouseBorder(document.body);
</script>
</body>
</html>

  • js的基础对象有哪些，window和document的常用的方法和属性列出来

　　基础对象：String,Number,Boolean

　　Window:

　　方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

　　属性：name,parent,screenLeft,screenTop,self,top,status

　　Document:
 
　　方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
 
　　属性：cookie,doctype,domain,documentElement,readyState,URL,
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/strong-FE/p/10533078.html