搜索到
718
篇与
的结果
-
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>
-
js实现红包雨案例，如何使用js实现红包雨 快到双11了，每到双11购物节，可以看到浏览器有红包雨特效，以下是一个简单实现红包雨特效的方法，供大家参考。效果演示：代码实现说明：附件demo下载：https://github.com/jyblogs/hongbao1、前端html代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>红包雨</title> <link rel="stylesheet" href="https://www.tpxhm.com/fdetail/css/style.css"> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.tpxhm.com/fdetail/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 ='https://www.tpxhm.com/fdetail/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; }*/以上是个简单案例，点击后展示结果可以结合实际情况进行更改。
-
-
