![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小练习
Zyl_CN
这个作者很懒,什么都没留下…
展开
-
倒计时
<body><div class="box"> <p>距离倒计时还有:</p> <span></span></div></body><script> window.onload=function () {原创 2018-05-29 11:29:34 · 284 阅读 · 0 评论 -
红包出来-晃动-回去-停顿-循环效果(JS和CSS两种)
纯JS版本:<style> *{ padding: 0; margin: 0; } body { width: 100%; height: 500px; background: #ccc; } ...原创 2018-10-26 09:00:44 · 2002 阅读 · 0 评论 -
js点击按钮复制文本
<style> input { width: 1px; height: 1px; opacity: 0; } div { width: 300px; height: 50px; border:...原创 2018-10-26 09:10:15 · 543 阅读 · 0 评论 -
拖拽上传
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding:转载 2018-11-01 09:33:40 · 155 阅读 · 0 评论 -
滚动加载更多
var winHei = $(window).height(); //页面可视区域高度 var lock=true; $(window).scroll(function() { var bodyHei = $('body').height(); //页面总高度 var scrollTop = $(window).scrollTop(); //滚动...原创 2018-11-06 18:40:28 · 258 阅读 · 0 评论 -
使用canvas画立体矩形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> canvas{ display: b原创 2018-11-07 18:36:36 · 1393 阅读 · 0 评论 -
视屏上传带进度条显示
// 上传视频的删除按钮 var stopAjax='' $('.typeVideoBox>p>a').on('click',function () { stopAjax.abort(); //停止ajax上传 })// 上传视频实时进度 $('.typeVideoBox>label>input[type=file]')....原创 2018-12-28 08:56:27 · 478 阅读 · 0 评论 -
使用formData上传并显示图片
本地显示图片浏览:$('#file').on('change',function () { var imgUrl=$(this).val(); var lookImgSrc=window.URL.createObjectURL(this.files[0]); var urlType=imgUrl.substring(imgUrl.lastInd...原创 2018-12-26 10:26:01 · 943 阅读 · 0 评论 -
input各种筛选
1.标签上直接替换方法:JS 控制不能输入特殊字符<input type="text"class="domain"onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')";this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')JS 控制文本框只能输入数字...转载 2019-01-16 10:11:14 · 808 阅读 · 0 评论 -
纯c3实现动态省略号
<style> .loading { font-family: simsun; } :root .loading { display: inline-block; width: 1.5em; vertical-align: bottom; overflow: hidden; } @-...原创 2019-04-04 10:26:24 · 413 阅读 · 0 评论 -
怎么在手机端是实现1px的边框
单边像素边.scale-1px { position: relative; border: none; } .scale-1px:after { content: ""; position: absolute; bottom: 0; /*这边的top、bottom、left、right是用来定义那个边的*/ background: #000; w...原创 2019-05-15 11:26:56 · 316 阅读 · 0 评论 -
sticky footer布局
到页面内容铺不满页面时候,下方div始终定在下面;当页面内容多余一屏的时候,下方的div会被顶到下面去 <div id="main"> <div class="main_top clearfix"> <div class="main_top_content"> 发烧友和飞机开...原创 2019-05-16 10:59:20 · 207 阅读 · 0 评论 -
js点击按钮唤醒app
<a onclick="openApp()">点击唤醒app</a> var download_schema = 'taobao://'; //app的协议有安卓同事提供,这里是用的淘宝var universal_link = 'ios下载地址';//ios下载地址var getVersionUrl = 'Android下载地址';//Android移动端下载地...转载 2019-05-22 17:24:03 · 2177 阅读 · 0 评论 -
vue-跟随屏幕位置改变的半场动画
定义小球(如果当前页面有其他的动画效果的定义,不要用默认的v-enter...,要重新定义name,用name-enter,用此方式覆盖污染)<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <span class="smball" v-show="bal...原创 2019-05-30 17:37:12 · 435 阅读 · 0 评论 -
简单的利用JS来判断页面是在手机端还是在PC端打开的方法
window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : "http://news.baidu.com/";以上代码利用了正则表达式和三目运算符,含义就是如果是移动端打开的话那就跳转到 "https:www.bai...转载 2019-06-19 10:04:11 · 450 阅读 · 0 评论 -
Vue运用本地存储实现评论发表
<div id="app"> <div class="box"> name:<input type="text" v-model="name"> text:<input type="text" v-model="text">原创 2018-10-15 10:06:52 · 645 阅读 · 0 评论 -
Vue中的添加、删除和搜索
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <style> * { padding: 0原创 2018-10-08 15:37:37 · 318 阅读 · 0 评论 -
计算器
<body><div id="counter"> <div id="counter_content"> <h3><input id="input1" type="text" value="0"/></h3> <原创 2018-05-29 11:35:38 · 163 阅读 · 0 评论 -
瀑布流图片墙
<style> * { padding: 0; margin: 0; } .main { width: 100%; position: relative; background: skyblue; } .boxs { width: 200px; ...原创 2018-06-12 19:56:34 · 357 阅读 · 0 评论 -
使用构造函数实现拖拽
*{ padding: 0; margin: 0;}button { display: block; border: none; outline: none; width: 200px; height: 50px; line-height: 50px; font-size: 24px; color: red; ...原创 2018-06-13 19:20:00 · 245 阅读 · 0 评论 -
4位验证码输入框(支持字母、数字、中文等)
<div class="demo"> <input type="text" class='demoInput'> <div class='numberDiv'></div> <div class='numberDiv'></div> <div class='numberDiv'></...原创 2018-05-31 09:55:58 · 893 阅读 · 0 评论 -
JS打字通
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p { display: i原创 2018-06-01 12:24:27 · 589 阅读 · 0 评论 -
图片放大效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0;原创 2018-06-01 14:58:04 · 190 阅读 · 0 评论 -
数组获取重复项
var arr=[1,17,2,55,55,8]; console.log(res(arr)); // 数组取重函数 function res(array) { var newArr=[]; // 先让原数组进行大小排序 array.sort(function (a,b) { return a-b;...原创 2018-07-24 17:36:33 · 1237 阅读 · 0 评论 -
数组剔除重复项
var arr=[1,2,1,1,2,3,4,2,2,2,8,10,15,10,7]; console.log(cls(arr));; // 数组去重函数 function cls(array) { var newArr=[]; for(var i=0;i<array.length;i++){ // 使用indexOf查询...原创 2018-07-24 18:11:15 · 264 阅读 · 0 评论 -
随机排列1-20组成不重复数组
var listArr=[];var len=20;while (listArr.length<len){ var flag=true; var randomNum=Math.ceil(Math.random()*len); for(var i=0;i<listArr.length;i++){ if(listArr[i]==random...原创 2018-08-06 18:21:32 · 623 阅读 · 0 评论 -
手机左右滑动效果
手机端的话,记得开始先定义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>CSS内容: *{ margin: 0; ...原创 2018-08-20 11:37:35 · 1364 阅读 · 0 评论 -
兼容IE的三角导航切换
<div class="box"> <div class="navBox" id="navBox"> <div class="navboxs">衣服</div> <div class="navboxs">食物</di原创 2018-09-19 17:54:48 · 267 阅读 · 0 评论 -
Vue钩子函数—半场动画(球入框)Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Game</title> <style> * { padding: 0原创 2018-10-11 11:05:18 · 276 阅读 · 0 评论 -
Vue跑马灯效果(es5)
<div id="app"> <button @click="go">走</button> <button @click="stop">停</button> <h3> {{msg}} </h3></div&原创 2018-09-21 10:23:49 · 352 阅读 · 0 评论 -
兼容IE8的环形轮播(基于Jquery)
<style> *{ padding: 0; margin: 0; } .hxlbt { width: 1200px; height: 600px; border: 1px solid #000; ...原创 2018-10-14 17:10:38 · 826 阅读 · 1 评论 -
使用Swiper制作3d旋转木马轮播图
<style> * { padding: 0; margin: 0; } .swiper-container { width: 800px; height: 400px; border: 1px solid #...原创 2019-09-20 11:11:02 · 2402 阅读 · 0 评论