1.有一个从小到大排好序的数组。现输入一个数，要求按原来的规律将它插入数组中:
// 定义一个数组
var arr = [1,2,3,4,5,6,7,8,9];
// 输入一个数
var num = 6;
// 数组末端添加 num
arr.push(num);
// 升序
arr.sort(function(a,b){return a-b})
2.定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每5个数求出一个平均值，放在另一个数组中并输出。
function fn(){
var sum = 0;
var k = 0;
var newArr = [];
// 先创建一个长度为30的数组
var arr = new Array(30);
// 遍历数组的每一位，准备设置内容
for(var i=0;i<arr.length;i++){
// 设置从2开始的偶数
arr[i] = (i+1)*2;
// 每填充一个数据，就累加起来
sum += arr[i];
// 再记录一次（修改独立计数器）
k++;
// 判断次数
if(k%5 == 0){
// 计算平均值，并将平均值放在一个新数组中
newArr.push(sum / 5);
// 重置sum的值
sum = 0;
}
}
// console.log(arr);
return newArr;
}
var a = fn();
console.log(a);
3.冒泡排序：当每两个相邻的数比较后发现它们的顺序与排序要求相反对，就将它们互换。
var arr = [5,1,3,4,2];
// 大循环，确定执行几行
for(var i = 0;i<arr.length-1;i++){
// 小循环，确定执行多少次
for(var j = 0;j<arr.length-i-1;j++){
// 开始判断，当前位置和后一位作比较，大的放后面
if(arr[j]>arr[j+1]){
var ls = arr[j];
arr[j] = arr[j+1];
arr[j+1] = ls;
}
}
}
4.选择排序：类似于冒泡排序，不同之处在于，它不是每比较一次就调换位置，而是一轮比较完毕，找到最大值（最小值）之后，将其放在正确的位置，其他数的位置不变。
var arr = [3,5,1,2,4];
console.log(arr);
for(var i = 0;i<arr.length-1;i++){
// 假设第一位是最小值
var iNow = arr[i];
// 立即将假设最小值得位置，也存出来
var iNowIndex = i;
for(var j=i+1;j<arr.length;j++){
// 假设验证第一位是最小值的正确性，不正确，就拿到比假设值还小的值
if(iNow > arr[j]){
iNow = arr[j];
iNowIndex = j;
}
}
// 小循环结束后，iNow必然是最小值，此刻数组还未发生变化
var ls = arr[i];
arr[i] =iNow;
// 上面是将最小值放在第一位
// 第一位原本的数据，放在原本最小值的位置
arr[iNowIndex] = ls;
}
5.通过循环按执行顺序，做一个5X5的二维数组，赋1-25的自然数，然后输出该数组的左下半三角：
// 定义数组
var a =[[],[],[],[],[]];
// 创建循环，定义范围
for(var i=0; i<25; i++){
a[parseInt(i/5)].push(i+1);
}
// 打印数组
console.log(a);
// 左下半三角
for(var i=0; i<a.length; i++){
for(var j=0; j<i+1; j++){
document.write(a[i][j] + " ");
}
document.write("<br>");
}
6.编写函数norepeat（arr）将数组的重复元素去掉，并返回新的数组：
第一种方式
// 声明一个含有重复值的数组
var arr = [2,2,7,3,4,5,5,3,2,6,8,9];
//创建函数
function norepeat(arr){
//遍历数组
for(var i = 0;i < arr.length;i++){
//i分别于i+1和后面的依次进行比较
for(var j = i + 1;j < arr.length;j++){
//如果相等，删除j中的那个值
if(arr[i]==arr[j]){
arr.splice(j,1);
//防止第三个及以后的重复的忽略而没有进行比较
j--;
}
}
}
arr.sort(function(a,b){
return a - b; // 升序排列
})
return arr;
}
var res = norepeat(arr);
console.log(res);
第二种方式
function norepeat(bArr){
// 去重操作：数组的操作中非常具有代表性的一个
// 需要有一个判断是否存在的功能：has
var sArr = [];
for(var i=0;i<bArr.length;i++){
// 利用自己封装的判断数组中是否存在某个数据的功能
// 判断sArr中，是否具有bArr[i]这个数据
// 存在true，不存在false
var qwe = has(sArr, bArr[i]);
// 要的是不存在，要的是false，但是false放在if中就不执行了，所以要 非 一下
if(!qwe){
sArr.push(bArr[i]);
}
}
return sArr;
}
var arr = [1,2,3,4,5,4,3,2,1,1,1];
console.log(arr);
var res = norepeat(arr);
console.log(res);
console.log(arr);
// 判断数组中是否存在某个数据，存在true，不存在false
function has(myarr,data){
for(var i=0;i<myarr.length;i++){
// 因为这里是循环，循环会执行多次，每次只判断一个
if(myarr[i] === data){
// 如果数据相同了，可以返回true，同时函数停止
return true;
}
}
return false;
}
7.向数组末尾追加一个元素最常见的两种方式：
// 1.length
var arr = [1,2,3,4,5];
arr[arr.length] = 666666;
console.log(arr);
// 2.push
var arr1 = [1,2,3,4,5,];
arr1.push(6666666);
console.log(arr1);
8.统计字符串中每个字符的个数：
var str = 'abcdacd';
for(var i=0;i<str.length;i++){
//内层循环 需要统计 一个字符 在一个字符串中出现的次数
console.log(str[i]+'统计字符出现的次数')
var c = str[i];//在 str 出现的次数
var times = charTimes(c,str);
console.log(c+'出现的次数'+times);
}
//a abcdwe
//统计c在str中出现的次数
function charTimes(c,str){
var times = 0;
for(var i=0;i<str.length;i++){
if(c == str[i]){
times++;
}
}
return times;
}
9.已知字符串“a,a,b,c,c,d”，统计每个字符出现的次数，结果显示 a 2、b 1、c 2、d1，去掉重复的字符，使结果显示 abcd：
第一种方式
var str = 'a,a,b,c,c,d';
//a 2
//a 2
// b 1
//[a,a,b,c,c,d]
//[a,b,c,d] 中的每个元素在str中出现的次数
var arr = str.split(',')
console.log(arr);
norepeat(arr);
console.log(arr)；
for(var i=0;i<arr.length;i++){
//console.log(arr[i])
console.log(arr[i]+charTimes(arr[i],str))
}
第二种方式：
// 统计次数
var str = "a,a,b,c,c,d";
// 结果以对象显示，对象需要手动创建
var obj = {};
// 循环是在取每一个字符
for(var i=0;i<str.length;i++){
// 将每一个字符都保存出来
var attr = str[i];
// 根据保存出来的字符，判断对象中是否具有这个属性（注意这个属性此时是变量的形式）
// obj[attr]
if(obj[attr]){
// 如果不是第一次遇到，之前已经给了一个数字了，这时就不会false了，就可以累加了
obj[attr]++
}else{ // 如果没有这个属性，会拿到undefined，走到else，给她创建一个设置为1
obj[attr] = 1;
}
}
// 最终对象就是计数的结果
console.log(obj);
// 对象的key其实就是去重之后的结果
var s = "";
for(var suibianxiede in obj){
s += suibianxiede;
}
console.log(s);
10.生成4位数字的随机验证码：
// 先随机生成至少12个字符，然后，每种出现的次数都一样
function rdmStr(){
// 先生成随机的库：在库内，每种类型的个数都是一致的，保证将来的公平
var str = "";
for(var i=0;i<4;i++){
var num = random(0,9);
var az = String.fromCharCode(random(97,122));
var AZ = String.fromCharCode(random(65,90));
str = str + num + az + AZ;
}
// 再从随机生成的库中，随机取四个索引，拼接
var randomStr = "";
for(var i=0;i<4;i++){
var index = random(0,str.length-1);
randomStr += str[index];
}
// console.log(randomStr);
return randomStr;
}
console.log(rdmStr());
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
11.编写函数，判断一个字符串是否是 “可回文字符串”，如：abccba：
function fn(str){
var c = parseInt((str.length+1)/2);
for(var i=0;i<c;i++){
// 1:最后1位
// 2:倒数第二位
if(str[i] !== str[str.length-1-i]){
return false;
}
}
return true;
}
12.敏感词过滤：
// 1.设置敏感词库
var arr = ["嗯","哦","啊"];
// 2.得有一句话
var str = "嗯嗯，我知道了啊，记得呢哦。";
// replace不会修改原字符，每次替换之后，需要手动覆盖
for(var i=0;i<arr.length;i++){
for(var j=0;j<str.length;j++){
str = str.replace(arr[i],"*");
}
}
console.log(str);
13.计算两个日期之间的差值：天，时，分，秒：
function dateDiff(date1,date2){
var d1 = newDate(date1);
var d2 = date2 ? new Date(date2) : new Date();
// 最安全的做法是，获取时间戳，然后相减
var t1 = d1.getTime();
var t2 = d2.getTime();
var time = Math.abs(t1 - t2);
// 根据毫秒数，计算天，时，分，秒
var tian = parseInt(time/1000/60/60/24);
var shi = parseInt((time - tian*24*60*60*1000)/1000/60/60);
var fen = parseInt((time - tian*24*60*60*1000 - shi*60*60*1000)/1000/60);
var miao = parseInt((time - tian*24*60*60*1000 - shi*60*60*1000 - fen*60*1000)/1000);
// 优化最终数据的拼接结果，想返回就返回，不想返回就直接打印
console.log(tian);
console.log(shi);
console.log(fen);
console.log(miao);
}
// dateDiff("2008,8,8 20:8:8", "1949,10,1,10:1:0");
dateDiff("2020,2,23 20:8:8");
14.密码强度验证：页面有一个输入框和按钮，输入框可以输入数字，字母，特殊字符。点击按钮时验证密码强度：一种为弱，两种为中，三种为强。（不允许为空，没有长度限制）：
<input type="text" id="txt" />
<input type="button" id="btn" value="检测" />
<span id="tips"></span>
<script type="text/javascript">
var txt = document.getElementById('txt');
var btn = document.getElementById("btn");
var tips = document.getElementById('tips');
txt.oninput =function(){
var str = txt.value;
if(str.length >0){
tips.innerHTML= '';
//判断等级
//假设没数字，循环遍历字符串，只要有一个数字，肯定含有数字
var myNum = false;
var myEn = false;
var myOther = false;
for(var i=0;i<str.length;i++){
// 定义一个数组c
var c = str[i];
//可以直接按照编码比较两个字符
// 判断是否有数字
if(c >= '0' && c <= '9'){
myNum = true;
// 判断是否有小写字母
}else if(c >= 'a' && c <= 'z'){
myEn = true;
// 判断是否有大写字母
}else if(c >= 'A' && c <= 'Z'){
myEn = true;
// 判断是否有其他符号
}else{
myOther = true;
}
}
// 创建一个点击事件函数
var fn = function(){
if(myNum && myEn && myOther ){
tips.innerHTML = '高'
}else if(myNum && !myEn && !myOther){
tips.innerHTML = '低';
}else if(!myNum && !myEn&& myOther){
tips.innerHTML = '低';
}else if(!myNum && myEn && !myOther){
tips.innerHTML = '低';
}else if(!myNum && myEn && myOther){
tips.innerHTML = '中';
}else if(myNum && !myEn && myOther){
tips.innerHTML = '中';
}else if(myNum && myEn && !myOther){
tips.innerHTML = '中';
}
}
}else if(str.length == 0){
tips.innerHTML = '不允许输入空字符';
}
btn.onclick = fn;
}
15.随机生成十六进制的颜色值（如：#3a456c）:
var str = "0123456789abcdef";
var res = "";
for(var i=0;i<6;i++){
//0-str.length
var n = parseInt(Math.random()*str.length);
res += str[n];
}
console.log("#" + res);
16.随机生成一个包含小写字母和数字的6位数验证码：
function rdmStr(){
// 先生成随机的库：在库内，每种类型的个数都是一致的，保证将来的公平
var str = "";
for(var i=0;i<6;i++){
var num = random(0,9);
var az = String.fromCharCode(random(97,122));
str = str + num + az;
}
// 再从随机生成的库中，随机取6个索引，拼接
var randomStr = "";
for(var i=0;i<6;i++){
var index = random(0,str.length-1);
randomStr += str[index];
}
// console.log(randomStr);
return randomStr;
}
console.log(rdmStr());
// 先封装随机数函数
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
17.添加倒计时效果：
// 点击开始，数字-1
//当数字为0
// 停止
var timeout='10';
var btn2 =document.getElementById("btn2");
var countdown = function(){
if (timeout <= 0){
document.getElementById("btn1").value = '时间到';
}
if (timeout > 0){
document.getElementById("btn1").value = '还有 '+timeout+' 秒';
setTimeout('countdown()',1000);
}
timeout--;
}
btn2.onclick = countdown;
18.模拟广告弹出窗(自动关闭)：
// 打开页面之后，出现一个按钮，点击按钮，会出现一个
// 三秒后，消失
function hf(sel){
return document.querySelector(sel);
}
//广告弹出自动关闭
var box = document.getElementsByTagName('div')[0];
console.log(box);
//onclick of null/undefined
var oSpan = hf('#show');
box.style.display = 'none';
var btn = document.getElementById('box1')
btn.onclick =function(){
box.style.display = 'block';
clearInterval(timer)
var count = 3;
oSpan.innerHTML = count;
var timer = setInterval(function(){
count--;
oSpan.innerHTML = count;
if(count==0){
box.style.display= 'none';
clearInterval(timer)
}
},1000)
}
19.延迟提示框：鼠标放在某个元素上一会，出现一个提示框，鼠标离开一会，隐藏提示框：
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onmouseover = function(){
setTimeout (function(){
box.style.display = "block";
},2000)
}
btn.onmouseout = function(){
setTimeout (function(){
box.style.display = "none";
},2000)
}
20.动态创建的表格：页面上有两个输入框，一个按钮，一个表格，在输入框输入内容，点击按钮每个输入框的内容会插入到表格的每个td中：
var ipts = document.getElementsByTagName('input')
var addBtn = document.getElementById('add-btn')
addBtn.onclick = function(){
//创建第一个td
var td1 = document.createElement('td');
td1.innerHTML = ipts[0].value;
//创建第二个td
var td2 = document.createElement('td');
td2.innerHTML = ipts[1].value;
//创建第三个td
var td3 = document.createElement('td');
td3.innerHTML = ipts[2].value;
//创建第四个td
var td4 = document.createElement('td');
td4.innerHTML = ipts[3].value;
//创建tr
var tr = document.createElement('tr');
//把 td 加入tr
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
//把tr 添加到 tab中
var tab = document.getElementById('tab');
tab.appendChild(tr);
}
1682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
