【Web前端】笔试题含解析

下面标签嵌套正确的是

A.ul只能紧挨着li
B.a中不能再嵌套a
C.dl dt
D.ol li是有序排列
下面哪些是HTML5 新增的表单元素？
在HTML中，（）可以在网页上通过链接直接打开邮件客户端发送邮件。

mailto 后面加发送邮件地址
请选出所有的置换元素（）

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中的、、、、都是置换元素。这些元素往往没有实际的内容，即是一个空元素。
置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
b) 不可替换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。
例如： label中的内容标签是一个非置换元素，文字label中的内容”将全被显示。
下面哪条声明能固定背景图片（）
下列说法正确的是（）
以下关于盒子模型描述正确的是：
下面哪个属性不会让 div 脱离文档流（normal flow）？
英文字母全部转为大写正确的是（）
假设在今日头条里面,有很多工作人员检查新闻是不是属于虚假新闻,所有新闻真实率到达了98%,工作人员在检验一个真实的新闻把它检验为一个虚假的新闻的概率为2%,而一个虚假的新闻被检验为真实的新闻的概率为5%.那么,一个被检验为真实的新闻确实是真实的新闻的概率是多大?

现在有两堆石子，小今与小条玩游戏，2个人都足够聪明，两个人规定:每次每人只能从其中一堆中取走1个或2个或3个石子，后将石子全部取完的人胜利。现在两堆石子的个数为8和9，请问如何安排才能让小今必胜?
以下描述正确的：

13. 表toutiao_tb

查询title中包含cv且type是1的记录

下列关于操作系统进程与线程的区别正确的是：
下面那个页面调度算法,当进程分配到的页面数增加时,缺页中断的次数可能增加也可能减少
下列排序算法不稳定的有?

不稳定：快选堆希
稳定：插冒归基

运行以下程序

y和z的最终结果为:
这段代码运行后的输出是:
页面有一个id为 button1的按钮，如何通过原生的js禁用？(IE 考虑IE 8.0以上版本)
页面有一个id为 button1的按钮,通过原生的js设置背景色为红色？
现在有一个字符串，你要对这个字符串进行 n 次操作，每次操作给出两个数字：(p, l) 表示当前字符串中从下标为 p 的字符开始的长度为 l 的一个子串。你要将这个子串左右翻转后插在这个子串原来位置的正后方，求最后得到的字符串是什么。字符串的下标是从 0 开始的，你可以从样例中得到更多信息。

var line = readline();var n = readline();for(var i=0;i<n;i++){var line2 = readline().split(' ');var start = parseInt(line2[0]);var len = parseInt(line2[1]);var temp = line.substr(start,len).split('').reverse().join('');line = line.slice(0,start+len) + temp + line.slice(start+len);}print(line);

你作为一名出道的歌手终于要出自己的第一份专辑了，你计划收录 n 首歌而且每首歌的长度都是 s 秒，每首歌必须完整地收录于一张 CD 当中。每张 CD 的容量长度都是 L 秒，而且你至少得保证同一张 CD 内相邻两首歌中间至少要隔 1 秒。为了辟邪，你决定任意一张 CD 内的歌数不能被 13 这个数字整除，那么请问你出这张专辑至少需要多少张 CD ？

import java.util.*;public class Main{public static void main(String[] args){Scanner in = new Scanner(System.in);while(in.hasNext()){int n = in.nextInt();int s = in.nextInt();int l = in.nextInt();int count = (l+1)/(s+1);count = Math.min(n, count);if(count%13==0){count--;}int sum = n/count;int yu = n%count;if(yu!=0){sum++;if(yu%13==0&&(count-yu)==1){//查看最后最后一张专辑的情况sum++;}}System.out.println(sum);}}
}

变量a是一个64位有符号的整数，初始值用16进制表示为：0Xf000000000000000；变量b是一个64位有符号的整数，初始值用16进制表示为：0x7FFFFFFFFFFFFFFF。则a-b的结果用10进制表示为多少？（）
这段代码运行后得到的结果分别是什么？

console.log(([])?true:false);
console.log(([]==false?true:false));
console.log(({}==false)?true:false)

下列哪些是块级元素（）

input是行内替换元素
下面关于跨域问题的说法正确的是？
以下符合 ES6 写法的有：（）
可继承的样式属性包括（）
堆的数据结构能够使得堆顶总是维持最大（对于大根堆）或最小（对于小根堆），给定一个数组，对这个数组进行建堆，则平均复杂度是多少？如果只是用堆的 push 操作，则一个大根堆依次输入 3,7,2,4,1,5,8 后，得到的堆的结构示意图是下述图表中的哪个？（）

答案是:D
初始建堆操作复杂度是 O(n)的.
建堆时,由于只采取Push的操作,所以每次将新的数字Push到堆的最后一位,然后按照插入到原则,进行堆的由下至上调整.
最终得出D为答案.
http 请求方式 get 和 post 的区别包括（）
下面哪些属于JavaScript的typeof运算符的可能结果：（）
老王有两个孩子，已知至少有一个孩子是在星期二出生的男孩。问：两个孩子都是男孩的概率是多大？

老王有两个孩子，已知至少有一个孩子是在星期二出生的男孩。问：两个孩子都是男孩的概率是多大？
下列说法正确的有：（）

AB， display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint
TCP断开连接的四次挥手中，第四次挥手发送的包会包含的标记，最正确的描述是？（）
页面有一个按钮button id为button1，通过原生的js如何禁用？（）

上面是一段按钮的html代码如果要用原生的js来禁用这个按钮可以用这样： document.getElementByIdx_x_x(“btnShow”).disabled=true;（这样就把按钮禁用了）如果要重新开启按钮，则可以让disabled=false;即可那么在jquery下面要如何设置呢？其实也很简单利用jquery的attr的方法即可 $("#btnShow").attr({“disabled”:“disabled”}); 如要让按钮恢复可用，可以采用removeAttr方法把disabled属性删除即可。 $("#btnShow").removeAttr(“disabled”);
关于下列 CSS 选择器：ID 选择器、类选择器、伪类选择器、标签名称选择器，排序正确的是：（）
假设 a 是一个由线程 1 和线程 2 共享的初始值为 0 的全局变量，则线程 1 和线程 2 同时执行下面的代码，最终 a 的结果不可能是（）

不管怎样线程对a的操作就是+1后-2
1.线程1执行完再线程2执行，1-2+1-2=-2
2.线程1和2同时+1，再-2不同时，1-2-2=-3
3.线程1和2不同时+1，同时-2，1+1-2=0
4.线程1和2既同时+1又同时-2，1-2=-1
没有结果为1的情况
使用HTML+CSS实现如图布局，border-width:5px，格子大小是50px*50px，hover时边框变成红色，需要考虑语义化。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">table{/* border-collapse:separate;*/border: none;border-spacing: 0;}td{position: relative;width: 50px;height: 50px;border: 5px solid blue;background: #fff;color: green;text-align: center;line-height: 50px;display: inline-block;}tr:not(:first-child) td{margin-top: -5px;}tr td:not(:last-child){margin-right: -5px;}td:hover{border-color: red;cursor: pointer;z-index: 2;}</style>
</head><body><table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>
</body></html>

给出一个上传文件时不用刷新页面的方案，要求写出关键部分的js代码。

<input id="upload" type="file" />
<button id="upload-btn"> upload </button>

document.getElementById('upload-btn').onclick = function(){varinput = document.getElementById('upload');varfile = input.files[0];varformData = newFormData();forData.append('file',file);fetch({url:'/upload',mothod:'POST',body:formData}).then((d)=>{console.log('result is',d);alert('上传完毕');})}

给定整数n和m, 将1到n的这n个整数按字典序排列之后, 求其中的第m个数。
对于n=11, m=4, 按字典序排列依次为1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9, 因此第4个数是2.
对于n=200, m=25, 按字典序排列依次为1 10 100 101 102 103 104 105 106 107 108 109 11 110 111 112 113 114 115 116 117 118 119 12 120 121 122 123 124 125 126 127 128 129 13 130 131 132 133 134 135 136 137 138 139 14 140 141 142 143 144 145 146 147 148 149 15 150 151 152 153 154 155 156 157 158 159 16 160 161 162 163 164 165 166 167 168 169 17 170 171 172 173 174 175 176 177 178 179 18 180 181 182 183 184 185 186 187 188 189 19 190 191 192 193 194 195 196 197 198 199 2 20 200 21 22 23 24 25 26 27 28 29 3 30 31 32 33 34 35 36 37 38 39 4 40 41 42 43 44 45 46 47 48 49 5 50 51 52 53 54 55 56 57 58 59 6 60 61 62 63 64 65 66 67 68 69 7 70 71 72 73 74 75 76 77 78 79 8 80 81 82 83 84 85 86 87 88 89 9 90 91 92 93 94 95 96 97 98 99 因此第25个数是120…

既然是字典序，那么很自然，我们可以考虑使用字典树来实现，但是，这里并不需要真的生成这个字典树，而只需要计算对应分支的节点数就行了。计算分支节点数，那么很简单，节点数就是上级节点*10，总的节点数= 1 + （1 * 10） + （1 * 10 * 10） + （1 * 10 * 10 * 10） +……，这里需要注意最后的边界，n以内的节点数，那么，最后相加的时候必须要把n+1 ~ (1 * 10 * 10 *……)这几个数去掉。
既然知道了如何计算字典树分支的节点数，要想知道第m个数是什么，那么也就是找第m个节点，首先从1开始，如果1分支的节点数>m，那么第m个数肯定是以1开头，进一步搜索其子节点，搜索子节点时不用再搜索1了，所以是搜索1分支的第m-1个节点。如果1分支的节点数<m，那么所查找的数肯定不是1开头，那么开始搜索2分支，在2分支中，所要找的数应该是第（m-（1分支节点数））个数。重复这个过程，要么搜索子节点，要么搜索兄弟节点，知道最终m==0，也就是当前节点就是所要搜索的节点。为了便于理解，简单修改了下java代码：

import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc = new Scanner(System.in);while (sc.hasNext()) {long n = sc.nextLong();long m = sc.nextLong();System.out.println(solve(n, m));}}private static long solve(long n, long m) {long ans = 1;while (m != 0) {long cnt = getCntOfPre(ans, n);if(cnt >= m) {m --;if(m == 0)break;ans *= 10;} else {m -= cnt;ans ++;}}return ans;}private static long getCntOfPre(long pre, long n) {long cnt = 1;long p = 10;for (; pre * p <= n; p *= 10) {if (pre * p - 1 + p < n)cnt += p;elsecnt += n - pre * p + 1;//          cnt += Math.min(n, pre * p - 1 + p) - pre * p + 1;}return cnt;}
}

为了不断优化推荐效果，今日头条每天要存储和处理海量数据。假设有这样一种场景：我们对用户按照它们的注册时间先后来标号，对于一类文章，每个用户都有不同的喜好值，我们会想知道某一段时间内注册的用户（标号相连的一批用户）中，有多少用户对这类文章喜好值为k。因为一些特殊的原因，不会出现一个查询的用户区间完全覆盖另一个查询的用户区间(不存在L1<=L2<=R2<=R1)。

这个题的主要问题就是使用顺序扫描用户的时候会花费比较长的时间，从而导致超时

为了节省顺序查找的时间，我们可以利用二分查找的思路来实现：
1.使用ArrrayList将喜好值相同的用户id存储起来（此时这个ArrayList的用户id是递增的）
2.使用hashmap将该喜好值为k和对应的用户id的list进行存储
3.每次查找时找到对应k的ArrayList进行二分查找即可
最后可以通过所有测试用例

import java.util.*;
public class Main{public int getCount(List<Integer> data, int target){int left=0, right = data.size()-1, middle=0;while(left <= right){middle = left + (right-left)/2;if (data.get(middle) > target)right = middle-1;else if(data.get(middle) < target)left = middle+1;elsereturn middle;}return left;}public void f(){Scanner sc = new Scanner(System.in);while(sc.hasNextLine()){int n, q, l, r, k;n = Integer.parseInt(sc.nextLine());Map<Integer, List<Integer>> map = new HashMap<>();for(int i=1; i<=n; i++) {int worth = sc.nextInt();if(!map.containsKey(worth))map.put(worth, new ArrayList<>());map.get(worth).add(i);}sc.nextLine();q = Integer.parseInt(sc.nextLine());for(int i=0; i<q; i++){l = sc.nextInt();r = sc.nextInt();k = sc.nextInt();sc.nextLine();if(map.containsKey(k)){if(r<map.get(k).get(0) || l > map.get(k).get(map.get(k).size() -1))System.out.println(0);else{int left = getCount(map.get(k), l);int right = getCount(map.get(k), r);if (right < map.get(k).size() && map.get(k).get(right) == r)System.out.println(right-left+1);elseSystem.out.println(right - left);}}elseSystem.out.println(0);}}}public static void main(String[] args){new Main().f();}
}

作为一个手串艺人，有金主向你订购了一条包含n个杂色串珠的手串——每个串珠要么无色，要么涂了若干种颜色。为了使手串的色彩看起来不那么单调，金主要求，手串上的任意一种颜色（不包含无色），在任意连续的m个串珠里至多出现一次（注意这里手串是一个环形）。手串上的颜色一共有c种。现在按顺时针序告诉你n个串珠的手串上，每个串珠用所包含的颜色分别有哪些。请你判断该手串上有多少种颜色不符合要求。即询问有多少种颜色在任意连续m个串珠中出现了至少两次。

// 初始化串珠总个数，连续的串珠个数，颜色种类数，所有串珠的颜色信息数组, 同一颜色的串珠数组, 不合格的颜色个数
let ballNums, linkNums, colorNums, ballColor = [], sameColorBall = [], count = 0;
[ballNums, linkNums, colorNums] = readline().split(' ').map(item => Number(item));// 依次保存每个串珠所用颜色信息
// 数组的每个元素都是一个数组，元素数组的第一位代表颜色个数，后续代表所用颜色
for(let i = 0; i < ballNums; ++i) {ballColor[i] = readline().split(' ').map(item => Number(item))
}// 将同一颜色出现的串珠序号进行收集
ballColor.forEach((item, index) => {// 若该串珠所用颜色种类大于0// console.log(item, 'item');if(item[0] > 0) {let colorArr = item.slice(1)// 下面的item代表不同的颜色种类colorArr.forEach(color => {// 如果之前已经保存过使用某颜色的串珠序号，则直接将其添加到数组中去if(sameColorBall[color]) {sameColorBall[color].push(index + 1)} else {sameColorBall[color] = [index + 1]}})}})
sameColorBall.forEach(item => {// sameColorBall[0]代表使用‘0’这种颜色的所有串珠的序号数组,这里的序号是按顺序排列的for(let i = 0; i < item.length - 1; ++i) {if(item[i+1] - item[i] < linkNums) {++count;break;}if(ballNums - item[item.length - 1] + item[0] < linkNums) {++count;break;}}
})console.log(count);

以下函数使用二分查找搜索一个增序的数组，当有多个元素值与目标元素相等时，返回最后一个元素的下标，目标元素不存在时返回-1。请指出程序代码中错误或不符最佳实践的地方（问题不止一处，请尽量找出所有你认为有问题的地方）

int BinarySearchMax(const std::vector<int>& data, int target){int left = 0;int right = data.size();while (left < right) {int mid = (left + right) / 2;if (data[mid] <= target)left = mid + 1;elseright = mid - 1;}if (data[right] == target)return right;return -1;
}

1、当data大小为零时，明显会出错，应该先判断一下。
2、 right 应该等于 data.size()-1，否则当目标出现在data最右边或比data中所有的数大时，会访问越界。
修改后的代码如下

int BinarySearchMax(const vector<int>& data, int target){if (data.size() == 0) return -1;int left = 0;int right = data.size() - 1;while (left < right) {int mid = (left + right) / 2;if (data[mid] <= target)left = mid + 1;elseright = mid - 1;}if (data[right] == target)return right;return -1;}

设计一个TODO List，页面结构如下图所示，要求：使用HTML与CSS完成界面开发
实现添加功能：输入框中可输入任意字符，按回车后将输入字符串添加到下方列表的最后，并清空输入框
实现删除功能：点击列表项后面的“X”号，可以删除该项
实现模糊匹配：在输入框中输入字符后，将当前输入字符串与已添加的列表项进行模糊匹配，将匹配到的结果显示在输入框下方。如匹配不到任何列表项，列表显示空
注：以上代码实现需要能在浏览器中正常显示与执行。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>TODOList</title><style type="text/css">body{margin: 0;background-color: #f5f5f5;}h1{margin: 30px 0 0 0;color: #ff5550;text-align: center;font-size: 60px;}#back{width: 300px;margin: 0 auto;border: 1px solid #333;box-shadow: 0px 0px 3px #999;background-color: #fff;}#back input{width: 100%;box-sizing: border-box;line-height: 30px;border: none;border-bottom: 1px solid #000;padding: 5px 15px;font-size: 18px;}#list_back .single{position: relative;border-bottom: 1px solid #000;}#list_back .single p{width: 100%;height: 30px;margin: 0;line-height: 30px;padding: 5px 15px;}#list_back .single span{position: absolute;right: 0;top: 0;width: 30px;text-align: center;line-height: 40px;font-size: 18px;color: #000;cursor: pointer;}</style>
</head><body><h1>todos</h1><div id="back"><input id="addInput" type="text" name=""><div id="list_back"></div></div><script type="text/javascript">var oAddInput = document.getElementById('addInput');var oList_back = document.getElementById('list_back');var all = document.getElementsByClassName('single');oAddInput.onkeyup = function(){// alert(event.keyCode);//13// alert(event.code);//Enterif(event.keyCode == '13'){// alert('add');var oDiv = document.createElement('div');var oSpan = document.createElement('span');var oP = document.createElement('p');oDiv.appendChild(oP);oDiv.appendChild(oSpan);oP.innerHTML = oAddInput.value;oSpan.innerHTML = '&times;';oDiv.className = 'single';oList_back.appendChild(oDiv);oAddInput.value = '';//清空输入框oSpan.onclick= function(){oList_back.removeChild(this.parentNode);//绑定删除方法};}};//模糊查询function select(){oAddInput.addEventListener('keyup', function(e){//监听键盘抬起事件（所有键盘按钮）// console.log(e.target.value);var str = e.target.value;var reg = new RegExp('(' + str + ')', 'g');//匹配到的文字变红色，准备工作for( var i = 0; i<all.length; i++ ){var one = all[i].getElementsByTagName('p')[0];var newStr = one.innerText.replace(reg, '<font color=red>$1</font>');//换-->红色，用innerText防止用innerHTML将标签也读取出来出错。if( one.innerText.indexOf(str) == -1 ){//也选用innerHTMLall[i].style.display = 'none';//匹配不到的掩藏}else{one.innerHTML = newStr;//匹配到的变红}}if(str == ''){for( var i = 0; i<all.length; i++ ){all[i].style.display = 'block';//输入框空时全部显示}}});}select();  //函数解析完就运行</script>
</body></html>

以下函数用于找到整数矩阵matrix中，元素之和最大的n行m列的子矩阵的元素之和。请指出程序代码中错误的地方（问题不止一处，请尽量找出所有你认为错误的地方），并在不新增代码行的情况下将问题修复。
有一个推箱子的游戏, 一开始的情况如下图:

思路：利用广度搜索求最短路径，队列中的每个位置是人的位置和箱子的位置的集合，用四维数组记录走过的路程状态。首先判断人是否已经走到箱子了，位置重合时带箱子一起走，直到箱子的位置和终点的位置重合，输出路程。

let [n,m] = readline().split(' ').map(item=>Number(item));
let map = [],start={},end={};
for(let i=0;i<n;i++){let line = readline().split('')map.push(line)let fstart = line.indexOf('S'),fend = line.indexOf('E'),fbox = line.indexOf('0');if(fstart !== -1){start.px = i;start.py = fstart;}if(fend !== -1){end.x = i;end.y = fend;}if(fbox !== -1){start.bx = i;start.by = fbox;}
}
//初始化搜索队列和记录步数的四维数组
let queue = [start], location=[];
for(let i=0;i<n;i++){location[i]=[]; for(let j=0;j<m;j++){location[i][j]=[];for(let k=0;k<n;k++){location[i][j][k]=[]for(let p=0;p<m;p++){location[i][j][k][p]=-1}}}
}
location[start.px][start.py][start.bx][start.by]=0
//移动数组
const walk = [{x:0,y:1},{x:0,y:-1},{x:1,y:0},{x:-1,y:0}]
let now={}//存储当前人和箱子的位置
while(queue.length){now = queue.shift();//如果到达终点，则输出if(now.bx === end.x && now.by === end.y){console.log(location[now.px][now.py][now.bx][now.by]);break;}for(let move of walk){//移动人，判断人越界let player={x:now.px+move.x, y:now.py+move.y}if(player.x>=0 && player.x<n && player.y>=0 && player.y<m && map[player.x][player.y]!=='#'){let box = {}//如果移动后人与箱子重合，也移动箱子if(player.x === now.bx && player.y === now.by){//判断箱子越界box={x:now.bx+move.x, y:now.by+move.y}if(box.x<0 || box.x>=n || box.y<0 || box.y>=m || map[box.x][box.y]==='#'){continue;}}//如果不重合，箱子不动else{box.x = now.bx;box.y = now.by;}//是否已经遍历过if(location[player.x][player.y][box.x][box.y]<0){queue.push({px:player.x,py:player.y,bx:box.x,by:box.y});location[player.x][player.y][box.x][box.y] = location[now.px][now.py][now.bx][now.by]+1;}}}  }
if(now.bx!==end.x || now.by!==end.y){console.log(-1)
}

有n个房间，现在i号房间里的人需要被重新分配，分配的规则是这样的：先让i号房间里的人全都出来，接下来按照 i+1, i+2, i+3, … 的顺序依此往这些房间里放一个人，n号房间的的下一个房间是1号房间，直到所有的人都被重新分配。

现在告诉你分配完后每个房间的人数以及最后一个人被分配的房间号x，你需要求出分配前每个房间的人数。数据保证一定有解，若有多解输出任意一个解。

首先分析题目可知，i号房间的人数在分配完成后必然是最少的，先统计出最少的人数min（这说明循环了几轮），让每个房间减去min以减少循环次数，从最后一个分配的房间循环往前推，记录次数count，在循环过程中第一个是0的房间就是i号房间，其人数为min*n + count；
p.s要注意房间人数要用long int型

import java.util.Scanner;public class Main {public static void main(String[] args) {// TODO Auto-generated method stubint n = 0 ,k = 0;Scanner a = new Scanner(System.in);n = a.nextInt();k = a.nextInt();long [] p = new long [n];for(int i = 0;i < n;i++) {p[i] = a.nextInt();}long min = p[0];for(int i = 0;i < n;i++) {if(p[i] < min)min = p[i];}for(int i = 0;i < n;i++) {p[i] = p[i] -min;}int count = 0;while(p[k-1] != 0){p[k - 1]--;count++;if(k - 1 == 0)k = n;elsek--;}p[k-1] = count + min * n;for(int i = 0;i < n;i++) {System.out.print(p[i]+" ");}}}

请按要求书写一个图片上传的弹窗组件，弹窗的样式要求如下：
1、样式要求
（1）宽： 668px, 高： 608px, 圆角5px，边框1px solid #ccc
（2）弹窗垂直居中，左右居中
（3）标题栏高：50px , 右边的x不能使用图片，请使用css3画出, 标题文字颜色：红色
（4）列表元素的高：110px ，宽:110px，边框 1px solid #ccc
（5）中间“添加”按钮的图片地址：https://p1.pstatp.com/large/3ecd0004b6bdeff4c48d
整体样式效果如下图所示：

2、功能要求
（1）点击“添加”按钮弹出文件选择框，选择图片（要求只能选择png、jpeg、jpg三种图片）
（2）选择图片后列表增加一张图片缩略图展示（此时图片未上传到服务器）
（3）点击上传按钮将当前选择的图片上传到图片服务器（只要求上传当前选择的一张图片，如能实现多个同时上传更佳），上传的图片的接口地址: https://mp.toutiao.com/profile_v2/
接口说明：接口只接收并且处理二进制文件。
请编码实现。
（注：不支持本地IDE）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {margin: 0;}.wrap {width: 100vw;height: 100vh;display: flex;background: rgba(0, 0, 0, 0.5);justify-content: center;align-items: center;}.upload {width: 668px;height: 608px;border-radius: 5px;background: #fff;border: 1px solid #ccc;}.title {height: 50px;border-bottom: 1px solid #ccc;}.title-name {margin-left: 25px;float: left;font-size: 15px;line-height: 50px;color: red;}.title-close::before {content: "\2716";color: #ccc;}.title-close {height: 50px;margin-right: 25px;display: flex;float: right;align-items: center;}.content {height: 458px;overflow: auto;}.content-item {width: 110px;height: 110px;margin: 10px;border: 1px solid #ccc;float: left;}.content-item-upload {width: 110px;height: 110px;margin: 10px;border: 1px solid #ccc;float: left;position: relative;cursor: pointer;color: #888;background: url('https://p1.pstatp.com/large/3ecd0004b6bdeff4c48d');background-repeat: no-repeat;border: 1px solid #ddd;border-radius: 4px;overflow: hidden;*display: inline;*zoom: 1}.content-item-upload input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;filter: alpha(opacity=0);cursor: pointer}.footer {height: 100px;display: flex;justify-content: center;align-items: center;}.btn {width: 85px;margin: 0 10px;border: 1px solid #ccc;padding: 10px 10px;border-radius: 5px;text-align: center;text-decoration: none;display: inline-block;font-size: 12px;}.btn-red {background-color: red;border: 1px solid red;color: white;}</style>
</head><body><div class="wrap"><div class="upload"><div class="title"><div class="title-name">上传图片</div><div class="title-close"></div></div><div class="content" id='upload-list'><div class="content-item"><img width="110px" height="110px" src="" /></div></div><div class="footer"><button class="btn btn-red" onclick="upload()">上传</button><button class="btn">取消</button></div></div></div><script>const render = renderList => {let documentText = ''renderList.forEach(e => {documentText = documentText +`<div class="content-item"><img width="110px" height="110px" src="${e.img}"/></div>`})documentText = documentText +`<a href="javascript:;" class="content-item-upload"><input id="file-upload" type="file" accept="image/png,image/gif" name="file"/></a>`document.getElementById('upload-list').innerHTML = documentTextdocument.getElementById('file-upload').addEventListener('change', function () {var file = this.files[0];var reader = new FileReader();let res = reader.readAsDataURL(file);reader.onloadend = e => {console.log(e.target.result)inputList.push({img: e.target.result})render(inputList)}})}const upload = () => {uploadList.forEach(e => {let formData = new FormData();formData.append("img", e);fetch("https://mp.toutiao.com/profile_v2/", {method: 'POST',body: formData});})}var inputList = []var uploadList = []window.onload = () => {render(inputList)}</script>
</body></html>

以下函数用于将一颗二叉搜索树转换成一个有序的双向链表。要求不能创建任何新的节点，只能调整树种节点指针的指向。如输入下图中左边的二叉搜索树，则输出转换后的排序双向链表：

    TreeNode* Convert(TreeNode* root){if(root==NULL)return NULL;TreeNode* listHead = NULL;TreeNode* listLastNode = NULL;stack<TreeNode*> s;while(root||!s.empty()){while(root){s.push(root);root=root->left;}root=s.top();  s.pop();root->left=listLastNode;if (listHead == NULL){listHead = root;}else{listLastNode->right = root;}listLastNode = root;root=root->right;}while(listHead&&listHead->left)listHead=listHead->left;return listHead;}

【Web前端】笔试题含解析相关推荐

也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
web前端笔试题整理
java 1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母.数字.下划线,总长度为5-20 1 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; ...
WEB前端笔试题（4）
1.CSS hack的技巧 !important除IE6外都识别,通用: background-color:blue; /*所有浏览器*/ background-color:red\9;/*所有的ie ...
腾讯web前端笔试题及个人答案
每道题都有答案,大多数答案亲测正确. 简答题 1.js中"5"+4=? 答案:54 2.js中void(0)=? 答案:undefined 3.js中NaN*4=? 答案:NaN ...
北大青鸟Java内侧答案_北大青鸟推荐：Java精选笔试题(含答案解析)
北大青鸟推荐:Java精选笔试题(含答案解析)如果你是计算机专业出生,但是还没有找到工作的话,你就得补补技术了,一些关于面试.笔试的题要多刷一刷.有可能你知道答案,但是由于语言组织能力有所欠缺,所以面 ...
最新百度阿里华为腾讯谷歌面试笔试题及解析
最新百度阿里华为腾讯谷歌面试笔试题及解析 8月15日,百度2道面试题: 1.来自<编程之美>的概率题:一个桶里面有白球.黑球各100个,现在按下述规则取球:的 i .每次从通里面拿 ...
前端笔试题小结（一）
前端笔试题小结(一) 2020-03-13 题目一: 将一个js数组去重. 样例: 输入:[ 1, "apple", 3, "a", 3, 1, 5, 6, & ...
育碧Web实习笔试题分享
育碧的Web实习笔试题分享笔试题目一共有20道,主要有选择题,简答题以及编程题,但是大部分都是简答题,题干是全英语的,但是大致题意还是能够读懂.考查知识大体涉及JavaScript.HTTP.CSS ...
2017网易前端笔试题总结
整理了一下2017网易前端笔试题,附上了自己的答案,仅供参考,欢迎讨论和交流.如果有什么不对的地方,欢迎指正. 题目整理(不含答案) 网盘分享: 链接: https://pan.baidu.com/s ...
前端笔试题面试题记录（上）
前言过完元宵,就到上海找了波工作,现在已经入职好了,蹭波热点,写一波面试记录,内容包含笔试题和面试题,还有一些没有写进来,准备再开一篇,许久没写了,写的确实有些慢.如果喜欢的话可以点波赞,或者关注一 ...

【Web前端】笔试题含解析

【Web前端】笔试题含解析相关推荐

最新文章

热门文章