web机试

发布时间：2023-09-06 02:01责任编辑：胡小海关键词：暂无标签

测试：

</style>
<title>Demo</title>

</div>
?<script type="text/javascript">

//机试的测试代码

?</script>

</body>

</html>

题目：现在有个 HTML 片段，要求编写代码，点击编号为几的链接就alert弹出其编号？（闭包题目）

<ul>

<li>编号1，点击我请弹出1</li>

</ul>

var list = document.getElementsByTagName(‘li‘);

for (var i = 0; i < list.length; i++) {

list[i].addEventListener(‘click‘, function(i){

return function(){

alert(i + 1)

}

}(i), true)

}

若有如下场景，一个<div>中包含了若干个<a>，而且还能继续增加。那如何快捷方便地为所有<a>绑定事件呢？

<div >

</div>

<button>点击增加一个 a 标签</button>

这里就会用到事件代理。我们要监听<a>的事件，但要把具体的事件绑定到<div>上，然后看事件的触发点是不是<a>

var div1 = document.getElementById(‘div1‘)

div1.addEventListener(‘click‘, function (e) {

// e.target 可以监听到触发点击事件的元素是哪一个

var target = e.target

if (e.nodeName === ‘A‘) {

// 点击的是 <a> 元素

alert(target.innerHTML)

}

})

手写 XMLHttpRequest 不借助任何库？

var xhr = new XMLHttpRequest()

xhr.onreadystatechange = function () {

// 这里的函数异步执行，可参考之前 JS 基础中的异步模块

if (xhr.readyState == 4) {

if (xhr.status == 200) {

alert(xhr.responseText)

}

xhr.open("GET", "/api", false)

xhr.send(null)

手写 clearfix？

.clearfix:after {

content: ‘‘;

display: table;

clear: both;

}

.clearfix {

*zoom: 1; /* 兼容 IE 低版本 */

}

如何实现水平居中？

inline 元素用text-align: center;

block 元素可使用margin: auto;

绝对定位元素可结合left和margin实现，但是必须知道宽度

.container { //container是item的父级

position: relative;

width: 500px;

}

.item {

width: 300px;

height: 100px;

position: absolute;

left: 50%;

margin: -150px;

}

如何实现垂直居中？

<html>

<head>

<style>

.container {

position: relative;

height: 300px;

border: 1px blue solid;

}

.item {

width: 100px;

height: 50px;

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

background: red

}

</style>

<title>我的第一个 HTML 页面</title>

</head>

<body>

<div >

</div>

</body>

</html>

找出下面代码的优化点，并且优化它？

var data = [‘string1‘, ‘string2‘, ‘string3‘];

for(var i = 0; i < data.length; i++){

var dom = document.getElementById(‘list‘);

dom.innerHTML += ‘<li>‘ + data[i] + ‘</li>‘;

}

var dom = document.getElementById(‘list‘);

var data = [‘string1‘, ‘string2‘, ‘string3‘];

var frag = document.createDocumentFragment();

var li;

for(var i = 0; i < data.length; i++){

li = document.createElement("li");

li.innerHTML = data[i];

frag.appendChild(li); // 先放在 frag 中，最后一次性插入到 DOM 结构中。

}

listNode.appendChild(frag);

请用CSS实现以下图形？

圆形

#circle {

width: 100px;

height: 100px;

background: red;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

椭圆

#oval {

 width: 200px;

 height: 100px;

 background: red;

 -moz-border-radius: 100px / 50px;

 -webkit-border-radius: 100px / 50px;

 border-radius: 100px / 50px;

等边三角

#triangle-up {

 width: 0;

 height: 0;

 border-left: 50px solid transparent;

 border-right: 50px solid transparent;

 border-bottom: 100px solid red;

直角三角

#triangle-topleft {

 width: 0;

 height: 0;

 border-top: 100px solid red;

border-right: 100px solid transparent;

平行四边形

#parallelogram {

 width: 150px;

 height: 100px;

 margin-left:20px;

 -webkit-transform: skew(20deg);

 -moz-transform: skew(20deg);

 -o-transform: skew(20deg);

 background: red;

梯形

#trapezoid {

 border-bottom: 100px solid red;

 border-left: 50px solid transparent;

 border-right: 50px solid transparent;

 height: 0;

 width: 100px;

移动端设置meta？

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

数组去重？

ES6

let array = Array.from(new Set([1, 1, 1, 2, 3, 2, 4]));

console.log(array);

Set数据结构，它的成员都是唯一的，其构造函数可以接受一个数组作为参数

Array.from，可以把类似数组的对象转换为数组，如通过querySelectAll方法得到HTML DOM Node List，以及ES6中新增的Set和Map等可遍历对象

ES5

<html>

<body>

var array = [1, ‘1‘, 1, 2, 3, 2, 4];

var tmpObj = {};

var result = [];

array.forEach(function(a) {

var key = (typeof a) + a;

console.log(key)

if (!tmpObj[key]) { //Array对象是从Object对象继承得到，js是可以使用字符串作为数组下标的

tmpObj[key] = true;

console.log(tmpObj[key])

result.push(a);

}

})

console.log(result);

</script>

</body>

</html>

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

请实现对象深度clone？

1、

function deepClone(o1, o2) {

for (let k in o2) {

if (typeof o2[k] === ‘object‘) {

o1[k] = {};

deepClone(o1[k], o2[k]);

} else {

o1[k] = o2[k];

}

// 测试用例

let obj = {

a: 1,

b: [1, 2, 3],

c: {}

};

let emptyObj = Object.create(null);

deepClone(emptyObj, obj);

console.log(emptyObj.a == obj.a);

console.log(emptyObj.b == obj.b);

2、

var obj = {a:{b:10}};

function copy(obj){

var newobj = {};

for ( var attr in obj) {

newobj[attr] = obj[attr];

}

return newobj;

}

var obj2 = copy(obj);

obj2.a.b = 20;

alert(obj.a.b);

请把鼠标指针移动到蓝色的 div 元素上，看到过渡效果？

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: blue;

transition: width 2s;

-moz-transition: width 2s;

/* Firefox 4 */

-webkit-transition: width 2s;

/* Safari and Chrome */

-o-transition: width 2s;

/* Opera */

}

div:hover {

width: 300px;

}

</style>

</head>

<body>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

实现动画移动效果

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

position: relative;

animation: mymove 5s infinite;

-webkit-animation: mymove 5s infinite;

/*Safari and Chrome*/

}

@keyframes mymove {

from {

left: 0px;

}

to {

left: 200px;

}

@-webkit-keyframes mymove

/*Safari and Chrome*/

{

from {

left: 0px;

}

to {

left: 200px;

}

</style>

</head>

<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

</body>

</html>

请写出以下正则表达式：

匹配14*的手机号:

/^(1)4[5-9](\d){8}$/.test(14531121989)

匹配126邮箱：

/((^([a-zA-Z]))(\w){5,17})@126.com$/.test("AA3333333333333333@126.com")

匹配qq邮箱：

/(^[1-9]){5,10}@qq.com$/.test("115511@qq.com")

中文

/^[\u4e00-\u9fa5]$/g.test("我")

国内邮政编码

/^[0-9]{6}$/.test(100000)

找某个字符串中出现最多的字符和它一共出现多少次？

var str = "sssfgtdfssddfsssfssss";

var num = 0;

var value = null;

function max() {

var new_str = str.split("").sort().join("");

var re = /(\w)\1+/g; //没有\1,re就是一整个排好序的字符串，有了\1就是出现过的有重复的取出来，\1表示跟前面第一个子项是相同的

new_str.replace(re, function(match_str, char) { //$0代表取出来重复的一个个整体，如[s,s...],[f,f..],[d,d....] $1代表这个整体里的字符

if (num < match_str.length) {

num = match_str.length;

value = char;

}

});

alert(value + ":" + num)

console.log(new_str)

};

max(str);

使用vue-cli搭建一个基础项目？

vue-loader是一个webpack的loader；可以将vue文件转换为JS模块

cd到目录，vue init webpack [your project name] 后会创建一个名为你设置名字的文件夹

cnpm install 安装依赖，cnpm run dev运行

cnpm run build创建线上版本

使用webpack完成一次打包？

1、创建目录并转到这个目录，执行npm init –y创建一个 package.json

（在安装一个要打包到生产环境的安装包时，你应该使用 npm install --save，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev）

mkdir webpack-demo && cd webpack-demo

npm init -y

npm install webpack webpack-cli --save-dev

2、创建src目录，里面创建一个index.js，创建一个index.html

在package.json中指定main为index.js（main字段指定一个主入口文件）

3、index.html引入<script src="main.js"></script>

4、npx webpack 执行打包（执行 npx webpack，会将我们的脚本作为入口起点，然后输出为 main.js，目标目录是dist）

5、使用配置文件webpack.config.js ，运行npx webpack时默认运行webpack.config.js配置文件，当然，如果有其他配置文件，也可以使用—config指定文件名：npx webpack --config webpack.config.js（默认）

npx webpack --config webpack.config2.js（自定义）

6、简化CLI ，也就是命令行不用写那么多内容，做法：在package.json中的scripts中新增"build": "webpack"

 "name": "webpack-demo",

 "version": "1.0.0",

 "description": "",

 "main": "index.js",

 "scripts": {

 "test": "echo \"Error: no test specified\" && exit 1",

+ "build": "webpack"

},

 "keywords": [],

 "author": "",

 "license": "ISC",

 "devDependencies": {

 "webpack": "^4.0.1",

 "webpack-cli": "^2.0.9",

 "lodash": "^4.17.5"

npm run build 就可以代替npx

通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors

使用Gulp和Babel完成对ES6的编译？

1、

mkdir webpack-demo && cd webpack-demo

npm init -y

$ npm install --global gulp

步骤一、创建工程目录

Project-demo/

|── dist/

├── src/

├── js/

└── index.js

步骤二、安装gulp和编译ES6所需要的模块

用cd命令进入myProject，分别执行：

npm install --global gulp

npm install gulp —save-dev；

npm install gulp-babel —save-dev；

// babel-preset-env插件，该插件可以根据配置的目标运行环境自动启用需要的babel插件(即动态转换ES6代码至可执行的JS代码)

npm install babel-preset-env —save-dev;

// 根据babel文档指引是不需要babel-core的，但是在实际操作中少了babel-core会报找不到该模块，所以安装上即可

npm install babel-core —save-dev; （根本问题所在）

步骤三、构建Gulp任务

根目录创建gulpfile.js 和.babelrc

gulpfile：

var gulp = require("gulp");

var babel = require("gulp-babel");

gulp.task("default", function () {

return gulp.src("src/app.js")

.pipe(babel())

.pipe(gulp.dest("dist"));

});

.babelrc：

{

"presets": ["env"]

}

src/app.js :

let set = new Set([‘red‘, ‘green‘, ‘blue‘]);

let arr = [...set];

for(let value of arr){

console.log(value)

}

步骤四

命令行运行Gulp

使用Git从远程仓库拷贝项目，修改，并提交的操作？

请利用template原理实现一个template

var reviewTemplate = $("#reviewTemplate").html().trim()

temp = reviewTemplate

.replace(/\${equipment}/g, jData[i].productName || "")

.replace(/\${function}/g, jData[i].function || "")

$("#accessment").append(temp);

用你熟悉的sql语句创建数据库、对表进行增删改查

1、说明：创建数据库

CREATEDATABASEdatabase-name

2、说明：删除数据库

dropdatabasedbname

说明：创建新表

createtabletabname(col1 type1 [notnull] [primarykey],col2 type2 [notnull],..)

说明：增加一个列

Altertabletabname addcolumncol type

选择：select * from table1 where 范围

插入：insert into table1(field1,field2) values(value1,value2)

删除：delete from table1 where 范围

更新：update table1 set field1=value1 where 范围

查找：select * from table1 where field1 like ’%value1%’

SELECT*FROMtb_nameWHEREsum>100;

SELECT*FROMtb_stuWHEREsname=‘小刘‘
SELECT*FROMtb_stuWHEREsnamelike‘刘%‘

SELECT*FROMtb_stuWHEREdate=‘2011-04-08‘

INSERTINTO`tb_column`(`columnId`,`columnName`,`columnDisc`,`columnOrder`)

VALUES

(‘1‘,‘新闻‘,‘国内国外新闻‘,‘12‘),

(‘2‘,‘财经‘,‘关注q‘,‘7‘),

(‘3‘,‘娱乐‘,‘关注‘,‘14‘),

(‘4‘,‘体育‘,‘关注新闻‘,‘6‘),

(‘5‘,‘读书‘,‘读书内容‘,‘5‘);

连接到本机上的 MySQL。

mysql -uroot –pmysql

使用JSONP实现跨域

前端

1 <%@page pageEncoding="utf-8"contentType="text/html;charset=UTF-8"language="java" %>

<html>

<head>

<scriptsrc="js/jquery-1.7.2.js"></script>

//回调函数

function showData (result) {

var data =JSON.stringify(result); //json对象转成字符串

$("#text").val(data);

}

$(document).ready(function () {

$("#btn").click(function() {

//向头部输入一个脚本，该脚本发起一个跨域请求

$("head").append("<scriptsrc=‘http://localhost:9090/student?callback=showData‘><\/script>");

});

</script>

</head>

<body>

</body>

</html>

服务端

protectedvoid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");

//数据

List<Student> studentList =getStudentList();

JSONArray jsonArray =JSONArray.fromObject(studentList);

String result = jsonArray.toString();

//前端传过来的回调函数名称

String callback =request.getParameter("callback");

//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了

result = callback + "(" + result+ ")";

response.getWriter().write(result);

}

JS实现冒泡排序？

将8，4，3，1，4，6，等数字按照从小到大的顺序依次输出；

var arr=new Array();

arr.push(8);

arr.push(4);

arr.push(3);

arr.push(1);

arr.push(5);

arr.push(6);

var temp;

for(var i=0; i<arr.length;i++)

{

for(var j=i+1;j<arr.length;j++)

{

if(arr[i]>arr[j])

{

temp=arr[i];

arr[i]=arr[j];

arr[j]=temp;

}

for(var x in arr )

{

alert(arr[x]);

}

JS实现快排？

随机选择数组中的一个数 A，以这个数为基准

其他数字跟这个数进行比较，比这个数小的放在其左边，大的放到其右边

经过一次循环之后，A 左边为小于 A 的，右边为大于 A 的

这时候将左边和右边的数再递归上面的过程

具体代码如下：

constArr = [85, 24, 63, 45, 17, 31, 96, 50];

functionquickSort(arr) {

if (arr.length <= 1) {

return arr;

}

let pivotIndex = Math.floor(arr.length /2);

let pivot = arr.splice(pivotIndex, 1)[0];

let left = [];

let right = [];

for (let i = 0; i < arr.length; i++) {

if (arr[i] < pivot) {

left.push(arr[i]);

} else {

right.push(arr[i]);

}

// 递归

return quickSort(left).concat([pivot],quickSort(right));

}

console.log(quickSort(Arr))

在一个二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数？

functionFind(target, array) {

let i = 0;

let j = array[i].length - 1;

while (i < array.length && j >=0) {

if (array[i][j] < target) {

i++;

} else if (array[i][j] > target) {

j--;

} else {

return true;

}

return false;

}

//测试用例

console.log(Find(10,[

[1, 2, 3, 4],

[5, 9, 10, 11],

[13, 20, 21, 23]

])

)

怎么判断两个对象是否相等？

functionequals(x,y){
varin1=xinstanceofObject;
varin2=yinstanceofObject;
if(!in1||!in2){
returnx===y;
}
if(Object.keys(x).length!==Object.keys(y).length){
returnfalse;
}
10. for(varpinx){
11. vara=x[p]instanceofObject;
12. varb=y[p]instanceofObject;
13. if(a&&b){
14. returnequals(x[p],y[p]);
15. }
16. elseif(x[p]!==y[p]){
17. returnfalse;
18. }
19. }
20.
21. returntrue;

22. }

24. alert(equals({a:1},{a:1}));//true

web机试

原文地址：https://www.cnblogs.com/ww01/p/9233362.html

web机试

知识推荐