头条一面笔试（2018.12.20）

  1. 在HTML中有一个table，其中有很多td，编程实现，点击任意一个td，输出该td的值。代码见bytedance-test2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    </head>
    <body>
    	<table id="table" border="1">
    		<tr>
    			<td>1000</td>
    		    <td>2000</td>
    		    <td>3000</td>
    		    <td>4000</td>
    		</tr>
    	    <tr>
    			<td>5000</td>
    		    <td>6000</td>
    		    <td>7000</td>
    		    <td>8000</td>
    		</tr>
    	</table>
    <script type="text/javascript">
    	document.getElementById("table").onclick = function(event) { //注意点击事件的绑定，并且区分jquery
    		if(event.target.tagName == "TD") { //需要区分这里的标签名，否则会有tr或table,而且是大写的名称
    			var value = event.target.innerHTML;//获取值，这里还可以用innerText
    			console.log(value);
    		}	
    	};
    </script>
    </body>
    </html>

  2. 实现一个函数拥有如下功能：输入一个时间/时间戳，输出的是相对于现在时间的“刚刚”（一分钟之内），“1分钟前”，“两小时前”，“一天前”，大于两天就输出时间。代码见bytedance-test3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    function getTime (time) {
    	var date = new Date();
    	var datestamp = date.getTime(); //获取此时的时间戳
    	var timestamp;
    	if(typeof time == "number") {
    		timestamp = time; //否则不变
    	} else {
    		timestamp = time.getTime();
    	}
    	var value = datestamp - timestamp; //求得时间差
    	if(value  <= 59 * 1000) {
    		console.log("刚刚");
    	} else if (value < 2 * 60 * 60 * 1000) {//注意代码可读性
    		console.log("一分钟前");
    	} else if (value < 24 * 60 * 60 * 1000) {
    		console.log("两小时前");
    	} else if (value < 48 * 60 * 60 * 1000) {
    		console.log("一天前");
    	} else {//这里还要把时间戳转换为时间
    		var newdate = new Date(timestamp);
    		var year = newdate.getFullYear();
    		var month = newdate.getMonth();
    		var day = newdate.getDate();
    		console.log(year + "-" + month + "-" + day);
    	}
    }
    var date = new Date(2008, 11, 20, 10, 45, 55);
    getTime(date);

  3. 描述对原码/反码/补码的理解，以及他们之间的转换方式

原码就是符号位加真值，符号位是正0负1；反码对于负数符号位不变其余各位按位取反，正数反码不变；补码对于负数就是反码加1，正数补码不变

  1. 实现css布局，在浏览器中有三个div，从上到下依次为header,content以及footer，要求满足content很多时候，footer被挤出浏览器窗口，但是它很少的时候footer一直在底部。代码见bytedance-test5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		.box {
    			width: 100%;
    			min-height: 100vh;/*这里设置高度为100%窗口高度100% viewport height*/
    			display: flex;
    			flex-direction: column;
    			justify-content: space-between;
    		}
    		.top {
    			display: flex;
    			flex-direction: column;
    		}
    		.header {
    			height: 100px;
    			border: #888 solid 1px;
    			background-color: lightblue;
    			display: flex;
    			margin: 10px 10px 5px 10px;
    			align-items: center;
    			justify-content: center;
    		}
    		.footer {
    			height: 100px;
    			border: #888 solid 1px;
    			background-color: lightblue;
    			display: flex;
    			margin: 5px 10px 10px 10px;
    			align-items: center;
    			justify-content: center;
    		}
    		.content {
    			height: 800px; /*此处高度可以随意设置或被内部元素撑开任意高度，都可保证样式不变*/
    			border: #888 solid 1px;
    			background-color: lightblue;
    			display: flex;
    			margin: 5px 10px 5px 10px;
    			align-items: center;
    			justify-content: center;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<div class="top">
    			<div class="header"> 
    				header 
    			</div>
    			<div class="content"> 
    				content
    			</div>
    		</div>
    		<div class="footer"> 
    			footer
    		</div>
    	</div>
    </body>
    </html>

  2. 对数字进行规格化：把1234567890.12变成1,234,567,890.12,用js和正则实现。代码见bytedance-test8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //方法一
    function format (num) {
    	var string = num.toString();
    	var array = string.split("");
    	array.splice(1, 0, ",");
    	array.splice(5, 0, ",");
    	array.splice(9, 0, ",");
    	var newstring = array.join("");
    	console.log(newstring);
    }
    format(1234567890.12);
    //方法二

  3. 获取浏览器中的文字，使得他们成三行四列的排列方式

  4. 请实现一个Event类,继承自此类的对象都会拥有以下方法on,off,once和trigger
  5. 读程序题，关于bind

PS:要求90分钟做完