jquery - 简忆博客

js合并两个数组生成合并后的key：value数组方法

2020-04-23 jquery

js合并两个数组生成合并后的key：value数组方法// var activeSubjectsName = ["JAVA", "PHP", "Android", "IOS", "Python"];// var activeSubjectsNum = [46, 2, 2, 28, 29];// var activeSubjectsArr = [];for (var i = 0; i < activeSubjectsName.length; i++) { console.log(i); var activeSubjectsObject = {}; for (var j = 0; j < activeSubjectsNum.length; j++) { if (i == j) { activeSubjectsObject.name = activeSubjectsName[i]; activeSubjectsObject.value = activeSubjectsNum[j]; activeSubjectsArr.push(activeSubjectsObject); } }}console.log(activeSubjectsArr);// activeSubjectsArr=[// {name: "JAVA", value: 46},// {name: "PHP", value: 2},// {name: "Android", value: 2},// {name: "IOS", value: 28},// {name: "Python", value: 29}// ]

前端使用JsBarcode生成条形码

2020-03-21 jquery

147 0

前端使用JsBarcode生成条形码注：需引入 jsbarcode 插件JsBarcode安装:npminstalljsbarcode--save npminstalljsbarcodeHTML 生成条形码代码 $("#svgcode").JsBarcode('我是条形码'); 最终生成的条形码OptionDefault valueTypeformat（选择要使用的条形码类型）"auto" (CODE128)Stringwidth（设置条之间的宽度）2Numberheight（高度）100NumberdisplayValue（是否在条形码下方显示文字）trueBooleantext （覆盖显示的文本）undefinedStringfontOptions（使文字加粗体或变斜体）""Stringfont（设置文本的字体）"monospace"StringtextAlign（设置文本的水平对齐方式）"center"StringtextPosition（设置文本的垂直位置）"bottom"StringtextMargin（设置条形码和文本之间的间距）2NumberfontSize（设置文本的大小）20Numberbackground（设置条形码的背景）"#ffffff"String (CSS color)lineColor（设置条和文本的颜色）"#000000"String (CSS color)margin（设置条形码周围的空白边距）10NumbermarginTop（设置条形码上方的空白边距）undefinedNumbermarginBottom（设置条形码下方的空白边距）undefinedNumbermarginLeft（设置条形码左边的空白边距undefinedNumbermarginRight（设置条形码右边的空白边距）undefinedNumberflatfalseBooleanvalidfunction(valid){}Funct

JavaScript 获取当前网页header头部信息

2020-03-16 jquery

269 0

JavaScript 获取当前网页header头部信息varreq=newXMLHttpRequest(); req.open('GET',document.location,false); req.send(null); varheaders=req.getAllResponseHeaders().toLowerCase(); console.log(headers);

JS动态获取图片分辨率宽高大小

2020-03-07 jquery

229 0

JS动态获取图片分辨率宽高大小 functiongetpic(url,obj){ varimg=newImage(); img.src=url; if(img.complete){ document.write(img.width+'x'+img.height); $('.ddkkkkk_'+obj).text(img.width+'x'+img.height); }else{ img.onload=function(){ //document.write(img.width+'x'+img.height); $('.ddkkkkk_'+obj).text(img.width+'x'+img.height); img.onload=null; }; }; } getpic("{{$item->vod_pic}}","{{$item->id}}")

jquery数组去重

2020-01-02 jquery

264 0

vararr=["1","2","3","2","4","3"]; varres=unique(arr); console.log(res); //数组去重 functionunique(arr){ vararr2=arr.sort(); varres=[arr2[0]]; for(vari=1;i

sessionStorage的使用

2019-11-03 jquery

439 0

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。使用案例：html code: 关闭 javascript code：//判断sessionStorage里有没有isClose if(sessionStorage.getItem("isClose")){ $(".modecer").hide(); }else{ $(".modecer").show(); } //点击关闭隐藏存取数据 $(".colsebtn").click(function(){ $(".modecer").fadeOut(300); sessionStorage.setItem("isClose","1"); })

radio，CheckBox选中状态，判断是否选中，根据值设置radio选中

2019-10-24 jquery

487 0

radio，CheckBox选中状态，判断是否选中，根据值设置radio选中显示隐藏varstop=data.result $(":radio[name='rbsex'][value='"+stop+"']").prop("checked","checked");radio，CheckBox选中状态，判断是否选中，可以在元素中添加checked属性或者添加checked="checked" 都可以让某个选项默认选中，单选框的如果有多个checked 会以最后一个为准。我们可以使用 $("name='subject']:eq(0)").prop("checked");来判断有没有被真正的选中。返回布尔值$("[name='subject']:eq(0)").prop("checked",false[true]);设置选中或否定1、对radio 、checkbox 来说说，checked属性可以保证页面初始化被选中，但是通过js或者jquery 控制checked属性并不能保证相应的被选中，同样也不能通过checked属性来判断该元素是否被选中。2、checked属性并不能影响form表单的值，表单页面真正被选中的元素才是form表单提交的值。3、通jquery的prop方法可以完美的选中或者取消选中元素，使用prop("checked",true) 选中，prop("checked",false)取消选中，通prop("checked") 返回的false或者true判断是否选中。

JS实现Base64加密解密

2019-10-23 jquery

460 0

JavaScript实现Base64加密解密。Base64与其说是加密算法不如说是方便数据传输而生的数据转换手段。测试代码： test .resource_enc,.resource_dec{ width:500px; } .p1,.p2{ min-height:100px; background-color:#dcffe1; } varbase=newBase64(); functionencoding(){ vartext=document.getElementsByClassName("resource_enc")[0].value; document.getElementsByClassName("p1")[0].innerText=base.encode(text); } functiondecoding(){ vartext=document.getElementsByClassName("resource_dec")[0].value; document.getElementsByClassName("p2")[0].innerText=base.decode(text); } Base64.jsfunctionBase64(){ var_keyStr="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; this.encode=function(input){ varoutput=""; varchr1,chr2,chr3,enc1,enc2,enc3,enc4; vari=0; input=utf8Encode(input); while(i>2; enc2=((chr1&3)4); enc3=((chr2&15)6); enc4=chr3&63; if(isNaN(chr2)){ enc3=enc4=64; }elseif(isNaN(chr3)){ enc4=64; } output=output+ _keyStr.charAt(enc1)+_keyStr.charAt(enc2)+ _keyStr.charAt(enc3)+_keyStr.charAt(enc4); } returnoutput; }; this.decode=function(input){ varoutput=""; varchr1,chr2,chr3; varenc1,enc2,enc3,enc4; vari=0; input=input.replace(/[^A-Za-z0-9\+\/\=]/g,""); while(i>6)&63)|128); utfText+=String.fromCharCode((c&63)|128); } } returnutfText; }; utf8Decode=function(utfText){ varstring=""; vari=0; varc=0; varc1=0; varc2=0; while(i

jQuery实现购物车物品数量的加减

2019-10-09 jquery

374 0

实现购物车物品数量的加减，最小值为1，当最小值为1时再按减少，减少按钮不可编辑，当按增加数量时恢复减少按钮状态。这个除了加减功能外，也可以自动计算价格。 jQuery实现购物车物品数量的加减 $(function(){ vart=$("#quantity"); $("#add").click(function(){ t.val(parseInt(t.val())+1); $("#min").removeAttr("disabled");//当按加1时，解除$("#min")不可读状态 setTotal(); }) $("#min").click(function(){ if(parseInt(t.val())>1){//判断数量值大于1时才可以减少 t.val(parseInt(t.val())-1) }else{ $("#min").attr("disabled","disabled")//当$("#min")为1时，$("#min")不可读状态 } setTotal(); }) functionsetTotal(){ $("#total").html((parseInt(t.val())*3.95).toFixed(2)); } setTotal(); }) 单价：1.23 总价：

jQuery根据屏幕下拉到一定高度显示返回顶部按钮

2019-09-30 jquery

416 0

jQuery根据屏幕下拉到一定高度显示返回顶部按钮例子：$(function(){ $('.getop').hide(); $(window).scroll(function(){ if($(window).scrollTop()>900){ $('.getop').fadeIn(300); } else{$('.getop').fadeOut(200);} }); $('.getop').click(function(){ $('body,html').animate({scrollTop:0},900); returnfalse; }) })

jquery 实现类似淘宝换一换功能

2019-08-29 jquery

491 0

类似淘宝换一换功能在工作中我们经常会遇到，以下是一个简单的案例，仅供大家参考。实现效果图：实现代码：换一换 *{margin:0;padding:0px;} .hsow{width:400px;height:400px;margin:0auto;background-color:#fff;} .news-sub{width:400px;height:266px;float:left;position:relative;} .news-list-v{width:400px;height:266px;position:absolute;left:0px;top:0px;visibility:hidden;opacity:0;transition:0s0.2s;} .news-list-vli{list-style:none;width:133px;height:133px;float:left;text-align:center;} .news-list-vlia{color:#fff;list-style:none;font-size:50px;text-decoration:none;margin:0auto;line-height:133px} .news-list-vli:nth-of-type(odd){background-color:#55cbc4;} .news-list-vli:nth-of-type(even){background-color:#f45a8d;} .news-change{width:133px;height:133px;background-color:#f04124;color:#fff;font-size:34px;text-align:center;line-height:133px;cursor:pointer;display:inline-block;float:left;margin-left:133px;} .news-list-v.show{z-index:1;visibility:visible;opacity:1;transition:0.2s;} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 换一换 //换一换 var$newsLists=$('.news-sub').find('.news-list-v'); functionchangeNews(){ var$currentNews=$newsLists.filter('.show'); var$nextNews=$currentNews.next(); if($nextNews.length===0){ $nextNews=$newsLists.eq(0); } $newsLists.removeClass('show'); $nextNews.addClass('show'); } $('.news-change').on('click',function(){ changeNews(); });

jquery.cookie.js实现记住手机号功能

2019-06-16 jquery

706 0

记住账号或者密码，在很多网站上都可以看到，以下是一个简单的方法，用到的是 jquery.cookie.js ，供大家参考注意：cookie必须在线上才能起效的哦。附件下载地址：jquery.cookie.txt百度云盘下载地址：链接：https://pan.baidu.com/s/14h5EsL3Z4U3bGSssbByEjA提取码：9rzahtml代码：//引入jquery.cookie.js 电话* 自动输入历史手机号《个人信息授权书》登录逻辑代码： functionsumit(){ vartelkel=$('.telkel').val(); //SetCookie if(document.getElementById("remnuber").checked==true){//判断是否勾选 $.cookie('telkel',telkel); }else{ $.cookie("telkel","",{expires:-1}); } } $(function(){ varusername=$.cookie('telkel'); console.log(username) //将获取的值填充入输入框中 $('.telkel').val(username); if($('.telkel').val()!=null&&$('.telkel').val()!=''){//选中保存秘密的复选框 $("#remnuber").attr('checked',true); } })

JS判断页面加载是否完成

2019-06-13 jquery

470 0

在做页面的时候,经常碰到要在页面加载完全之后再去展现。JS判断页面加载是否完成document.onreadystatechange=function(){ 　　if(document.readyState=="complete"){ window.location="https://www.tpxhm.com/" 　} }

js随机数组，随机显示3个不重复数字

2019-01-18 jquery

740 0

js随机数组，随机显示3个不重复数字案例： Document //原数组 vararr=[0,1,2,3,4,5,6,7,8,9,10,11]; //输出数组 varout=[]; //输出个数 varnum=3; while(out.length>0; out.push(arr.splice(temp,1)); } alert(out);

js滑动指定特效

2019-01-10 jquery

511 0

我们逛网页的时候有时会看到，鼠标滚动到指定位置就会加载动画，以下是一个方法，仅供大家参考。主要用了2个文件，jquery.waypoints.js和animate.min.css附件：jquery.waypoints.js.txtanimate.min.css.txt引入两个文件，在前面加上以下js，还有在每个版块加上class="column"$(function(){ reAnimate(); }) //滑动指定特效 functionreAnimate(){ var_ele=$(".column"); _ele.each(function(index,element){ vareleAnimate=$(element).find(".animated"); eleAnimate.css({"animation-name":"none","-webkit-animation":"none"});//移除全部动效 $(element).waypoint(function(direction){ if(direction=="up"){ eleAnimate.css({"animation-name":"none","-webkit-animation":"none"}); }else{ eleAnimate.css({"animation-name":"","-webkit-animation":""}); } },{ offset:"70%" }); }); }

jquery验证手机号码、邮箱格式是否正确示例代码

2017-05-02 jquery

2031 0

jquery验证手机号码、邮箱格式是否正确示例代码本文为大家介绍下使用jquery验证邮箱、验证手机号码，具体实现思路及代码如下，感兴趣的朋友可以学习下代码如下://jquery验证邮箱 functioncheckSubmitEmail(){ if($("#email").val()==""){ //$("#confirmMsg").html("邮箱地址不能为空！"); alert("邮箱不能为空!") $("#email").focus(); returnfalse; } if(!$("#email").val().match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)){ alert("邮箱格式不正确"); //$("#confirmMsg").html("邮箱格式不正确！请重新输入！"); $("#email").focus(); returnfalse; } returntrue; } //jquery验证手机号码 functioncheckSubmitMobil(){ if($("#mobile").val()==""){ alert("手机号码不能为空！"); //$("#moileMsg").html("手机号码不能为空！"); $("#mobile").focus(); returnfalse; } if(!$("#mobile").val().match(/^(((13[0-9]{1})|159|153)+\d{8})$/)){ alert("手机号码格式不正确！"); //$("#moileMsg").html("手机号码格式不正确！请重新输入！"); $("#mobile").focus(); returnfalse; } returntrue; }

利用JavaScript实现图片上传预览

2017-05-08 jquery

437 0

html代码：头像添加重置 js代码： //下面用于图片上传预览功能 functionsetImagePreview(avalue){ //input vardocObj=document.getElementById("doc"); //img varimgObjPreview=document.getElementById("preview"); //div vardivs=document.getElementById("localImag"); if(docObj.files&&docObj.files[0]){ //火狐下，直接设img属性 imgObjPreview.style.display='block'; imgObjPreview.style.width='100px'; imgObjPreview.style.height='100px'; //imgObjPreview.src=docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式 imgObjPreview.src=window.URL.createObjectURL(docObj.files[0]); }else{ //IE下，使用滤镜 docObj.select(); varimgSrc=document.selection.createRange().text; varlocalImagId=document.getElementById("localImag"); //必须设置初始大小 localImagId.style.width="100px"; localImagId.style.height="100px"; //图片异常的捕捉，防止用户修改后缀来伪造图片 try{ localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imgSrc; }catch(e){ alert("您上传的图片格式不正确，请重新选择!"); returnfalse; } imgObjPreview.style.display='none'; document.selection.empty(); } returntrue; } 效果预览：

js生成随机数

2017-06-08 jquery

497 0

js随机数的几个用法varchars=['0','1','2','3','4','5','6','7','8','9','A','B','C', 'D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; functiongenerateMixed(n){ varres=""; for(vari=0;i

js获取系统当前时间

2017-07-02 jquery

490 0

一、简洁版1. varoDate=newDate();//实例一个时间对象； oDate.getFullYear();//获取系统的年； oDate.getMonth()+1;//获取系统月份，由于月份是从0开始计算，所以要加1 oDate.getDate();//获取系统日， oDate.getHours();//获取系统时， oDate.getMinutes();//分 oDate.getSeconds();//秒 2.document.write(oDate);效果图：二、动态显示时间1、 functionshowTime(){ varnow=newDate(); varnowTime=now.toLocaleString(); vardate=nowTime.substring(0,10);//截取日期 vartime=nowTime.substring(10,20);//截取时间 varweek=now.getDay();//星期 varhour=now.getHours();//小时 //判断星期几 varweeks=["日","一","二","三","四","五","六"]; vargetWeek="星期"+weeks[week]; varsc; //判断是AMorPM if(hour>=0&&hour5&&hour7&&hour11&&hour13&&hour18&&hour

js合并两个数组生成合并后的key：value数组方法

前端使用JsBarcode生成条形码

JavaScript 获取当前网页header头部信息

JS动态获取图片分辨率宽高大小

jquery数组去重

sessionStorage的使用

radio，CheckBox选中状态，判断是否选中，根据值设置radio选中

JS实现Base64加密解密

jQuery实现购物车物品数量的加减

jQuery根据屏幕下拉到一定高度显示返回顶部按钮

jquery 实现类似淘宝换一换功能

jquery.cookie.js实现记住手机号功能

JS判断页面加载是否完成

js随机数组，随机显示3个不重复数字

js滑动指定特效

jquery验证手机号码、邮箱格式是否正确示例代码

利用JavaScript实现图片上传预览

js生成随机数

js获取系统当前时间

博主信息

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

js合并两个数组生成合并后的key：value数组方法

前端使用JsBarcode生成条形码

JavaScript 获取当前网页header头部信息

JS动态获取图片分辨率宽高大小

jquery数组去重

sessionStorage的使用

radio，CheckBox选中状态，判断是否选中，根据值设置radio选中

JS实现Base64加密解密

jQuery实现购物车物品数量的加减

jQuery根据屏幕下拉到一定高度显示返回顶部按钮

jquery 实现类似淘宝换一换功能

jquery.cookie.js实现记住手机号功能

JS判断页面加载是否完成

js随机数组，随机显示3个不重复数字

js滑动指定特效

jquery验证手机号码、邮箱格式是否正确示例代码

利用JavaScript实现图片上传预览

js生成随机数

js获取系统当前时间

博主信息

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录