搜索到
786
篇与
的结果
-
-
js合并两个数组生成合并后的key：value数组方法 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}// ]
-
jq获取li列表第几个元素值,jq获取列表元素方法 假设我们有段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实现手机号码加空格或者加空格 我们平时看到一些输入手机号的会出现空格或者-号的，这时怎么实现的呢？我们通过以下的方式对其进行格式化，实现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; }
-
html+js实现雪花飘落特效效果的两种方法 我们经常可以看到有些网站有雪花飘落的功能，这是如何做的呢？实际上用到了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="https://www.tpxhm.com/fdetail/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>
