Q1. 在 JavaScript 中，如何求出两个数组的交集和差集

  1. let a = [1, 2, 3];
  2. let b = [3, 5, 2]; 
  4. // 并集
  5. let unionSet = new Set([...a, ...b]);
  6. //[1,2,3,5]
  8. // 交集
  9. let intersection = a.filter(v => b.includes(v))
  10. // [2,3]
  12. // ab差集
  13. let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v))
  14. // [1]

Q2.利用js、css来实现模糊图片先加载后加载高清图

  1. .box{
  2.     position: relative;overflow: hidden;height: 300px;width: 300px;
  3. }
  4. .box img{
  5.     width: 100%;height: 100%;
  6. }
  7. .box .bg{/*缩略图*/
  8.     display: block;filter: blur(15px);transform: scale(1);
  9. }
  10. .box .show_img{/*加载完成显示的实际图*/
  11.     position: absolute;opacity: 0;top: 0;left: 0;transition: opacity 1s linear;
  12. }
  15. <div class="box">
  16.   <img src="" class="bg"/>
  17.   <img src="" class="show_img"/> 
  18. </div>
  20. <script>
  21. var show_img=document.querySelector('.show_img'),
  22. /*图片加载完成*/  
  23. show_img.onload = function () {
  24.     show_img.style.opacity="1";
  25. };
  26. </script>

Q3.利用Canvans将两张图片合成一张图片

  1. /* 
  2.     图片的跨域头都必须设置（access-control-allow-origin: *） 
  3. */ 
  4. var url = "http://cdn.shareitgames.com/images/gameenroll/01.webp";
  5. var picSrc = "http://cdn.shareitgames.com/images/gameenroll/01.webp";
  7. const loadImg = src => {
  8.     const paths = Array.isArray(src) ? src : [src];
  9.     // console.log(paths)
  10.     const promise = [];
  11.     var i=0;
  12.     paths.forEach(path => {
  13.       i++;
  14.       promise.push(
  15.         new Promise((resolve, reject) => {
  16.           var that =this;
  17.            var timeStamp = +new Date();
  18.           let img = new Image();
  19.           img.setAttribute('crossOrigin', 'anonymous');
  20.           if (i==1) {
  21.             img.src = that.picSrc;
  22.           } else {
  23.             img.src = path;
  24.           }
  25.           img.onload = () => {
  26.             resolve(img);
  27.           };
  28.           img.onerror = err => {
  29.             console.log("图片加载失败");
  30.           };
  32.         })
  33.       );
  34.     });
  35.     console.log(promise)
  36.     return Promise.all(promise);
  37.   };
  38.   const getImageData = (url, src) => {
  39.     // const imgsrc = qrcode.getQrBase64(url); // 如果为二维码，使用此方法，并下载依赖包（npn install --save jr-qrcode）
  40.     const imgsrc = url;
  41.     let canvas = document.createElement("canvas");
  42.     const width = document.documentElement.clientWidth;
  43.     const height = document.documentElement.clientHeight;
  44.     canvas.width = width * 2;
  45.     canvas.height = height * 2;
  46.     let ctx = canvas.getContext("2d");
  47.     loadImg([imgsrc, src]).then(([img1, img2]) => {
  48.       ctx.drawImage(img2, 0, 0, width * 2, height * 2);
  49.       ctx.drawImage(img1, width - 80, height * 2 - 220, 200, 160);
  50.       let imageURL = canvas.toDataURL("image/png");
  51.       document.getElementById("mix_img").setAttribute("src", imageURL);
  52.     });
  53.   };
  55.    getImageData(this.picSrc,this.url)

Q4.解决当前网页多个视频，播放当前视频暂停其余视频

  1. var videos = document.getElementsByTagName('video');
  2. for (var i = videos.length - 1; i >= 0; i--) {
  3.     (function(){
  4.         var p = i;
  5.         videos[p].addEventListener('play',function(){
  6.             pauseAll(p);
  7.         })
  8.     })()
  9. }
  10. function pauseAll(index){
  11.     for (var j = videos.length - 1; j >= 0; j--) {
  12.         if (j!=index) videos[j].pause();
  13.     }
  14. };

Q5.获取前20周的周五日期

  1. function getBeforeDate(n){
  2.   var date = new Date() ;
  3.   var year,month,day ;
  4.   var s = '';
  5.   date.setDate(date.getDate()-n);
  6.   year = date.getFullYear();
  7.   month = date.getMonth()+1;
  8.   day = date.getDate() ;
  9.   s = year + '-' + ( month < 10 ? ( '0' + month ) : month ) + '-' + ( day < 10 ? ( '0' + day ) : day) ;
  10.   return s ;
  11. };
  12. var now = new Date(); //当前日期
  13. var nowDayOfWeek = now.getDay()-1; //今天本周的第几天
  14. for (var i=0;i<20;i++) {
  15.   var day = (i+1) * (nowDayOfWeek+3) + i + i*3; // 当天距离上周周五的天数
  16.   console.log(getBeforeDate(day));
  17. };

Q6.将时间戳转换成“几分钟前”“几小时前”“几天前”….的等格式

  1. npm install timeago.js || cnpm install timeago.js
  3. import { format, render, cancel, register } from 'timeago.js';
  5. format('2019/08/30 12:30:00', 'zh_CN', new Date())
  7. // 列如
  8. <span class="needs_to_be_rendered" :datetime="date2"></span>
  10. var nodes = document.querySelectorAll('.needs_to_be_rendered');
  11. render(nodes, 'zh_CN') //使用render方法实时渲染节点
  12. timeago.cancel() // 取消所有实时渲染任务
  13. timeago.cancel(nodes[0]) // 取消特定的实时渲染

Q7.不重复的随机数

  1. function createRandom2(num , from , to){
  2.       var arr=[];
  3.       var json={};
  4.       while(arr.length<num)
  5.       {
  6.         //产生单个随机数
  7.         var ranNum=Math.ceil(Math.random()*(to-from))+from;
  8.         //通过判断json对象的索引值是否存在 来标记 是否重复
  9.         if(!json[ranNum])
  10.         {
  11.             json[ranNum]=1;
  12.             arr.push(ranNum);
  13.         }
  15.       }
  16.       return arr;
  17.     };
  18. alert(createRandom2(4,0,19));//生成4个从0-20之间不重复的随机数

Q8.倒计时

  1. <div>
  2.     <span id="_d">00</span>
  3.     <span id="_h">00</span>
  4.     <span id="_m">00</span>
  5.     <span id="_s">00</span>
  6.     <span id="_ms">00</span>
  7. </div>
  8. function countTime() {
  9.       var date = new Date();
  10.       var now = date.getTime();                
  11.       var endDate = new Date("2019-10-24 16:55:00");//设置截止时间
  12.       var end = endDate.getTime();
  13.       var leftTime = end - now; //时间差                              
  14.       var d, h, m, s, ms;
  15.       if(leftTime >= 0) {
  16.         d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
  17.         h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
  18.         m = Math.floor(leftTime / 1000 / 60 % 60);
  19.         s = Math.floor(leftTime / 1000 % 60);
  20.         ms = Math.floor(leftTime % 1000);
  21.         if(ms < 100) {
  22.           ms = "0" + ms;
  23.         }
  24.         if(s < 10) {
  25.           s = "0" + s;
  26.         }
  27.         if(m < 10) {
  28.           m = "0" + m;
  29.         }
  30.         if(h < 10) {
  31.           h = "0" + h;
  32.         }
  33.       } else {
  34.         console.log('已截止')
  35.       }
  36.       //将倒计时赋值到div中
  37.       document.getElementById("_d").innerHTML = d + "天";
  38.       document.getElementById("_h").innerHTML = h + "时";
  39.       document.getElementById("_m").innerHTML = m + "分";
  40.       document.getElementById("_s").innerHTML = s + "秒";
  41.       // document.getElementById("_ms").innerHTML = ms + "毫秒";
  42.       //递归每秒调用countTime方法，显示动态时间效果
  43.       setTimeout(countTime, 50);
  44.     }
  46.         countTime();

Q9.给当前url添加参数

  1. var newurl = updateQueryStringParameter(window.location.href, 'sp', '2');
  2. //向当前url添加参数，没有历史记录
  3. window.history.replaceState({
  4.     path: newurl
  5. }, '', newurl);
  7. function updateQueryStringParameter(uri, key, value) {
  8.     if(!value) {
  9.         return uri;
  10.     }
  11.     var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  12.     var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  13.     if (uri.match(re)) {
  14.         return uri.replace(re, '$1' + key + "=" + value + '$2');
  15.     }
  16.     else {
  17.         return uri + separator + key + "=" + value;
  18.     }
  19. }

Q10.js监听客户端内嵌h5页面切至后台应用

  1. window.addEventListener("visibilitychange", function (event) {
  2.   event.preventDefault();
  3.   // 可以干别的事
  4. })

Q11.关于emoji转换

  1. function transEmoji(str) {
  2.   var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
  3.   str = str.replace(patt, function(char){
  4.     var H, L, code;
  5.     if (char.length===2) {
  6.        H = char.charCodeAt(0); // 取出高位
  7.        L = char.charCodeAt(1); // 取出低位
  8.        code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法
  9.        return "&#" + code + ";";
  10.      } else {
  11.        return char;
  12.      }
  13.   });
  14.   return str;
  15. }
  16. console.log(transEmoji('🤪')) //&#129322;
  18. **
  19.   emoji码位都是U+1F92A这个样子，可以写为 \u{1F92A} 这样就可以直接在标签中使用显示emoji表情