答案只做参考，如有更好的方法欢迎留言！
1、 实现数组去重方法？（js算法）
利用对象的键值对方法：把数组中的每一项当作一个对象的属性名和属性值存储起来，但在存储之前我们需要判断下这一项是否已经存在了，如果已经存在了就说明重复了，我们把数组中最后一项拿过来替换当前这一项，再删出数组中最后一项，再i--因为我们需要比较当前这个从后边拿过来的这一项
//利用对象的键值对方法
var ary=[1,2,3,5,2,4,6,5,1];
var obj={};
for(var i=0;i<ary.length;i++){
var curAry=ary[i];
if(obj[curAry]==curAry){
ary[i]=ary[ary.length-1];
ary.length--;
i--;
continue;
}
obj[curAry]=curAry;
}
console.log(ary);
2 、写一个function，清除字符串前后的空格。 （兼容所有浏览器）
function trim (str){
if(str && typeof str==='string'){
return str.replace(/(^\s+)|(\s+$)/g,'')
}
}
var str=' bacdd '
console.log(trim(str))
3、如果获取网页传输过来的参数a的值(http://192.168.0.1/index.html?a=100)
function urlParse(){
let url=window.location.search //获取到从？开始的url部分
let obj={}
let reg=/[?&][^?&]+=[^?&]+/g
let arr=url.match(reg)
// ['?id=123456','&a=b']
if(arr){
arr.forEach((item)=>{
let tempArr=item.substring(1).split('=')
//可以对encodeURIComponent编码的URL进行解码
let key=decodeURIComponent(tempArr[0])
let val=decodeURIComponent(tempArr[1])
obj[key]=val
})
}
return obj
}
4、第一个人10岁，第二个比第一个人大2随，依次递推，请用递归编写一个方法，可以计算出第8个人多大
function age(n){
if(n===0){return 0}
if(n===1){return 10}
return age(n-1)+2
}
console.log(age(8)) //24
5、一个长度不超5位的正整数转换成对应的中文字符串，例如：20876 返回“两万零八百七十六”
function numstr(num){
var str1="零壹贰叁肆伍陆柒捌玖拾 ";
var str2="万千百十";
var str='';
for(var i=0;i<num.length;i++){
var cur=num[i];
str+=str1.charAt(cur);
//如果是最后一个那么不用加，如果数字是0也不用加
if(Number(num[i])!==0 && i!==num.length-1){
//传过来的数字长度是<=5的
str+=str2.substring(5-num.length).charAt(i)
}
}
return str
}
console.log(numstr('876')) //捌百柒十陆
6、什么是冒泡排序？（js算法）
function arySort(ary){
var temp=null;
var flag=true;
for(var i=0;i<ary.length-1;i++){
for(var j=0;j<ary.length-1-i;j++){
if(ary[i]>ary[i+1]){
temp=ary[i];
ary[i]=ary[i+1];
ary[i+1]=temp;
flag=false
}
if(flag){
break;
}
}
}
return ary
}
var arynum=[2,1,5,3,4]
console.log(arySort(arynum));
7、数组快速排序 （也是用递归实现一分二查找法的一种算法）
function insertSort(ary) {
var newAry=[];
newAry.push(ary[0]);
for(var i=1;i<ary.length;i++){
cur=ary[i];
for(var j=newAry.length-1;j>=0;){
if(cur<newAry[j]){
j--;
if(j<0){
newAry.unshift(cur);
}
}else{
newAry.splice(j+1,0,cur);
break;
}
}
}
return newAry;
}
var ary0=[9,0,8,6,4,9,2]
console.log(insertSort(ary0));
8、编写一个指定长度的字符串，包含数字和字母
Function getStr(n){
Var newStr=””;
Var str=”abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789”
For(var i=0;i<n;i++){
newStr+=str.charAt(Math.round(Math.random()*str.length))
}
}
9、数字的千位分割 写一个方法
function parseNumber(str){
//?= 匹配一个位置，这个内容候忙需要满足的条件
//?! 匹配一个位置，这个位置后面不能满足的条件
//B 非单词边界符
var re = /\B(?=(\d{3})+(?!\d))/g;
console.log(re);
return str.replace(re, ',');
}
alert(parseNumber('1234567890')); //123,456,789
10、写一个生成11-20之间随机数的函数
function getRound(n,m){
n=Number(n);
m=Number(m);
if(isNaN(n)||isNaN(m)){
return Math.random();
}
if(n>m){
var temp=null;
temp=n;
n=m;
m=temp;
}
return Math.round(Math.random()*(m-n)+n)
}
11、创建一个js类，模拟实现方法的重载
function A(){
this.a=null;
this.b=null;
}
var pro=A.prototype;
pro.add=function(){
if(arguments.length==1){
console.log(arguments[0])
}
if(arguments.length==2){
var result=arguments[0]+arguments[1]
console.log(result)
}
}
var a=new A()
a.add(1)
a.add(1,2)
12、【编程题】有一篮子鸡蛋，一个一个的拿能拿完，两个两个的拿剩一个，三个三个的拿剩一个，四个四个的拿剩一个，五个五个的拿剩一个，六个六个的拿能拿完，篮子里有多少鸡蛋
function num(){
for(var i=1;i<9999;i++){
if(i%1==0 && i%2==1 && i%3==1 && i%4==1 && i%5==1 && i%6==0){
console.log(i);
break;
}
}
}
num()
13、拖拽的原理
1.当鼠标在盒子上按下的时候，我们给onmousedown绑定一个事件，
2.在事件里记录下鼠标和盒子的起始位置，同时在方法里给元素的onmousemove和onmouseup绑定移动事件mov和抬起事件up
3.在移动事件move方法里当前鼠标的位置，通过当前鼠标的位置-鼠标的起始位置+元素的起始位置，计算出当前元素的位置，设置当前元素的位置
4.在抬起事件up方法里移除元素的onmousemove和onmouseup事件
//js实现让当前元素在屏幕居中的位置
var box=document.getElementById("box");
box.style.top=((document.documentElement.clientHeight||document.body.clientHeight)-box.offsetHeight)/2+"px";
box.style.left=((document.documentElement.clientWidth||document.body.clientWidth)-box.offsetWidth)/2+"px";
box.onmousedown=down;
function down(e){
e=e||window.event;
//记录开始位置的信息
this["strX"]=e.clientX;
this["strY"]=e.clientY;
this["strL"]=parseFloat(this.style.left);//得到的值是加单位的需要parseFloat下
this["strT"]=parseFloat(this.style.top);
//给元素绑定移动和抬起的事件
if(this.setCapture){
this.setCapture();//把当前的鼠标和this（#box）绑定在一起
this.onmousemove=move;
this.onmouseup=up;
}else{
//这样绑定的话move 和up里的this就成document了
// document.onmousemove=move;
// document.onmouseup=up;
var _this=this;//_this就是#box
document.onmousemove=function(e){
//匿名函数中的this--->document
//move(e); move方法中的this是window
move.call(_this,e);
}
document.onmouseup=function(e){
up.call(_this,e);
}
}
}
function move(e){
e=e||window.event;
var curL=e.clientX-this["strX"]+this["strL"];
var curT=e.clientY-this["strY"]+this["strT"];
//边界判断
var minL=0,maxL=(document.documentElement.clientWidth||document.body.clientWidth)-this.offsetWidth,
minT=0,maxT=(document.documentElement.clientHeight||document.body.clientHeight
)-this.offsetHeight;
curL=curL<minL?minL:(curL>maxL?maxL:curL);
curT=curT<minT?minT:(curT>maxT?maxT:curT);
this.style.left=curL+"px";
this.style.top=curT+"px";
}
function up(e){
if(this.releaseCapture){
this.releaseCapture();//把当前鼠标和#box这个盒子解除绑定
//当鼠标抬起时让onmousemove和onmouseup都移除
this.onmousemove=null;
this.onmouseup=null;
}else{
document.onmousemove=null;
document.onmouseup=null;
}
}
14、实现 (5).add(3).minus(2),使其输出结果为6
问题解析:
数字5可以调用add这个方法那么add这个方法肯定是number原型上的方法；
每一个方法执行完都要返回来NUMBER这个类的实例，这样才可以继续调用NUMBER类原型中的 方法（链式写法）；
代码实现：
~function(){
function check(n){
n=Number(n);
return isNaN(n)?0:n;
}
function add(n){
n=check(n);
return this + n;
}
function minus(n){
n=check(n);
return this - n
}
Number.prototype.add=add;
Number.prototype.minus=minus;
//也可以像下边这样写
// ['add','minus'].forEach(item=>{
// Number.prototype[item]=eval(item)
// })
}()
console.log((5).add(3).minus(2));//6
15、利用递归实现对象的深度拷贝
function copy(obj){
let newobj = null;
if(typeof(obj) == 'object' && obj !== null){
newobj = obj instanceof Array? [] : {};
for(var i in obj){
newobj[i] = copy(obj[i])
}
}else{
newobj = obj
}
return newobj;
}
16、选马问题
题目描述：
有两组马 A 和 B，每一组都有若干匹马。假设所有的马跑的速度都是匀速， 请从两组马中选出 跑步速度最接近的两匹马。输入数组 A 和 B，其中 A[i]和 B[j]分别是 A 组第 i 匹和 B 组第 j 匹 的速度。输出速度差最小的两匹马之间的速度差值。 例如 A = { 1, 3, 5, 7, 10 }, B = { 2, 3, 6, 9 }， 则输出为 0。
输入：
第一行第 1 个数为 A 组的马的数量 n，后面有 n 个数表示每匹马的速度。 第二行第 1 个数为 B 组的马的数量 m，后面有 m 个数表示每匹马的速度。 每行数字用空格分割。 马的速度为大于 0 小于 2147483647 的整数
输出：
输出最小值
样例输入：
5 1 7 5 3 10
4 2 9 6 3
样例输出 :
0
提示:
要求程序时间和空间复杂度尽可能低。
样例程序:
function select(A, B) {
// A = [5, 1, 7, 5, 3, 10]
// B = [4, 2, 9, 6, 3]
实现算法
return answer;
}
实现代码：（答案不是标准，可自行优化）
<style>
*{
margin:0;
padding:0;
}
input{
width:200px;
height:24px;
line-height: 24px;
margin:10px
}
.onebox{
width:500px;
margin:0 auto
}
</style>
<div class="onebox">
马1：<input id="ma1" oninput="rangeType(this)" onblur="rangeNum(this)"><br/>
马2：<input id="ma2" oninput="rangeType(this)" onblur="rangeNum(this)"><br/>
<button id="btn">提交</button><br/>
结果：<input id="result">
</div>
<script>
var ma1=document.getElementById("ma1"),
ma2=document.getElementById("ma2"),
result=document.getElementById("result"),
btn=document.getElementById("btn");
//oninput只能输入空格或者数字
function rangeType(ele){
return ele.value=ele.value.replace(/[^\d\-\s]/g,"")
}
//失去焦点的时候判断数字是否在规定的范围内
function rangeNum(ele){
var eleArry=ele.value.trim().split(/\s+/g);
var flag=false;
eleArry.forEach(function(item){
if(item>2147483647||item<0){
flag=true
}
})
if(flag){
alert("马的速度为大于 0 小于 2147483647 的整数");
}
}
//点击btn按钮输出结果
btn.onclick=function(){
//获取到两个输入框里的内容
//把获取到的内容按照 空格拆分成数组
var A=ma1.value.trim().split(/\s+/g),
B=ma2.value.trim().split(/\s+/g);
select(A,B)
}
//去掉首尾空格
function trim(){
return this.replace(/(^\s+)|(\s+&)/g)
}
//执行方法
function select(ary1,ary2){
//把A组马和B组马的第一项删除
ary1.shift();
ary2.shift();
//定义一个空数组来存所有的差值
var resultArray=[];
//循环第一组马的数组：让第一组马的每个速度和第二组马的每个速度相减
for(var i=0;i<ary1.length;i++){
//获取到第一组马的当前马的速度
var ary1Cur=ary1[i]
//循环第二组马的数组
for(var j=0;j<ary2.length;j++){
//获取到第二组马的当前马的速度
var ary2Cur=ary2[j];
//计算出差值
var decre=Math.abs(ary1Cur-ary2Cur);
//如果存放差值的数据里是空的 直接把差值 存进去
if(resultArray.length===0){
resultArray.push(decre)
}else{
//否则判断一下当前这个差值是否在 差值数组里存在
for(var q=0;q<resultArray.length;q++){
var cur=resultArray[q]
if(cur==decre){
//存在的话什么都不做跳出循环
continue;
}
//不存在的话存进 差值数组里
resultArray.push(decre)
}
}
}
}
//得到的差值从小到大排列
resultArray=resultArray.sort(function(a,b){
return a-b
})
//获取最小的一个
var min=resultArray[0]
//赋值给result 输出框
result.value=min
}
17、协会选举:
题目描述：
某协会进行投票选举选出主席。总共 m 个候选人，共 n 个人参加投票。每人投一票，每张票填写 一位候选人序号，没有弃权票。 规定得票超过 n/k 的人当选（假设有且仅有一人得票超过 n/k）。给出所有选票，编写程序找出 当选人序号。
输入：
一共 n+1 个整数，用空格分隔。第一个整数是 k，第二个整数开始每个数代表每张选票上的候选 人序号（大于 0 小于 2147483647 的整数）。
输出：
当选的候选人序号。
样例输入 Copy：
3 1 1 2
样例输出 Copy：
1
提示：
要求程序时间和空间复杂度尽可能低。
样例程序：
function select(A) {
// A = [3, 1, 1, 2]
实现算法
return answer;
}
实现代码：（答案不是标准，可自行优化）
<style>
*{
margin:0;
padding:0;
}
input{
width:200px;
height:24px;
line-height: 24px;
margin:10px
}
.twobox{
width:500px;
margin:0 auto
}
</style>
<div class="twobox">
投票：<input id="voteInput" oninput="rangeType(this)" onblur="rangeNum(this)"><br/>
<button id="btn">提交</button><br/>
结果：<input id="result">
</div>
<script>
var voteInput=document.getElementById("voteInput"),
result=document.getElementById("result"),
btn=document.getElementById("btn");
//oninput只能输入空格或者数字
function rangeType(ele){
return ele.value=ele.value.replace(/[^\d\-\s]/g,"")
}
//失去焦点的时候判断数字是否在规定的范围内
function rangeNum(ele){
var eleArry=ele.value.trim().split(/\s+/g);
var flag=false;
eleArry.forEach(function(item){
if(item>2147483647||item<0){
flag=true
}
})
if(flag){
alert("每个数值为大于 0 小于 2147483647 的整数");
}
}
//去掉首尾空格
function trim(){
return this.replace(/(^\s+)|(\s+&)/g)
}
//点击btn按钮输出结果
btn.onclick=function (){
var voteInputValue=voteInput.value.trim();
var voteArray=voteInputValue.split(/\s+/g);
select(voteArray)
}
function select(voteArray){
//把所有差值放到obj对象里
var obj={};
//删除第一项
voteArray.shift();
if(voteArray){
for(var i=0;i<voteArray.length;i++){
var curVotePerson=voteArray[i];
//判断obj中是否存在这一项（这一条很重要）
if(obj[curVotePerson]){
//如果存在就累加1
obj[curVotePerson]++
}else{
//如果不存在就给它赋值为1
obj[curVotePerson]=1
}
}
//获取到obj里最多的票数 和 最多票数的人
//假设法：先假设 最多的票数是0 最多票数的人是数组中的第一个元素（这一条很重要）
var maxVote=0;
var votePersion=voteArray[0]
for(var key in obj){
var curKey=obj[key]
if(curKey>maxVote){
maxVote=curKey;
votePersion=key
}
}
}
//把最后票数最多的人赋值给结果result
result.value=votePersion
}
18、对于下面每项功能，您愿意支付费用的最高功能规格各是什么？
QQ截图20191226111140.png
要求：
－ 拖动Level下的选项到右边Selected方框下
－ 每行只能拖动1项；如果拖动第2项，则自动替换之前的项
－ 下方放置“提交”按钮，位于表格右下方
实现代码：仅供参考
<style>
*{margin:0;padding:0;}
table{border-collapse:collapse;}
.questionbox{width:90%;margin:0 auto}
fieldset{margin:20px;padding:20px}
.productbox textarea:nth-child(1){background-color: #aaa}
.productbox textarea:nth-child(2){background-color: #ccc}
.productbox textarea:nth-child(3){background-color: #cfcfcf}
.btn{padding:5px 10px;clear:both;margin:10px auto}
.phoneInput{width:200px; height: 24px}
.tip{color:#ff0000}
.tablebox{width:80%}
.tablebox tr th,.tablebox tr td{border:1px solid #ccc;padding:10px}
.tablebox span{display:block;border:1px solid #ccc;width:130px;padding:5px;margin:5px}
#sizediv{width:100%;height:200px;background-color:#cfcfcf}
#ratiodiv{width:100%;height:150px;background-color:#cfcfcf}
</style>
<div class="questionbox">
<fieldset class="productbox">
<legend>a. 听到保健食品这个词语的时候，您会立即想到哪些具体的产品？请把你最先想到的3个产品名称写下来。</legend>
<div>
<textarea id="product1" oninput="productname(this)" cols="30" rows="5" class="productname" placeholder="只能填文字／字母，不能有数字或符号"></textarea>
<textarea id="product2" oninput="productname(this)" cols="30" rows="5" class="productname" placeholder="只能填文字／字母，不能有数字或符号"></textarea>
<textarea id="product3" oninput="productname(this)" cols="30" rows="5" class="productname" placeholder="只能填文字／字母，不能有数字或符号"></textarea>
</div>
<button class="btn">next</button>
</fieldset>
<fieldset class="lastphone">
<legend>b. 您最近购买的一台智能手机的零售价是多少？</legend>
<input class="phoneInput" id="phoneInput"
oninput="phoneInputNum(this)"
onblur="maxNum(this)"
placeholder="只能输入1-99999之间的数字">
<span class="tip"></span><br/>
<input type="checkbox" id="phonecheck" onchange="changeCheck(this)"><label for="phonecheck">我不清楚／不记得价格</label>
</fieldset>
<fieldset class="price">
<legend>c. 对于下面每项功能，您愿意支付费用的最高功能规格各是什么？</legend>
<table class="tablebox">
<tr>
<th width="30%">功能</th>
<th width="30%">规格</th>
<th>选择</th>
</tr>
<tr>
<td>屏幕大小</td>
<td id="size">
<span id="drag1" draggable="true" ondragstart="drag(event)">4"</span>
<span id="drag2" draggable="true" ondragstart="drag(event)">4.5"</span>
<span id="drag3" draggable="true" ondragstart="drag(event)">5"</span>
<span id="drag4" draggable="true" ondragstart="drag(event)">5.5”</span>
<span id="drag5" draggable="true" ondragstart="drag(event)">6"</span>
<span id="drag6" draggable="true" ondragstart="drag(event)">6.5"</span>
</td>
<td>
<div id="sizediv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
<tr>
<td>屏幕分辨率</td>
<td id="ratio">
<span id="drag7" draggable="true" ondragstart="drag(event)">高清（720p）</span>
<span id="drag8" draggable="true" ondragstart="drag(event)">全高清（1080p）</span>
<span id="drag9" draggable="true" ondragstart="drag(event)"> 四倍高清（2K）</span>
<span id="drag10" draggable="true" ondragstart="drag(event)">超高清（4K）</span>
</td>
<td>
<div id="ratiodiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
</table>
<button id="submitData" onclick="submitData()">提交</button>
</fieldset>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
//a、3个产品输入的时候触发 productname这个函数进行验证
function productname(ele){
var textVal=$(ele).val();
var reg=/[^a-zA-Z\u4e00-\u9fa5]/g
textVal=textVal.replace(reg,"")
$(ele).val(textVal)
}
//b、input框输入的时候过滤只能输入数字
function phoneInputNum(ele){
var textVal=$(ele).val();
var reg=/[^0-9]/g;
textVal=textVal.replace(reg,"");
$(ele).val(textVal)
}
//b、input框失去焦点的时候判断是否在1-9999之间
function maxNum(ele){
var textVal=$(ele).val();
if(textVal>99999 || textVal<1){
$(ele).next().text("只能输入1-99999之间的数字")
}
}
//如果勾选了 我不清楚／不记得价格，让input框为disabled
function changeCheck(ele){
if(ele.checked){
//禁止input框
$("#phoneInput").attr("disabled",true);
//清空input框里的内容
$("#phoneInput").val("");
//input框的提示信息
$(ele).prevAll(".tip").text("")
}else{
$("#phoneInput").attr("disabled",false);
}
}
//规定在何处放置被拖拽数据
function allowDrop(ev){
ev.preventDefault();
}
//规定被拖拽的数据
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
//console.log(ev.target);
ev.preventDefault();
//当前被拖动元素的id
var data=ev.dataTransfer.getData("Text");
//获取当前被拖动的元素
var currentEle=document.getElementById(data)
//获取到当前被拖动元素的父级
var parentNode=currentEle.parentElement
//获取到被拖动元素所在的div size ratio
var size=document.getElementById("size")
var ratio=document.getElementById("ratio")
//获取到两个目标元素
var sizediv=document.getElementById("sizediv")
var ratiodiv=document.getElementById("ratiodiv")
//如果当前拖动元素的父级的id是size，那个只能放到sizediv里
if(parentNode.id==="size"){
//如果sizediv里没有已经选中的元素
if(sizediv.getElementsByTagName("span").length==0){
sizediv.appendChild(currentEle)
}else{
//获取到sizediv里的第一个子元素
var firstSpan=sizediv.getElementsByTagName("span")[0];
//把第一个元素添加到 当前拖动元素的父节点size里中
size.appendChild(firstSpan);
//把当前被拖动的元素放到目标元素里
sizediv.appendChild(currentEle);
}
}
//如果当前拖动元素的父级的id是ratio，那个只能放到ratiodiv里
if(parentNode.id==="ratio"){
//如果ratiodiv里没有已经选中的元素
if(ratiodiv.getElementsByTagName("span").length==0){
ratiodiv.appendChild(currentEle)
}else{
//获取到ratiodiv里的第一个子元素
var firstSpan=ratiodiv.getElementsByTagName("span")[0];
//把第一个元素添加到 当前拖动元素的父节点ratio里中
ratio.appendChild(firstSpan);
//把当前被拖动的元素放到目标元素里
ratiodiv.appendChild(currentEle);
}
}
}
//存储所有数据
var dataObj={
product1:"",
product2:"",
product3:"",
phoneInput:"",
phonecheck:"",
sizediv:"",
ratiodiv:""
}
//提交数据
function submitData(){
dataObj={
product1: $("#product1").val(),
product2: $("#product2").val(),
product3: $("#product3").val(),
phoneInput: $("#phoneInput").val(),
phonecheck: $("#phonecheck[type=checkbox]:checked").next().text(),
sizediv: $("#sizediv span").text(),
ratiodiv: $("#ratiodiv span").text()
}
console.log(dataObj)
// $.ajax({
// url:"",
// type:"post",
// data:dataObj,
// success:function () {
//
// }
// })
}
</script>
实现后的效果：
QQ截图20191226112154.png
网友评论