web机试

测试：

</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>

<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>

</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？

数组去重？

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("A[email protected]")

匹配qq邮箱：

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

中文

/^[\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、说明：创建数据库

CREATE DATABASE database-name

2、说明：删除数据库

drop database dbname

说明：创建新表

create table tabname(col1 type1 [not null] [primary key],col2 type2 [not null],..)

说明：增加一个列

Alter table tabname add column col 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 * FROM tb_name WHERE sum > 100;

SELECT * FROM tb_stu WHERE sname = ‘小刘‘

SELECT * FROM tb_stu WHERE sname like ‘刘%‘

SELECT * FROM tb_stu WHERE date = ‘2011-04-08‘

INSERT INTO `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>

//回调函数

function showData (result) {

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

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

}

$(document).ready(function () {

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

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

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

});

</script>

</head>

<body>

</body>

</html>

服务端

protected
void 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 的

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

具体代码如下：

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

function
quickSort(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))

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

function
Find(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]

])

)

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

function equals( x, y ) {
var in1 = x instanceof Object;
var in2 = y instanceof Object;
if(!in1||!in2){
return x===y;
}
if(Object.keys(x).length!==Object.keys(y).length){
return false;
}
10. for(var p in x){
11. var a = x[p] instanceof Object;
12. var b = y[p] instanceof Object;
13. if(a&&b){
14. return equals( x[p], y[p]);
15. }
16. else if(x[p]!==y[p]){
17. return false;
18. }
19. }
20.
21. return true;

22. }

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

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

时间： 2024-10-08 01:50:40

web机试

web机试的相关文章

华为OJ机试训练（一）

[华为机试真题]66.单词搜索

华为机试正式版（西安c/c++/java），今天下午去机试的题目，新鲜出炉了！

九度机试题目1165：字符串匹配 2008年北京航空航天大学计算机研究生机试真题

华为机试ACM（字符组合问题）

2014年七月华为校招机试题目--最难的一道，呵呵！

【转】朱兆祺教你如何攻破C语言学习、笔试与机试的难点（连载）

华为机试宝典3 —擂台实战

华为机试 --- 求最大三位数