devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript 20题简单小例子练习，锻炼代码逻辑思维，不看后悔系列（二）

作者：从前慢现在也慢 | 2024-06-14 10:31:37

赞

踩

JavaScript 20题简单小例子练习，锻炼代码逻辑思维，不看后悔系列（二）

1.有一个从小到大排好序的数组。现输入一个数，要求按原来的规律将它插入数组中:

  1.             // 定义一个数组
  2. 			var arr = [1,2,3,4,5,6,7,8,9];
  3. 			// 输入一个数
  4. 			var num = 6;
  5. 			// 数组末端添加 num
  6. 			arr.push(num);
  7. 			// 升序
  8. 			arr.sort(function(a,b){return a-b})

2.定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每5个数求出一个平均值，放在另一个数组中并输出。

  1. function fn(){
  2.         var sum = 0;         
  3.         var k = 0;           
  4.         var newArr = [];    
  5.         // 先创建一个长度为30的数组
  6.         var arr = new Array(30);
  7.         // 遍历数组的每一位，准备设置内容
  8.         for(var i=0;i<arr.length;i++){
  9.             // 设置从2开始的偶数
  10.             arr[i] = (i+1)*2;     
  11.             // 每填充一个数据，就累加起来
  12.             sum += arr[i];
  13.             // 再记录一次（修改独立计数器）
  14.             k++;
  15.             // 判断次数
  16.             if(k%5 == 0){
  17.                 // 计算平均值，并将平均值放在一个新数组中
  18.                 newArr.push(sum / 5);
  19.                 // 重置sum的值 
  20.                 sum = 0;
  21.             }
  22.         }
  23.         // console.log(arr);
  24.         return newArr;
  25.     }
  26.     var a = fn();
  27.     console.log(a);
  28.

3.冒泡排序：当每两个相邻的数比较后发现它们的顺序与排序要求相反对，就将它们互换。

  1. var arr = [5,1,3,4,2];
  2.     //   大循环，确定执行几行
  3.     for(var i = 0;i<arr.length-1;i++){
  4.         //  小循环，确定执行多少次
  5.         for(var j = 0;j<arr.length-i-1;j++){
  6.             //  开始判断，当前位置和后一位作比较，大的放后面
  7.             if(arr[j]>arr[j+1]){
  8.                 var ls = arr[j];
  9.                 arr[j] = arr[j+1];
  10.                arr[j+1] = ls; 
  11.       }
  12.    }
  13.  }

4.选择排序：类似于冒泡排序，不同之处在于，它不是每比较一次就调换位置，而是一轮比较完毕，找到最大值（最小值）之后，将其放在正确的位置，其他数的位置不变。

  1. var arr = [3,5,1,2,4];
  2. console.log(arr);
  3.     for(var i = 0;i<arr.length-1;i++){
  4.     // 假设第一位是最小值
  5.     var iNow = arr[i];
  6.     // 立即将假设最小值得位置，也存出来
  7.     var iNowIndex = i;
  8.         for(var j=i+1;j<arr.length;j++){
  9.         // 假设验证第一位是最小值的正确性，不正确，就拿到比假设值还小的值
  10.             if(iNow > arr[j]){
  11.             iNow = arr[j];
  12.             iNowIndex = j;
  13.         }
  14.     }
  15.     // 小循环结束后，iNow必然是最小值，此刻数组还未发生变化
  16.     var ls = arr[i];
  17.     arr[i]  =iNow;
  18.     // 上面是将最小值放在第一位
  19.     // 第一位原本的数据，放在原本最小值的位置
  20.         arr[iNowIndex] = ls;
  21. }

5.通过循环按执行顺序，做一个5X5的二维数组，赋1-25的自然数，然后输出该数组的左下半三角：

  1.    // 定义数组
  2.    var a =[[],[],[],[],[]];
  3.        // 创建循环，定义范围
  4.        for(var i=0; i<25; i++){
  5.            a[parseInt(i/5)].push(i+1);
  6.        }
  7.        // 打印数组
  8.        console.log(a);
  9.            // 左下半三角
  10.            for(var i=0; i<a.length; i++){
  11.                for(var j=0; j<i+1; j++){
  12.                document.write(a[i][j] + "&nbsp;");
  13. }
  14. document.write("<br>");
  15. }

6.编写函数norepeat（arr）将数组的重复元素去掉，并返回新的数组：

第一种方式

  1. // 声明一个含有重复值的数组
  2. var arr = [2,2,7,3,4,5,5,3,2,6,8,9];
  3. //创建函数
  4. function norepeat(arr){
  5.             //遍历数组
  6. for(var i = 0;i < arr.length;i++){
  7.                 //i分别于i+1和后面的依次进行比较
  8. 	for(var j = i + 1;j < arr.length;j++){
  9.                     //如果相等，删除j中的那个值
  10. 		if(arr[i]==arr[j]){
  11.                         arr.splice(j,1);
  12.                         //防止第三个及以后的重复的忽略而没有进行比较
  13. 			j--;
  14. 		}
  15. 	}
  16.             }
  17.             arr.sort(function(a,b){
  18.                         return a - b;   //  升序排列
  19.                         }) 
  20.             return arr;
  21.         }
  22.         var res = norepeat(arr);
  23.     	console.log(res);

第二种方式

  1. function norepeat(bArr){
  2.      // 去重操作：数组的操作中非常具有代表性的一个
  3.      // 需要有一个判断是否存在的功能：has
  4.      var sArr = [];
  5.      for(var i=0;i<bArr.length;i++){
  6.          // 利用自己封装的判断数组中是否存在某个数据的功能
  7.          // 判断sArr中，是否具有bArr[i]这个数据
  8.          // 存在true，不存在false
  9.          var qwe = has(sArr, bArr[i]);
  10.          // 要的是不存在，要的是false，但是false放在if中就不执行了，所以要 非 一下
  11.          if(!qwe){
  12.              sArr.push(bArr[i]);
  13.          }
  14.      }
  15.      return sArr;
  16.  }
  17.      var arr = [1,2,3,4,5,4,3,2,1,1,1];
  18.     console.log(arr);
  19.     var res = norepeat(arr);
  20.     console.log(res);
  21.     console.log(arr);
  22.  
  23.     // 判断数组中是否存在某个数据，存在true，不存在false
  24.     function has(myarr,data){
  25.         for(var i=0;i<myarr.length;i++){
  26.             // 因为这里是循环，循环会执行多次，每次只判断一个
  27.             if(myarr[i] === data){
  28.                 // 如果数据相同了，可以返回true，同时函数停止
  29.                 return true;
  30.             }
  31.         }
  32.         return false;
  33.     }

7.向数组末尾追加一个元素最常见的两种方式：

  1. // 1.length 
  2.     var arr  = [1,2,3,4,5];
  3.     arr[arr.length] = 666666;
  4.     console.log(arr);
  5. // 2.push
  6.     var arr1 = [1,2,3,4,5,];
  7.     arr1.push(6666666);
  8.     console.log(arr1);

8.统计字符串中每个字符的个数：

  1. var str = 'abcdacd';			
  2. for(var i=0;i<str.length;i++){	
  3. 	//内层循环 需要统计  一个字符 在一个字符串中出现的次数
  4. 	console.log(str[i]+'统计字符出现的次数')
  5. 	var c = str[i];//在 str 出现的次数
  6. 	var times = charTimes(c,str);
  7. 	console.log(c+'出现的次数'+times);	
  8. }
  9. //a  abcdwe
  10. //统计c在str中出现的次数
  11. function charTimes(c,str){
  12. 	var times = 0;
  13. 	for(var i=0;i<str.length;i++){
  14. 		if(c == str[i]){
  15. 			times++;
  16. 		}
  17. 	}	
  18. 	return times;
  19. }

 9.已知字符串“a,a,b,c,c,d”，统计每个字符出现的次数，结果显示 a 2、b 1、c 2、d1，去掉重复的字符，使结果显示 abcd：

第一种方式

  1. var str = 'a,a,b,c,c,d';
  2. //a 2
  3. //a 2
  4. // b 1
  5. //[a,a,b,c,c,d]
  6. //[a,b,c,d] 中的每个元素在str中出现的次数
  7. var arr = str.split(',')
  8. console.log(arr);
  9. norepeat(arr);
  10. console.log(arr)；
  11. for(var i=0;i<arr.length;i++){
  12. 	//console.log(arr[i])
  13. 	console.log(arr[i]+charTimes(arr[i],str))
  14. }

第二种方式：

  1.    // 统计次数
  2.     var str = "a,a,b,c,c,d";
  3.     // 结果以对象显示，对象需要手动创建
  4.     var obj = {};
  5.     // 循环是在取每一个字符
  6.     for(var i=0;i<str.length;i++){
  7.         // 将每一个字符都保存出来
  8.         var attr = str[i];
  9.         // 根据保存出来的字符，判断对象中是否具有这个属性（注意这个属性此时是变量的形式）
  10.         // obj[attr]
  11.         if(obj[attr]){
  12.             // 如果不是第一次遇到，之前已经给了一个数字了，这时就不会false了，就可以累加了
  13.             obj[attr]++
  14.         }else{      // 如果没有这个属性，会拿到undefined，走到else，给她创建一个设置为1
  15.             obj[attr] = 1;
  16.         }
  17.     }
  18.     // 最终对象就是计数的结果
  19.     console.log(obj);
  20.  
  21.     // 对象的key其实就是去重之后的结果
  22.     var s = "";
  23.     for(var suibianxiede in obj){
  24.         s += suibianxiede;
  25.     }
  26.     console.log(s);

10.生成4位数字的随机验证码：

  1. // 先随机生成至少12个字符，然后，每种出现的次数都一样
  2. function rdmStr(){
  3.    // 先生成随机的库：在库内，每种类型的个数都是一致的，保证将来的公平
  4.    var str = "";
  5.    for(var i=0;i<4;i++){
  6.        var num = random(0,9);
  7.        var az = String.fromCharCode(random(97,122));
  8.        var AZ = String.fromCharCode(random(65,90));
  9.        str = str + num + az + AZ;
  10.    }
  11.     // 再从随机生成的库中，随机取四个索引，拼接
  12.    var randomStr = "";
  13.    for(var i=0;i<4;i++){
  14.        var index = random(0,str.length-1);
  15.        randomStr += str[index];
  16.    }
  17.    // console.log(randomStr);
  18.    return randomStr;
  19. }
  20. console.log(rdmStr());
  21. function random(a,b){
  22.    return Math.round(Math.random()*(a-b)+b);
  23. }

11.编写函数，判断一个字符串是否是 “可回文字符串”，如：abccba：

  1. function fn(str){
  2.    var c = parseInt((str.length+1)/2);
  3.    for(var i=0;i<c;i++){
  4.        // 1:最后1位
  5.        // 2:倒数第二位
  6.        if(str[i] !== str[str.length-1-i]){
  7.            return false;
  8.        }
  9.    }
  10.    return true;
  11. }

12.敏感词过滤：

  1.     // 1.设置敏感词库
  2.     var arr = ["嗯","哦","啊"];
  3.     // 2.得有一句话
  4.     var str = "嗯嗯，我知道了啊，记得呢哦。";
  5.     // replace不会修改原字符，每次替换之后，需要手动覆盖
  6.     for(var i=0;i<arr.length;i++){
  7.         for(var j=0;j<str.length;j++){
  8.             str = str.replace(arr[i],"*");
  9.         }
  10.     }
  11.     console.log(str);

13.计算两个日期之间的差值：天，时，分，秒：

  1.  function dateDiff(date1,date2){
  2.      var d1 = newDate(date1);
  3.      var d2 = date2 ? new Date(date2) : new Date();
  4.       // 最安全的做法是，获取时间戳，然后相减
  5.          var t1 = d1.getTime();
  6.          var t2 = d2.getTime();
  7.  
  8.          var time = Math.abs(t1 - t2);
  9.          // 根据毫秒数，计算天，时，分，秒
  10.          var tian = parseInt(time/1000/60/60/24);
  11.          var shi = parseInt((time - tian*24*60*60*1000)/1000/60/60);
  12.          var fen = parseInt((time - tian*24*60*60*1000 - shi*60*60*1000)/1000/60);
  13.          var miao = parseInt((time - tian*24*60*60*1000 - shi*60*60*1000 - fen*60*1000)/1000);
  14.  
  15.          // 优化最终数据的拼接结果，想返回就返回，不想返回就直接打印
  16.          console.log(tian);
  17.          console.log(shi);
  18.          console.log(fen);
  19.          console.log(miao);
  20.  }
  21.  // dateDiff("2008,8,8 20:8:8", "1949,10,1,10:1:0");
  22.  dateDiff("2020,2,23 20:8:8");

14.密码强度验证：页面有一个输入框和按钮，输入框可以输入数字，字母，特殊字符。点击按钮时验证密码强度：一种为弱，两种为中，三种为强。（不允许为空，没有长度限制）：

  1. <input type="text"  id="txt" />
  2. <input type="button"   id="btn" value="检测" />
  3. <span id="tips"></span>
  4. <script type="text/javascript">
  5. var txt = document.getElementById('txt');
  6. var btn = document.getElementById("btn");
  7. var tips = document.getElementById('tips');
  8. txt.oninput =function(){
  9.     var str = txt.value;
  10.     if(str.length >0){
  11.         tips.innerHTML= '';
  12.         //判断等级
  13.         //假设没数字，循环遍历字符串，只要有一个数字，肯定含有数字
  14.         var myNum = false;
  15.         var myEn = false;
  16.         var myOther = false;
  17.         for(var i=0;i<str.length;i++){
  18.             // 定义一个数组c
  19.             var c = str[i];
  20.         //可以直接按照编码比较两个字符 
  21.             // 判断是否有数字
  22.             if(c >= '0' && c <= '9'){
  23.                 myNum = true;
  24.                 // 判断是否有小写字母
  25.             }else if(c >= 'a' && c <= 'z'){
  26.                 myEn = true;
  27.                 // 判断是否有大写字母
  28.             }else if(c >= 'A' && c <= 'Z'){
  29.                 myEn = true;
  30.                 // 判断是否有其他符号
  31.             }else{
  32.                 myOther = true;
  33.             }
  34.         
  35.         }
  36.         // 创建一个点击事件函数
  37.         var fn = function(){
  38.             if(myNum  && myEn  && myOther ){
  39.                 tips.innerHTML = '高'
  40.             }else if(myNum && !myEn && !myOther){
  41.                 tips.innerHTML = '低';
  42.             }else if(!myNum && !myEn&& myOther){
  43.                 tips.innerHTML = '低';
  44.             }else if(!myNum && myEn && !myOther){
  45.                 tips.innerHTML = '低';
  46.             }else if(!myNum && myEn && myOther){
  47.                 tips.innerHTML = '中';
  48.             }else if(myNum && !myEn && myOther){
  49.                 tips.innerHTML = '中';
  50.             }else if(myNum && myEn && !myOther){
  51.                 tips.innerHTML = '中';
  52.             }
  53.         }
  54.     }else if(str.length == 0){
  55.         tips.innerHTML = '不允许输入空字符';
  56.     }
  57.         btn.onclick = fn;
  58. }

15.随机生成十六进制的颜色值（如：#3a456c）:

  1.  var str = "0123456789abcdef";
  2.     var res = "";
  3.     for(var i=0;i<6;i++){
  4.         //0-str.length
  5.         var n = parseInt(Math.random()*str.length);
  6.         res += str[n];
  7.     }
  8.     console.log("#" + res);

16.随机生成一个包含小写字母和数字的6位数验证码：

  1. function rdmStr(){
  2. // 先生成随机的库：在库内，每种类型的个数都是一致的，保证将来的公平
  3.     var str = "";
  4.     for(var i=0;i<6;i++){
  5.         var num = random(0,9);
  6.         var az = String.fromCharCode(random(97,122));
  7.         str = str + num + az;
  8.         }
  9.     // 再从随机生成的库中，随机取6个索引，拼接
  10.     var randomStr = "";
  11.     for(var i=0;i<6;i++){
  12.         var index = random(0,str.length-1);
  13.         randomStr += str[index];
  14.     }
  15.     // console.log(randomStr);
  16.     return randomStr;
  17. }
  18. console.log(rdmStr());
  19. //  先封装随机数函数
  20. function random(a,b){
  21.     return Math.round(Math.random()*(a-b)+b);
  22. }

17.添加倒计时效果：

  1. // 点击开始，数字-1
  2. //当数字为0
  3. // 停止
  4. var timeout='10';
  5.    var btn2 =document.getElementById("btn2");
  6.    var countdown = function(){
  7.        if (timeout <= 0){
  8.            document.getElementById("btn1").value = '时间到';
  9.        }
  10.        if (timeout > 0){
  11.            document.getElementById("btn1").value = '还有 '+timeout+' 秒';
  12.            setTimeout('countdown()',1000);
  13.        }
  14.            timeout--;
  15.        }
  16.          btn2.onclick = countdown;

18.模拟广告弹出窗(自动关闭)：

  1. // 打开页面之后，出现一个按钮，点击按钮，会出现一个
  2. // 三秒后，消失
  3.         function hf(sel){
  4.                 return document.querySelector(sel);
  5.             }
  6.             //广告弹出自动关闭
  7.             var box = document.getElementsByTagName('div')[0];
  8.             console.log(box);
  9.             //onclick of null/undefined  
  10.             var oSpan = hf('#show');
  11.             
  12.             box.style.display = 'none';
  13.             
  14.             var btn = document.getElementById('box1')
  15.             btn.onclick =function(){
  16.                 box.style.display = 'block';
  17.                 clearInterval(timer)
  18.                 var count = 3;
  19.                 oSpan.innerHTML = count;
  20.                 var timer =  setInterval(function(){
  21.                     count--;
  22.                     oSpan.innerHTML = count;
  23.                     if(count==0){
  24.                         box.style.display= 'none';
  25.                         clearInterval(timer)
  26.                     }
  27.             },1000)
  28.             }

19.延迟提示框：鼠标放在某个元素上一会，出现一个提示框，鼠标离开一会，隐藏提示框：

  1. var btn = document.getElementById("btn");
  2. var box = document.getElementById("box");
  3. btn.onmouseover = function(){
  4.     setTimeout (function(){
  5.     box.style.display = "block";
  6.     },2000)
  7.     }
  8.     btn.onmouseout = function(){
  9.         setTimeout (function(){
  10.  
  11.         box.style.display = "none";
  12.         },2000)
  13.     }

20.动态创建的表格：页面上有两个输入框，一个按钮，一个表格，在输入框输入内容，点击按钮每个输入框的内容会插入到表格的每个td中：

  1. var ipts = document.getElementsByTagName('input')
  2. var addBtn = document.getElementById('add-btn')
  3. addBtn.onclick = function(){
  4.    //创建第一个td
  5.    var td1 = document.createElement('td');
  6.        td1.innerHTML = ipts[0].value;
  7.    //创建第二个td
  8.    var td2 = document.createElement('td');
  9.        td2.innerHTML = ipts[1].value;
  10.    //创建第三个td
  11.    var td3 = document.createElement('td');
  12.        td3.innerHTML = ipts[2].value;
  13.    //创建第四个td
  14.    var td4 = document.createElement('td');
  15.        td4.innerHTML = ipts[3].value;
  16.    //创建tr
  17.    var tr = document.createElement('tr');
  18.    //把 td 加入tr
  19.    tr.appendChild(td1);
  20.    tr.appendChild(td2);
  21.    tr.appendChild(td3);
  22.    tr.appendChild(td4);
  23.    //把tr 添加到 tab中
  24.    var tab = document.getElementById('tab');
  25.    tab.appendChild(tr);
  26. }

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号