jQuery,jQuery系列使用问题

js实现红包雨案例，如何使用js实现红包雨

2020-10-12

快到双11了，每到双11购物节，可以看到浏览器有红包雨特效，以下是一个简单实现红包雨特效的方法，供大家参考。效果演示：代码实现说明：附件demo下载：https://github.com/jyblogs/hongbao1、前端html代码<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <title>红包雨</title> <link;rel="stylesheet";href="css/style.css"> <script;src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script;src="js/hb.js"></script> </head> <body> <div;id='petalbox'></div> </body> </html>2、js代码$(function(){ ;;;;;;;;var;NUMBER_OF_LEAVES;=;50; ;;;;;;;;/* ;;;;;;;;;Called;when;the;"Falling;Leaves";page;is;completely;loaded. ;;;;;;;;;*/ ;;;;;;;;function;init();{ ;;;;;;;;;;;;/*;Get;a;reference;to;the;element;that;will;contain;the;leaves;*/ ;;;;;;;;;;;;var;container;=;document.getElementById('petalbox'); ;;;;;;;;;;;;/*;Fill;the;empty;container;with;new;leaves;*/ ;;;;;;;;;;;;try;{ ;;;;;;;;;;;;;;;;for;(var;i;=;0; ;;;;;;;;;;;;;;;;;;;;;i;<;NUMBER_OF_LEAVES; ;;;;;;;;;;;;;;;;;;;;;i++);{ ;;;;;;;;;;;;;;;;;;;;container.appendChild(createALeaf()); ;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;} ;;;;;;;;;;;;catch(e);{ ;;;;;;;;;;;;} ;;;;;;;;} ;;;;;;;;/* ;;;;;;;;;Receives;the;lowest;and;highest;values;of;a;range;and ;;;;;;;;;returns;a;random;integer;that;falls;within;that;range. ;;;;;;;;;*/ ;;;;;;;;function;randomInteger(low,;high);{ ;;;;;;;;;;;;return;low;+;Math.floor(Math.random();*;(high;-;low)); ;;;;;;;;} ;;;;;;;;/* ;;;;;;;;;Receives;the;lowest;and;highest;values;of;a;range;and ;;;;;;;;;returns;a;random;float;that;falls;within;that;range. ;;;;;;;;;*/ ;;;;;;;;function;randomFloat(low,;high);{ ;;;;;;;;;;;;return;low;+;Math.random();*;(high;-;low); ;;;;;;;;} ;;;;;;;;/* ;;;;;;;;;Receives;a;number;and;returns;its;CSS;pixel;value. ;;;;;;;;;*/ ;;;;;;;;function;pixelValue(value);{ ;;;;;;;;;;;;return;value;+;'%'; ;;;;;;;;} ;;;;;;;;/* ;;;;;;;;;Returns;a;duration;value;for;the;falling;animation. ;;;;;;;;;*/ ;;;;;;;;function;durationValue(value);{ ;;;;;;;;;;;;return;value;+;'s'; ;;;;;;;;} ;;;;;;;;/* ;;;;;;;;;Uses;an;img;element;to;create;each;leaf.;"Leaves.css";implements;two;spin ;;;;;;;;;animations;for;the;leaves:;clockwiseSpin;and;counterclockwiseSpinAndFlip.;This ;;;;;;;;;function;determines;which;of;these;spin;animations;should;be;applied;to;each;leaf. ;;;;;;;;;*/ ;;;;;;;;function;createALeaf();{ ;;;;;;;;;;;;/*;Start;by;creating;a;wrapper;div,;and;an;empty;img;element;*/ ;;;;;;;;;;;;var;leafDiv;=;document.createElement('div'); ;;;;;;;;;;;;var;image;=;document.createElement('img'); ;;;;;;;;;;;;/*;Randomly;choose;a;leaf;image;and;assign;it;to;the;newly;created;element;*/ ;;;;;;;;;;;;image.src;='images/petal'+;randomInteger(1,;10);+;'.png'; ;;;;;;;;;;;;/*;Position;the;leaf;at;a;random;location;along;the;screen;*/ ;;;;;;;;;;;;leafDiv.style.top;=;pixelValue(randomInteger(0,;10)); ;;;;;;;;;;;;leafDiv.style.left;=;pixelValue(randomInteger(70,;30)); ;;;;;;;;;;;;/*;Randomly;choose;a;spin;animation;*/ ;;;;;;;;;;;;var;spinAnimationName;=;(Math.random();<;0.5);?;'.':'counterclockwiseSpinAndFlip';;;;;;;;;/*;Set;the;-webkit-animation-name;property;with;these;values;*/ ;;;;;;;;;;;; ;;;;;;;;;;;;//;随机动作，向左下，向下或向右下 ;;;;;;;;;;;;var;dropList;=;['drop-left',;'drop',;;'drop-right']; ;;;;;;;;;;;;var;dropName;=;dropList[randomInteger(0,;dropList.length)]; ;;;;;;;;;;;; ;;;;;;;;;;;;leafDiv.style.webkitAnimationName;='fade,;';+;dropName; ;;;;;;;;;;;;leafDiv.style.animationName;='fade,;';+;dropName; ;;;;;;;;;;;;image.style.webkitAnimationName;=;spinAnimationName; ;;;;;;;;;;;;image.style.animationName;=;spinAnimationName; ;;;;;;;;;;;;/*;随机下落时间;*/ ;;;;;;;;;;;;var;fadeAndDropDuration;=;durationValue(randomFloat(2.2,;8.2)); ;;;;;;;;;;;;/*;随机旋转时间;*/ ;;;;;;;;;;;;var;spinDuration;=;durationValue(randomFloat(3,;4)); ;;;;;;;;;;;;leafDiv.style.webkitAnimationDuration;=;fadeAndDropDuration;+;',;';+;fadeAndDropDuration; ;;;;;;;;;;;;leafDiv.style.animationDuration;=;fadeAndDropDuration;+;',;';+;fadeAndDropDuration; ;;;;;;;;;;;;//;随机delay时间 ;;;;;;;;;;;;var;leafDelay;=;durationValue(randomFloat(0,;2)); ;;;;;;;;;;;;leafDiv.style.webkitAnimationDelay;=;leafDelay;+;',;';+;leafDelay; ;;;;;;;;;;;;leafDiv.style.animationDelay;=;leafDelay;+;',;';+;leafDelay; ;;;;;;;;;;;;image.style.webkitAnimationDuration;=;spinDuration; ;;;;;;;;;;;;image.style.animationDuration;=;spinDuration; ;;;;;;;;;;;;leafDiv.appendChild(image); ;;;;;;;;;;;;return;leafDiv; ;;;;;;;;} ;;;;;;;; ;;;;var;timeout;=;setTimeout(function;();{ ;;;;;;;;init(); ;;;;},1000) })3、css代码#petalbox;{ ;;;;position:;fixed; ;;;;top:;-100px; ;;;;left:;0; ;;;;width:;100%; ;;;;z-index:;100; ;;;;/*background-color:;#ccc;*/ } #petalbox;>;div;{ ;;;;position:;absolute; ;;;;-webkit-animation-iteration-count:;1,;1; ;;;;-webkit-animation-direction:;normal,;normal; ;;;;-webkit-animation-timing-function:;linear,;ease-in; ;;;;-webkit-backface-visibility:;hidden; ;;;;animation-iteration-count:;1,;1; ;;;;animation-direction:;normal,;normal; ;;;;animation-timing-function:;linear,;ease-in; ;;;;backface-visibility:;hidden; } #petalbox;>;div;>;img;{ ;;;;position:;absolute; ;;;;-webkit-animation-iteration-count:;infinite; ;;;;-webkit-animation-direction:;alternate; ;;;;-webkit-animation-timing-function:;linear; ;;;;-webkit-backface-visibility:;hidden; ;;;;animation-iteration-count:;infinite; ;;;;animation-direction:;alternate; ;;;;animation-timing-function:;linear; ;;;;backface-visibility:;hidden; } @-webkit-keyframes;fade;{ ;;;;0%,;90%;{ ;;;;;;;;opacity:;1; ;;;;} ;;;;100%;{ ;;;;;;;;opacity:;0; ;;;;} } @keyframes;fade;{ ;;;;0%,;90%;{ ;;;;;;;;opacity:;1; ;;;;} ;;;;100%;{ ;;;;;;;;opacity:;0; ;;;;} } @-webkit-keyframes;drop;{ ;;;;0%;{ ;;;;;;;;-webkit-transform:;translate3d(0,;0,;0); ;;;;} ;;;;100%;{ ;;;;;;;;-webkit-transform:;translate3d(0,;1100px,;0); ;;;;} } @keyframes;drop;{ ;;;;0%;{ ;;;;;;;;transform:;translate3d(0,;0,;0); ;;;;} ;;;;100%;{ ;;;;;;;;transform:;translate3d(0,;1100px,;0); ;;;;} } @-webkit-keyframes;drop-left;{ ;;;;0%;{ ;;;;;;;;-webkit-transform:;translate3d(0,;0,;0); ;;;;} ;;;;100%;{ ;;;;;;;;-webkit-transform:;translate3d(-500px,;1100px,;0); ;;;;} } @keyframes;drop-left;{ ;;;;0%;{ ;;;;;;;;transform:;translate3d(0,;0,;0); ;;;;} ;;;;100%;{ ;;;;;;;;transform:;translate3d(-500px,;1100px,;0); ;;;;} } @-webkit-keyframes;drop-right;{ ;;;;0%;{ ;;;;;;;;-webkit-transform:;translate3d(0,;0,;0); ;;;;} ;;;;100%;{ ;;;;;;;;-webkit-transform:;translate3d(500px,;1100px,;0); ;;;;} } @keyframes;drop-right;{ ;;;;0%;{ ;;;;;;;;transform:;translate3d(0,;0,;0); ;;;;} ;;;;100%;{ ;;;;;;;;transform:;translate3d(500px,;1100px,;0); ;;;;} } @-webkit-keyframes;clockwiseSpin;{ ;;;;0%;{ ;;;;;;;;-webkit-transform:;none; ;;;;} ;;;;100%;{ ;;;;;;;;-webkit-transform:;rotate(480deg); ;;;;} } @keyframes;clockwiseSpin;{ ;;;;0%;{ ;;;;;;;;transform:;none; ;;;;} ;;;;100%;{ ;;;;;;;;transform:;rotate(480deg); ;;;;} } @-webkit-keyframes;counterclockwiseSpinAndFlip;{ ;;;;0%;{ ;;;;;;;;-webkit-transform:;none; ;;;;} ;;;;100%;{ ;;;;;;;;-webkit-transform:;rotate(-480deg); ;;;;} } } @keyframes;counterclockwiseSpinAndFlip;{ ;;;;0%;{ ;;;;;;;;transform:;none; ;;;;} ;;;;100%;{ ;;;;;;;;transform:;rotate(-480deg); ;;;;} } /*animation*/ .timenav;.time_list;.time1;{ ;;;;-webkit-animation:;lantern_shake1;6s;linear;both; ;;;;-webkit-transform-origin:;center;top; ;;;;animation:;lantern_shake1;6s;linear;both; ;;;;transform-origin:;center;top; } @-webkit-keyframes;lantern_shake1;{ ;;;;0%,;50%;{ ;;;;;;;;-webkit-transform:;none; ;;;;} ;;;;25%;{ ;;;;;;;;-webkit-transform:;rotate(-4deg); ;;;;} ;;;;75%;{ ;;;;;;;;-webkit-transform:;rotate(4deg); ;;;;} } @keyframes;lantern_shake1;{ ;;;;0%,;50%;{ ;;;;;;;;transform:;none; ;;;;} ;;;;25%;{ ;;;;;;;;transform:;rotate(-4deg); ;;;;} ;;;;75%;{ ;;;;;;;;transform:;rotate(4deg); ;;;;} } .timenav;.time_list;.time2;{ ;;;;-webkit-animation:;lantern_shake2;6s;linear;both; ;;;;-webkit-transform-origin:;center;top; ;;;;-webkit-backface-visibility:;hidden; ;;;;animation:;lantern_shake2;6s;linear;both; ;;;;transform-origin:;center;top; } @-webkit-keyframes;lantern_shake2;{ ;;;;0%,;50%;{ ;;;;;;;;-webkit-transform:;none; ;;;;} ;;;;25%;{ ;;;;;;;;-webkit-transform:;rotate(-6deg);translate3d(5px,;0,;0); ;;;;} ;;;;75%;{ ;;;;;;;;-webkit-transform:;rotate(6deg);translate3d(-5px,;0,;0); ;;;;} } @keyframes;lantern_shake2;{ ;;;;0%,;50%;{ ;;;;;;;;transform:;none; ;;;;} ;;;;25%;{ ;;;;;;;;transform:;rotate(-6deg);translate3d(5px,;0,;0); ;;;;} ;;;;75%;{ ;;;;;;;;transform:;rotate(6deg);translate3d(-5px,;0,;0); ;;;;} } .timenav;.time_list;.time3;{ ;;;;-webkit-animation:;lantern_shake3;6s;linear;both; ;;;;-webkit-transform-origin:;center;top; ;;;;-webkit-backface-visibility:;hidden; ;;;;animation:;lantern_shake3;6s;linear;both; ;;;;transform-origin:;center;top; } @-webkit-keyframes;lantern_shake3;{ ;;;;0%,;50%;{ ;;;;;;;;-webkit-transform:;none; ;;;;} ;;;;25%;{ ;;;;;;;;-webkit-transform:;rotate(-8deg);translate3d(14px,;0,;0); ;;;;} ;;;;75%;{ ;;;;;;;;-webkit-transform:;rotate(8deg);translate3d(-14px,;0,;0); ;;;;} } @keyframes;lantern_shake3;{ ;;;;0%,;50%;{ ;;;;;;;;transform:;none; ;;;;} ;;;;25%;{ ;;;;;;;;transform:;rotate(-8deg);translate3d(14px,;0,;0); ;;;;} ;;;;75%;{ ;;;;;;;;transform:;rotate(8deg);translate3d(-14px,;0,;0); ;;;;} } .timenav;.time_list:hover;a;{ ;;;;-webkit-animation:;none; ;;;;animation:;none; } .banner_tit,;.banner_subtit;{ ;;;;-webkit-animation:;bounceInDown;0.8s;both; ;;;;animation:;bounceInDown;0.8s;both; } .banner_subtit;{ ;;;;-webkit-animation-delay:;0.4s; ;;;;animation-delay:;0.4s; } @-webkit-keyframes;bounceInDown;{ ;;;;from,;60%,;75%,;90%,;to;{ ;;;;;;;;-webkit-animation-timing-function:;cubic-bezier(0.215,;0.610,;0.355,;1.000); ;;;;} ;;;;0%;{ ;;;;;;;;opacity:;0; ;;;;;;;;-webkit-transform:;translate3d(0,;-3000px,;0); ;;;;} ;;;;60%;{ ;;;;;;;;-webkit-transform:;translate3d(0,;25px,;0); ;;;;} ;;;;75%;{ ;;;;;;;;-webkit-transform:;translate3d(0,;-10px,;0); ;;;;} ;;;;90%;{ ;;;;;;;;-webkit-transform:;translate3d(0,;5px,;0); ;;;;} ;;;;to;{ ;;;;;;;;-webkit-transform:;none; ;;;;;;;;opacity:;1; ;;;;} } @keyframes;bounceInDown;{ ;;;;from,;60%,;75%,;90%,;to;{ ;;;;;;;;animation-timing-function:;cubic-bezier(0.215,;0.610,;0.355,;1.000); ;;;;} ;;;;0%;{ ;;;;;;;;opacity:;0; ;;;;;;;;transform:;translate3d(0,;-3000px,;0); ;;;;} ;;;;60%;{ ;;;;;;;;transform:;translate3d(0,;25px,;0); ;;;;} ;;;;75%;{ ;;;;;;;;transform:;translate3d(0,;-10px,;0); ;;;;} ;;;;90%;{ ;;;;;;;;transform:;translate3d(0,;5px,;0); ;;;;} ;;;;to;{ ;;;;;;;;transform:;none; ;;;;;;;;opacity:;1; ;;;;} } .banner_time;{ ;;;;-webkit-animation:;fadeIn;1s;1.2s;both; ;;;;animation:;fadeIn;1s;1.2s;both; } @-webkit-keyframes;fadeIn;{ ;;;;from;{ ;;;;;;;;opacity:;0; ;;;;} ;;;;to;{ ;;;;;;;;opacity:;1; ;;;;} } @keyframes;fadeIn;{ ;;;;from;{ ;;;;;;;;opacity:;0; ;;;;} ;;;;to;{ ;;;;;;;;opacity:;1; ;;;;} } .fireworks;i;{ ;;;;-webkit-animation:;fireworkani;1.6s;.2s;ease;both; ;;;;-webkit-animation-iteration-count:;2; ;;;;animation:;fireworkani;1.6s;.2s;ease;both; ;;;;animation-iteration-count:;2; } .fireworks;.f2;{ ;;;;-webkit-animation-delay:;.6s; ;;;;animation-delay:;.6s; } .fireworks;.f3;{ ;;;;-webkit-animation-delay:;.6s; ;;;;animation-delay:;.6s; } .fireworks;.f4;{ ;;;;-webkit-animation-delay:;.8s; ;;;;animation-delay:;.8s; } @-webkit-keyframes;fireworkani;{ ;;;;0%,;9%;{ ;;;;;;;;-webkit-transform:;scale(.1); ;;;;;;;;opacity:;0; ;;;;} ;;;;10%;{ ;;;;;;;;-webkit-transform:;scale(.1); ;;;;;;;;opacity:;1; ;;;;} ;;;;95%;{ ;;;;;;;;-webkit-transform:;scale(1.5); ;;;;;;;;opacity:;.1; ;;;;} ;;;;100%;{ ;;;;;;;;-webkit-transform:;scale(1.5); ;;;;;;;;opacity:;0; ;;;;} } @keyframes;fireworkani;{ ;;;;0%,;9%;{ ;;;;;;;;transform:;scale(.1); ;;;;;;;;opacity:;0; ;;;;} ;;;;10%;{ ;;;;;;;;transform:;scale(.1); ;;;;;;;;opacity:;1; ;;;;} ;;;;95%;{ ;;;;;;;;transform:;scale(1.5); ;;;;;;;;opacity:;.1; ;;;;} ;;;;100%;{ ;;;;;;;;transform:;scale(1.5); ;;;;;;;;opacity:;0; ;;;;} } .main_before,;.main_after,;.main_cont;{ ;;;;-webkit-animation:;contfadein;1s;.5s;both; ;;;;animation:;contfadein;1s;.5s;both; } @-webkit-keyframes;contfadein;{ ;;;;0%;{ ;;;;;;;;-webkit-transform:;translate3d(0,;100px,;0); ;;;;;;;;opacity:;0; ;;;;} ;;;;100%;{ ;;;;;;;;-webkit-transform:;none; ;;;;;;;;opacity:;1; ;;;;} } @keyframes;contfadein;{ ;;;;0%;{ ;;;;;;;;transform:;translate3d(0,;100px,;0); ;;;;;;;;opacity:;0; ;;;;} ;;;;100%;{ ;;;;;;;;transform:;none; ;;;;;;;;opacity:;1; ;;;;} } /*media*/ /*.small_window;.timenav;{ ;;;;left:;20px; ;;;;margin-left:;0; }*/以上是个简单案例，点击后展示结果可以结合实际情况进行更改。

html+js实现雪花飘落特效效果的两种方法

2020-10-11

835 0

我们经常可以看到有些网站有雪花飘落的功能，这是如何做的呢？实际上用到了HTML、js和canvas，以下是个简单的例子供大家参考。第一种效果展示：实现代码1、前端HTML代码：<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <title>Document</title> <script;src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> </head> <body> ;;;<style> ;;;;;;;;.snow{ ;;;;;;;;;;;;width:;100%; ;;;;;;;;;;;;height:;100vh; ;;;;;;;;;;;;background:;#000; ;;;;;;;;} ;;;;</style> ;;;;<div></div> <script;src="snow.js"></script> </body> </html>2、snow.js文件代码"use;strict"; (function;();{ //;SnowVolume;will;change;the;density;of;the;snowflakes var;SnowVolume;=;800; var;elem;=;document.querySelector('.snow'); var;canvas;=;document.createElement('canvas'); var;ctx;=;canvas.getContext('2d'); var;width;=;elem.clientWidth; var;height;=;elem.clientHeight; var;i;=;0; var;active;=;false; function;onResize();{ width;=;elem.clientWidth; height;=;elem.clientHeight; canvas.width;=;width; canvas.height;=;height; ctx.fillStyle;=;'#FFF'; var;wasActive;=;active; active;=;width;>;700; if;(!wasActive;&&;active) requestAnimFrame(update); } var;Snowflake;=;function;();{ this.x;=;0; this.y;=;0; this.vy;=;0; this.vx;=;0; this.r;=;0; this.reset(); } Snowflake.prototype.reset;=;function();{ this.x;=;Math.random();*;width; this.y;=;Math.random();*;-height; this.vy;=;1;+;Math.random();*;3; this.vx;=;0.5;-;Math.random(); this.r;=;1;+;Math.random();*;2; this.o;=;0.5;+;Math.random();*;0.5; } canvas.style.position;=;'absolute'; canvas.style.left;=;canvas.style.top;=;'0'; var;snowflakes;=;[],;snowflake; for;(i;=;0;;i;<;SnowVolume;;i++);{ snowflake;=;new;Snowflake(); snowflake.reset(); snowflakes.push(snowflake); } function;update();{ ctx.clearRect(0,;0,;width,;height); if;(!active) return; for;(i;=;0;;i;<;SnowVolume;;i++);{ snowflake;=;snowflakes[i]; snowflake.y;+=;snowflake.vy; snowflake.x;+=;snowflake.vx; ctx.globalAlpha;=;snowflake.o; ctx.beginPath(); ctx.arc(snowflake.x,;snowflake.y,;snowflake.r,;0,;Math.PI;*;2,;false); ctx.closePath(); ctx.fill(); if;(snowflake.y;>;height);{ snowflake.reset(); } } requestAnimFrame(update); } //;shim;layer;with;setTimeout;fallback window.requestAnimFrame;=;(function(){ return;;window.requestAnimationFrame;;;;;;;|| window.webkitRequestAnimationFrame;|| window.mozRequestAnimationFrame;;;;|| function(;callback;){ window.setTimeout(callback,;5000;/;60); }; })(); onResize(); window.addEventListener('resize',;onResize,;false); elem.appendChild(canvas); })();第二种效果展示：代码实现1、前端代码<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <title>Document</title> <script;src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> </head> <body> ;;;<style> ;;;;;;;;body{ ;;;;;;;;;;;;width:;1000px; ;;;;;;;;;;;;height:;1000px; ;;;;;;;;;;;;background:;#000; ;;;;;;;;} ;;;;</style> </body> </html>2、JavaScript代码<script> ;;;;(function($){;; ;;;;;;;;$.fn.snow;=;function(options){;; ;;;;;;;;var;$flake;=;$('<div/>').css({'position':;'absolute','z-index':'9999',;'top':;'-50px'}).html('❄'),;; ;;;;;;;;documentHeight;;=;$(document).height(), ;;;;;;;;documentWidth;;;=;$(document).width(),;; ;;;;;;;;defaults;=;{;; ;;;;;;;;;;;;minSize;;;;;:;10,;; ;;;;;;;;;;;;maxSize;;;;;:;20,;; ;;;;;;;;;;;;newOn;;;;;;;:;1000,;; ;;;;;;;;;;;;flakeColor;;:;"#AFDAEF";/*;雪花颜色;*/ ;;;;;;;;}, ;;;;;;;;options;=;$.extend({},;defaults,;options); ;;;;;;;;endPositionTop;=;documentHeight;-;documentHeight;*;0.3; ;;;;;;;;var;interval=;setInterval(;function(){ ;;;;;;;;var;startPositionLeft;=;Math.random();*;documentWidth;-;100,;; ;;;;;;;;startOpacity;=;0.5;+;Math.random(),;; ;;;;;;;;sizeFlake;=;options.minSize;+;Math.random();*;options.maxSize,;; ;;;;;;;;endPositionLeft;=;startPositionLeft;-;500;+;Math.random();*;500,;; ;;;;;;;;durationFall;=;documentHeight;*;10;+;Math.random();*;5000;;; ;;;;;;;;$flake.clone().appendTo('body').css({;; ;;;;;;;;;;;;left:;startPositionLeft,;; ;;;;;;;;;;;;opacity:;startOpacity, ;;;;;;;;;;;;'font-size':;sizeFlake, ;;;;;;;;;;;;color:;options.flakeColor;; ;;;;;;;;}).animate({;; ;;;;;;;;;;;;top:;endPositionTop,;; ;;;;;;;;;;;;left:;endPositionLeft,;; ;;;;;;;;;;;;opacity:;0.2;; ;;;;;;;;},durationFall,'linear',function(){;; ;;;;;;;;;;;;$(this).remove() ;;;;;;;;});;; ;;;;;;;;},;options.newOn);;; ;;;;;;;;};;; ;;;;})(jQuery);;; ;;;;$(function(){;; ;;;;;;;;$.fn.snow({ ;;;;;;;;;;;;minSize:;10,;/*;定义雪花最小尺寸;*/;; ;;;;;;;;;;;;maxSize:;45,/*;定义雪花最大尺寸;*/;; ;;;;;;;;;;;;newOn:;3000;;/*;定义密集程度，数字越小越密集，cup使用率越高,建议最高设置成3000;*/ ;;;;;;;;});;; ;;;;}); </script>

js实现手机号码加空格或者加空格

2020-10-02

672 0

我们平时看到一些输入手机号的会出现空格或者-号的，这时怎么实现的呢？我们通过以下的方式对其进行格式化，实现3-4-4的形式。1、手机号码加空格符function;Mobile2(obj) { ;;;;;;;;var;value;=;obj; ;;;;;;;;value;=;value.replace(/\s*/g,;""); ;;;;;;;;var;result;=;[]; ;;;;;;;;for(var;i;=;0;;i;<;value.length;;i++) ;;;;;;;;{ ;;;;;;;;;;;;if;(i==3||i==7) ;;;;;;;;;;;;{ ;;;;;;;;;;;;;;;;result.push(";";+;value.charAt(i)); ;;;;;;;;;;;;} ;;;;;;;;;;;;else ;;;;;;;;;;;;{ ;;;;;;;;;;;;;;;;result.push(value.charAt(i)); ;;;;;;;;;;;;} ;;;;;;;;} ;;;;;;;;obj;=;result.join(""); ;;;;;;;;return;obj; }2、手机号码加-号function;Mobile2(obj) { ;;;;;;;;var;value;=;obj; ;;;;;;;;value;=;value.replace(/\s*/g,;""); ;;;;;;;;var;result;=;[]; ;;;;;;;;for(var;i;=;0;;i;<;value.length;;i++) ;;;;;;;;{ ;;;;;;;;;;;;if;(i==3||i==7) ;;;;;;;;;;;;{ ;;;;;;;;;;;;;;;;result.push("-";+;value.charAt(i)); ;;;;;;;;;;;;} ;;;;;;;;;;;;else ;;;;;;;;;;;;{ ;;;;;;;;;;;;;;;;result.push(value.charAt(i)); ;;;;;;;;;;;;} ;;;;;;;;} ;;;;;;;;obj;=;result.join(""); ;;;;;;;;return;obj; }

jq获取li列表第几个元素值,jq获取列表元素方法

2020-09-22

590 0

假设我们有段html代码，让我我们需要获取其中的元素<ul;class="list"> ;;;;<li>列表一</li> ;;;;<li>列表二</li> ;;;;<li>列表三</li> ;;;;<li>列表四</li> ;;;;<li>列表五</li> </ul> <button;type="button";class="btn">按钮</button>jquery获取其中元素方法，需要用到eq()方法，元素从0开始1、点击按钮获取值：$('.btn').click(function(){ ;;;;var;a;=;$('.list;li').eq(0).text(); ;;;;alert(a); })2、点击列表其中一个获取值，我们来获取第二个的值$('.list;li').eq(1).click(function(){ var;a;=;;$(this).text() alert(a) });

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

2020-04-23

1206 0

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

1208 0

前端使用JsBarcode生成条形码注：需引入 jsbarcode 插件JsBarcode安装:npm;install;jsbarcode;--save npm;install;jsbarcodeHTML 生成条形码代码<!DOCTYPE;html> <html> ;<head>; ;;<meta;charset="utf-8";/>; ;;<meta;name="viewport";content="width=device-width,;initial-scale=1,maximum-scale=1,;user-scalable=no";/>; ;;<title></title>; ;;<script;type="text/javascript";src="js/jquery.min.js"></script>; ;;<script;type="text/javascript";src="js/JsBarcode.all.js"></script>; ;</head>; ;<body>; ;;<svg;id="svgcode"></svg>; ;;; ;;<canvas;id="canvascode"></canvas>; ;;; ;;<img;id="imgcode";/>; ;;<script>;; ;;;;;;;;$("#svgcode").JsBarcode('我是条形码'); ;;</script>; ;</body> </html>最终生成的条形码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

1385 0

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

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

2020-03-07

1480 0

JS动态获取图片分辨率宽高大小;<p;class="ddkkkkk_{{$item->id}}"></p> <script> function;getpic(url,obj){ var;img;=;new;Image(); 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}}") </script>

jquery数组去重

2020-01-02

954 0

sessionStorage的使用

2019-11-03

1244 0

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。使用案例：html code:<div;class="modecer"> ;;;;<div;;class="colsebtn">关闭</div> </div>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

1674 0

radio，CheckBox选中状态，判断是否选中，根据值设置radio选中;<input;name="rbsex";id="man_radio";type="radio";;value="1";checked="checked";/><label>显示</label> ;<input;name="rbsex";id="woman_radio";type="radio";value="0";/>隐藏var;stop;=;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

1248 0

JavaScript实现Base64加密解密。Base64与其说是加密算法不如说是方便数据传输而生的数据转换手段。测试代码：<!DOCTYPE;html> <html> <head> ;;;;<title>test</title> ;;;;<meta;charset="utf-8"> ;;;;<script;type="text/javascript";src="js/base64.js"></script> ;;;;<style> ;;;;;;;;.resource_enc,;.resource_dec{ ;;;;;;;;;;;;width:;500px; ;;;;;;;;} ;;;;;;;;.p1,;.p2{ ;;;;;;;;;;;;min-height:;100px; ;;;;;;;;;;;;background-color:;#dcffe1; ;;;;;;;;} ;;;;</style> </head> <body> <input;type="text";class="resource_enc"><input;type="button";onclick="encoding()";value="编码"><br/> <p;class="p1"></p> <input;type="text";class="resource_dec"><input;type="button";onclick="decoding()";value="解码"><br/> <p;class="p2"></p> <script;type="text/javascript"> ;;;;var;base;=;new;Base64(); ;;;;function;encoding();{ ;;;;;;;;var;text;=;document.getElementsByClassName("resource_enc")[0].value; ;;;;;;;;document.getElementsByClassName("p1")[0].innerText;=;base.encode(text); ;;;;} ;;;;function;decoding();{ ;;;;;;;;var;text;=;document.getElementsByClassName("resource_dec")[0].value; ;;;;;;;;document.getElementsByClassName("p2")[0].innerText;=;base.decode(text); ;;;;} </script> </body> </html>Base64.jsfunction;Base64();{ ;;;;var;_keyStr;=;"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; ;;;;this.encode;=;function;(input);{ ;;;;;;;;var;output;=;""; ;;;;;;;;var;chr1,;chr2,;chr3,;enc1,;enc2,;enc3,;enc4; ;;;;;;;;var;i;=;0; ;;;;;;;;input;=;utf8Encode(input); ;;;;;;;;while;(i;<;input.length);{ ;;;;;;;;;;;;chr1;=;input.charCodeAt(i++); ;;;;;;;;;;;;chr2;=;input.charCodeAt(i++); ;;;;;;;;;;;;chr3;=;input.charCodeAt(i++); ;;;;;;;;;;;;enc1;=;chr1;>>;2; ;;;;;;;;;;;;enc2;=;((chr1;&;3);<<;4);|;(chr2;>>;4); ;;;;;;;;;;;;enc3;=;((chr2;&;15);<<;2);|;(chr3;>>;6); ;;;;;;;;;;;;enc4;=;chr3;&;63; ;;;;;;;;;;;;if;(isNaN(chr2));{ ;;;;;;;;;;;;;;;;enc3;=;enc4;=;64; ;;;;;;;;;;;;};else;if;(isNaN(chr3));{ ;;;;;;;;;;;;;;;;enc4;=;64; ;;;;;;;;;;;;} ;;;;;;;;;;;;output;=;output;+ ;;;;;;;;;;;;;;;;_keyStr.charAt(enc1);+;_keyStr.charAt(enc2);+ ;;;;;;;;;;;;;;;;_keyStr.charAt(enc3);+;_keyStr.charAt(enc4); ;;;;;;;;} ;;;;;;;;return;output; ;;;;}; ;;;;this.decode;=;function;(input);{ ;;;;;;;;var;output;=;""; ;;;;;;;;var;chr1,;chr2,;chr3; ;;;;;;;;var;enc1,;enc2,;enc3,;enc4; ;;;;;;;;var;i;=;0; ;;;;;;;;input;=;input.replace(/[^A-Za-z0-9\+\/\=]/g,;""); ;;;;;;;;while;(i;<;input.length);{ ;;;;;;;;;;;;enc1;=;_keyStr.indexOf(input.charAt(i++)); ;;;;;;;;;;;;enc2;=;_keyStr.indexOf(input.charAt(i++)); ;;;;;;;;;;;;enc3;=;_keyStr.indexOf(input.charAt(i++)); ;;;;;;;;;;;;enc4;=;_keyStr.indexOf(input.charAt(i++)); ;;;;;;;;;;;;chr1;=;(enc1;<<;2);|;(enc2;>>;4); ;;;;;;;;;;;;chr2;=;((enc2;&;15);<<;4);|;(enc3;>>;2); ;;;;;;;;;;;;chr3;=;((enc3;&;3);<<;6);|;enc4; ;;;;;;;;;;;;output;=;output;+;String.fromCharCode(chr1); ;;;;;;;;;;;;if;(enc3;!==;64);{ ;;;;;;;;;;;;;;;;output;=;output;+;String.fromCharCode(chr2); ;;;;;;;;;;;;} ;;;;;;;;;;;;if;(enc4;!==;64);{ ;;;;;;;;;;;;;;;;output;=;output;+;String.fromCharCode(chr3); ;;;;;;;;;;;;} ;;;;;;;;} ;;;;;;;;output;=;utf8Decode(output); ;;;;;;;;return;output; ;;;;}; ;;;;utf8Encode;=;function;(string);{ ;;;;;;;;string;=;string.replace(/\r\n/g,"\n"); ;;;;;;;;var;utfText;=;""; ;;;;;;;;for;(var;n;=;0;;n;<;string.length;;n++);{ ;;;;;;;;;;;;var;c;=;string.charCodeAt(n); ;;;;;;;;;;;;if;(c;<;128);{ ;;;;;;;;;;;;;;;;utfText;+=;String.fromCharCode(c); ;;;;;;;;;;;;};else;if((c;>;127);&&;(c;<;2048));{ ;;;;;;;;;;;;;;;;utfText;+=;String.fromCharCode((c;>>;6);|;192); ;;;;;;;;;;;;;;;;utfText;+=;String.fromCharCode((c;&;63);|;128); ;;;;;;;;;;;;};else;{ ;;;;;;;;;;;;;;;;utfText;+=;String.fromCharCode((c;>>;12);|;224); ;;;;;;;;;;;;;;;;utfText;+=;String.fromCharCode(((c;>>;6);&;63);|;128); ;;;;;;;;;;;;;;;;utfText;+=;String.fromCharCode((c;&;63);|;128); ;;;;;;;;;;;;} ;;;;;;;;} ;;;;;;;;return;utfText; ;;;;}; ;;;;utf8Decode;=;function;(utfText);{ ;;;;;;;;var;string;=;""; ;;;;;;;;var;i;=;0; ;;;;;;;;var;c;=;0; ;;;;;;;;var;c1;=;0; ;;;;;;;;var;c2;=;0; ;;;;;;;;while;(;i;<;utfText.length;);{ ;;;;;;;;;;;;c;=;utfText.charCodeAt(i); ;;;;;;;;;;;;if;(c;<;128);{ ;;;;;;;;;;;;;;;;string;+=;String.fromCharCode(c); ;;;;;;;;;;;;;;;;i++; ;;;;;;;;;;;;};else;if((c;>;191);&&;(c;<;224));{ ;;;;;;;;;;;;;;;;c1;=;utfText.charCodeAt(i+1); ;;;;;;;;;;;;;;;;string;+=;String.fromCharCode(((c;&;31);<<;6);|;(c1;&;63)); ;;;;;;;;;;;;;;;;i;+=;2; ;;;;;;;;;;;;};else;{ ;;;;;;;;;;;;;;;;c1;=;utfText.charCodeAt(i+1); ;;;;;;;;;;;;;;;;c2;=;utfText.charCodeAt(i+2); ;;;;;;;;;;;;;;;;string;+=;String.fromCharCode(((c;&;15);<<;12);|;((c1;&;63);<<;6);|;(c2;&;63)); ;;;;;;;;;;;;;;;;i;+=;3; ;;;;;;;;;;;;} ;;;;;;;;} ;;;;;;;;return;string; ;;;;} }

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

2019-10-09

1107 0

实现购物车物品数量的加减，最小值为1，当最小值为1时再按减少，减少按钮不可编辑，当按增加数量时恢复减少按钮状态。这个除了加减功能外，也可以自动计算价格。<!DOCTYPE;html;PUBLIC;"-//W3C//DTD;XHTML;1.0;Transitional//EN";"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;;;; <head>;;;; <meta;http-equiv="Content-Type";content="text/html;;charset=utf-8";/>;;;; <title>jQuery实现购物车物品数量的加减</title>;;;; <script;type="text/javascript";src="https://www.tpxhm.com/public/static/tpl/index/foundation/js/jquery.js"></script>;;;; <script>;;;; $(function(){;;;; ;;;;var;t;=;$("#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();;;;; ;;;;});;;; ;;;;function;setTotal(){;;;; ;;;;;;;;$("#total").html((parseInt(t.val())*3.95).toFixed(2));;;;; ;;;;};;;; ;;;;setTotal();;;;; });;;; </script>;;;; </head>;;;; <body>;;;; <p>单价：1.23</p>;;;; <input;id="min";name="";type="button";value="-";/>;;;; <input;id="quantity";name="";type="text";value="1";/>;;;; <input;id="add";name="";type="button";value="+";/>;;;; <p>总价：<label;id="total"></label></p>;;;; </body>;;;; </html>

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

2019-09-30

1106 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); return;false; }) })

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

2019-08-29

1222 0

类似淘宝换一换功能在工作中我们经常会遇到，以下是一个简单的案例，仅供大家参考。实现效果图：实现代码：<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <title>换一换</title> <script;src="http://code.jquery.com/jquery-1.8.3.min.js"></script> </head> <body> <style> *{margin:0;padding:;0px;} .hsow{width:;400px;;height:;400px;;margin:;0;auto;;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:;0s;0.2s;} .news-list-v;li{;list-style:;none;;width:;133px;;height:;133px;;float:;left;;text-align:;center;} .news-list-v;li;a{;color:;#fff;list-style:;none;;font-size:;50px;;text-decoration:;none;;margin:0;auto;;line-height:;133px} .news-list-v;li:nth-of-type(odd){;;background-color:;#55cbc4;} .news-list-v;li: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;} </style> <div> <div> <ul;class="news-list-v;show"> <li><a;href="#";>1</a></li> <li><a;href="#";>2</a></li> <li><a;href="#";>3</a></li> <li><a;href="#";>4</a></li> <li><a;href="#";>5</a></li> <li><a;href="#";>6</a></li></ul> <ul> <li><a;href="#";>7</a></li> <li><a;href="#";>8</a></li> <li><a;href="#";>9</a></li> <li><a;href="#";>10</a></li> <li><a;href="#";>11</a></li> <li><a;href="#";>12</a></li> </ul> <ul> <li><a;href="#";>13</a></li> <li><a;href="#";>14</a></li> <li><a;href="#";>15</a></li> <li><a;href="#";>16</a></li> <li><a;href="#";>17</a></li> <li><a;href="#";>18</a></li> </ul> </div> <a> <span>换一换</span> </a> </div> <script;type="text/javascript"> //换一换 var;$newsLists;=;$('.news-sub').find('.news-list-v'); function;changeNews();{ 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(); }); </script> </body> </html>

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

2019-06-16

1633 0

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

JS判断页面加载是否完成

2019-06-13

1111 0

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

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

2019-01-18

1885 0

js随机数组，随机显示3个不重复数字案例：<!DOCTYPE;html>;;;; <html;lang="en">;;;; <head>;;;; <meta;charset="UTF-8">;;;; <title>Document</title>;;;; </head>;;;; <body>;;;; <script>;;;; //原数组;;;; var;arr;=;[0,1,2,3,4,5,6,7,8,9,10,11];;;;; //输出数组;;;; var;out;=;[];;;;; //输出个数;;;; var;num;=;3;;;;; while(out.length;<;num){;;;; var;temp;=;(Math.random()*arr.length);>>;0;;;;; out.push(arr.splice(temp,1));;;;; };;;; alert(out);;;;; </script>;;;; </body>;;;; </html>

js滑动指定特效

2019-01-10

1216 0

我们逛网页的时候有时会看到，鼠标滚动到指定位置就会加载动画，以下是一个方法，仅供大家参考。主要用了2个文件，jquery.waypoints.js和animate.min.css附件：jquery.waypoints.js.txtanimate.min.css.txt引入两个文件，在</body>前面加上以下js，还有在每个版块加上class="column"$(function(){ ;;reAnimate(); ;;;; }) ;; //;滑动指定特效 function;reAnimate(){ ;;var;_ele;=;$(".column"); ;;;;;;_ele.each(function(index,;element);{ ;;;;;;;;var;eleAnimate;=;$(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

2923 0

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

利用JavaScript实现图片上传预览

2017-05-08

1111 0

html代码：<div;class="col-xs-12"> ;;<div;class="col-xs-12"> ;;;; ;;;;<form;action="";method="post";class="form-horizontal";role="form";enctype="multipart/form-data";method="post"> ;;;;;;;;<div;class="form-group"> ;;;;;;;;;;;;<label;class="col-sm-3;control-label;no-padding-right";for="form-field-1"></label> ;;;;;;;;;;;;<div;class="col-sm-9";id="localImag"> ;;;;;;;;;;;;;;;;<img;class="editable;img-responsive;editable-click;editable-empty";id="preview";src="";style="display:;block;";/> ;;;;;;;;;;;;</div> ;;;;;;;;</div> ;;;;;;;;<div;class="form-group"> ;;;;;;;;;;;;<label;class="col-sm-3;control-label;no-padding-right";for="form-field-1">;头像;</label> ;;;;;;;;;;;;<div;class="col-sm-9"> ;;;;;;;;;;;;;;;;;<input;type="file";name="img";id="doc";multiple="multiple";onchange="javascript:setImagePreview();"> ;;;;;;;;;;;;</div> ;;;;;;;;</div> ;;;;;;;;<div;class="clearfix;form-actions"> ;;;;;;;;;;;;<div;class="col-md-offset-3;col-md-9"> ;;;;;;;;;;;;;;;;<button;class="btn;btn-info";type="submit"> ;;;;;;;;;;;;;;;;;;;;<i;class="icon-ok;bigger-110"></i> ;;;;;;;;;;;;;;;;;;;;添加 ;;;;;;;;;;;;;;;;</button> ;;;;;;;;;;;;;;;; ; ;  ;;;;;;;;;;;;;;;;<button;class="btn";type="reset"> ;;;;;;;;;;;;;;;;;;;;<i;class="icon-undo;bigger-110"></i> ;;;;;;;;;;;;;;;;;;;;重置 ;;;;;;;;;;;;;;;;</button> ;;;;;;;;;;;;</div> ;;;;;;;;</div> ;;;;</form> </div>js代码：<script;type="text/javascript"> ;;;;;;;;;;;;//下面用于图片上传预览功能 ;;;;;;;;;;;;function;setImagePreview(avalue);{ ;;;;;;;;;;;;//input ;;;;;;;;;;;;;;;;var;docObj;=;document.getElementById("doc"); //img ;;;;;;;;;;;;;;;;var;imgObjPreview;=;document.getElementById("preview"); ;;;;;;;;;;;;;;;;//div ;;;;;;;;;;;;;;;;var;divs;=;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(); ;;;;;;;;;;;;;;;;;;;;var;imgSrc;=;document.selection.createRange().text; ;;;;;;;;;;;;;;;;;;;;var;localImagId;=;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("您上传的图片格式不正确，请重新选择!"); ;;;;;;;;;;;;;;;;;;;;;;;;return;false; ;;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;;;;;;;imgObjPreview.style.display;=;'none'; ;;;;;;;;;;;;;;;;;;;;document.selection.empty(); ;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;;;return;true; ;;;;;;;;;;;;} </script>效果预览：

js生成随机数

2017-06-08

1172 0

js随机数的几个用法var;chars;=;['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']; function;generateMixed(n);{ ;;;;;var;res;=;""; ;;;;;for(var;i;=;0;;i;<;n;;;i;++);{ ;;;;;;;;;var;id;=;Math.ceil(Math.random()*35); ;;;;;;;;;res;+=;chars[id]; ;;;;;} ;;;;;return;res; } 1.Math.random();;结果为0-1间的一个随机数(包括0,不包括1); 2.Math.floor(num);;参数num为一个数值，函数结果为num的整数部分。; 3.Math.round(num);;参数num为一个数值，函数结果为num四舍五入后的整数。 Math：数学对象，提供对数据的数学计算。 Math.random();;返回0和1间(包括0,不包括1)的一个随机数。 Math.ceil(n);;返回大于等于n的最小整数。用Math.ceil(Math.random()*10);时，主要获取1到10的随机整数，取0的几率极小。 Math.round(n);;返回n四舍五入后整数的值。用Math.round(Math.random());可均衡获取0到1的随机整数。用Math.round(Math.random()*10);时，可基本均衡获取0到10的随机整数，其中获取最小值0和最大值10的几率少一半。 Math.floor(n);;返回小于等于n的最大整数。用Math.floor(Math.random()*10);时，可均衡获取0到9的随机整数。 ;;;//;11位随机数;;准考证号 var;rand;=;""; for(var;i;=;0;;i;<;11;;i++){ ;;;;var;r;=;Math.floor(Math.random();*;10); ;;;;rand;+=;r; } ;;;;var;r2;=;1+parseInt(Math.random()*100);//1-100的随机数---考场 var;r3;=;1+parseInt(Math.random()*30);//1-30的随机数---每个教室内不能超过30人