- 博客(33)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 JS模仿输入框输入
哦对，文案是数组，会循环切换，可以写多条，小白一个~~~，练手+1。首先写一个div，里面写上标题文字和光标，再加上点css样式。然后我们创建一个类，里面参数。然后然后就完成了,下面是代码。
2023-01-09 16:16:57
1406
原创 封装一个帧动画组件，使用的是精灵图
先调用 stop清除默认动作的定时器，playes为第二段动作的方法，因为是个跳跃动作，有个暂停的动作，左右加了个定时器，执行完第二个之后切回第一个动作。可以基于这个进一步改写，列如我们又一个精灵图有三个动作在里面，默认循环第一段，点击之后执行一次第二段，执行完再次切到第一段循环就可以这样写。paly是开始播放，判断是到了最后一页 如何是循环播放就重置索引从新播放，否则就是暂停播放清除定时器，接上自己想要的操作，小白一个，大佬多多包涵，因为第一次写淘宝小程序不熟，如果用其他框架写的话很多东西都可以优化，
2023-01-09 16:16:49
564
原创 简单的收集金币动画
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kTPuJgV7-1673251976010)(null)]使用的html加js写的，可以封装成组件。没有设置随机数的扩散是这样的。
2023-01-09 16:15:48
529
原创 vue简单的数字滚动动画
vue简单的数字滚动,使用transform:translateY()来实现滚动,简陋且粗暴效果代码 <div> <div class="record"> <div v-for="(item, index) in list" :key="index" class="item border"> <div v-for="(v, indexs) in 10" :key="indexs" class="item"
2022-05-18 13:26:51
3366
原创 vue简单的省市区地址选择器
写了一个简单的省市区地址选择器,有简单的动画,主要是通过transform:translateX()来实现平移效果代码 <div class="selectcity"> <div class="city"> <div @click="getcity(0)"> {{ cityArr[0] ? cityArr[0].name : '选择省' }} </div> <div @click="getcity(1)">
2022-05-18 11:45:22
3708
原创 前端进度条,利用背景颜色linear-gradient属性实现
效果如下思路是利用linear-gradient属性制造条纹背景颜色 ,一共三个元素,最外层负责灰色灰色区域,第二层负责截取长度,第三次负责展示间隙用和背景颜色相同的颜色,看似镂空,最里面的伪类主要负责渐变背景颜色,然后通过超出隐藏来控制代码如下<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
2022-05-07 16:50:52
641
2
原创 uniapp选择地址加模糊查询
最近有一个选择地址的功能要写,打算封装成组件,使用的是uniapp,参考美团的选择地址,ui框架是uview效果大概就是这样子,ui简单搞了下美团(右)然后就是数据,在网上找的全国市级城市的json文件,带索引页面用的是uview的u-index-list组件,因为有些配置不一样我就拷贝了一份改了一点头部的搜索输入内容会隐藏内容区域显示搜索结果整个页面需要的参数和数据处理搜索功能 输入框在输入的时候发生改变并计算结果下面是完整的代码 <ui-page
2022-04-28 16:03:48
1843
2
原创 前端H5支付，微信支付和支付宝支付
这两天写H5支付，记录一下，我这边几乎所有配置都是后端搞的，提交订单后微信支付微信支付会返回一个mweb_url地址，支付跳转到微信支付中间页进行H5权限的校验，安全性检查用户在微信支付收银台完成支付或取消支付,返回商户页面（默认为返回支付发起页面）正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在mweb_url后拼接上redirect_url=+地址，来指定回调页面注意踩坑redirect_url地址需要通过进行urlencode处理注意：不管是取消支付还是支
2021-09-02 11:11:47
1134
原创 css+js手写卡片轮播图
实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样下面是代码<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
2021-08-30 14:51:24
1626
1
原创 vue与axios上传视频并显示上传进度
做项目难免会有各种各样的需求,这次是上传视频并显示上传进度,好的我们开始吧首先先引入axios,我这里是单文件引入,没有使用封装import axios from 'axios'主要用到的参数有 videolist: [], // 视频合集 progress: 0, // 进度条需要个触发选择文件上传的按钮这里用的elenemt做为布局 <el-form-item label="视频"> <div>
2021-08-23 16:29:17
1755
1
原创 Javascript用setInterval实现setTimeou
function timeDate(fun,a){ var time = setInterval(()=>{ window.clearInterval(time) fun() },a) } timeDate(()=>{ console.log(123) },1000)
2021-07-12 16:22:58
123
原创 原生js实现炫酷烟花效果
试着用js做了一个烟花功能，建议不要把数量和速度调太高，否则直接卡死，下面是效果图可以加小球数量，范围和时间，时间越少速度越快如果时间变成负数很大概率卡死图中小点就是将要绽开的烟花下面是代码很多东西可以简写，比较懒就复制粘贴了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta name="viewport" content="wid
2021-06-26 16:16:59
927
原创 JQ移动端悬浮拖动案例
模拟手机端悬浮按钮功能，自动吸附两边，并且不能超过活动区域，上下超过自动吸附上或下因为是移动端端事件，需要调试到移动端才可以看效果以下是代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
2021-06-26 10:03:59
565
1
原创 JQ+html写的 罗盘时钟
效果图点击中间的年份还可以切换颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js
2021-03-26 13:10:30
775
1
原创 华为太空人表盘
最近看到蛮火的太空人表盘，就用html和js去写了一个，时间可以动，如果想要其他数字切换可以自己去改，这是下载链接https://download.youkuaiyun.com/download/little_shallot/16091419 <div class="box"> <div class="topleft"> <img src="./image/1.png" alt=""> <span>80%&
2021-03-25 10:24:09
12245
33
原创 原生js简单判断密码的强弱和限制
简单写一个判断密码强弱和密码类型，主要使用了几个正则去判断 <title>密码强弱</title> <style> body { text-align: center; } .box { margin: 0 auto; margin-top: 200px; } input {
2021-03-18 16:53:24
749
原创 原生JS实现拖放和拖动效果
<body> <div class="div" id="dv" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <!-- ondrop:在可拖动元素放置在 <div> 元素中时执行 JavaScript: --> <!-- ondragover: 在元素正在拖动到放置目标时触发 --> <div id="dv1">重复拖拽
2021-02-26 10:36:38
449
1
原创 使用promise简单封装请求
const http = (url, type = 'GET', data) => { return new Promise((resolve, reject) => { $.ajax({ url, type, data }).then(res => { ...
2021-02-23 14:54:54
447
原创 原生简单实现滑动解锁，和滑动拼图解锁
简单实现滑动解锁，效果图是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滑动解锁</title> <style> .di
2021-01-08 11:26:14
674
原创 用原生js写瀑布流布局，简单易懂
写了一个简单的瀑布流布局效果是这样的下面是代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生瀑布流</title> <style>
2021-01-08 10:15:17
198
原创 纯原生JS写一个可拖动轮播图
尝试不用框架去写一个轮播图，还比较粗糙，PC和H5可拖动，指示器显示正常，暂时没有写点击切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title>
2021-01-06 14:22:48
844
原创 微信小程序自定义导航栏，实现自适应
今天碰到一个页面需要自定义导航栏的，不需要原生导航；第一步先取消原生导航栏，只需要在json文件里面加入"navigationStyle":"custom"即可去掉原生导航栏，一开始直接用固定高度加定位，发现在不用设备下尺寸不对，就比如iPhone X那个刘海屏，然后就开始找适配的方法，首先是状态栏wx.getSystemInfo(Object object)这个api可以获取状态栏高度然后就是胶囊导航的高度Object wx.getMenuButtonBoundingClient
2020-11-26 21:55:14
1925
原创 用jq或者js实现一个分页器
在做项目的时候遇到需要分页器，因为项目使用的是JQ，加上我不怎么会JQ就没有去找插件用，所以自己写了一个，大概就是这个样子除了前面三页和后面三页位置就是固定在中间的<style> body { margin: 0 auto; } * { margin: 0; padding: 0; } .box { display: flex; align-items: center; ma
2020-11-15 04:14:25
1014
原创 CSS+HTML滚动效果，滚动选择器
之前看到一个案例是一个滚动的效果，是用css和html写的一个滚动选择器，主要是用了css里面的scroll-snap-type 和 scroll-snap-align 他们有不同的参数可以实现不同的效果，小白不太熟悉，需要的话可以去看文档，下面是效果图这个是实现的方法，但是那个案例并没有说如何获取当前值，所以我就自己尝试去琢磨了下，//元素页面居中 body { display: flex; justify-content: center;
2020-11-01 14:09:56
4928
2
原创 uniapp+vuex储存登录状态和用户数据
首先我们在根目录下新建一个 store 文件夹，然后在里面新建一个index.js文件里面的内容是，这里我就不讲创建过程了，可以去查下如何使用vuex，我这里写了两个方法，一个登陆保存，一个退出登录清除数据import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { hasLogin:false, //用户是否登录 userI..
2020-09-03 01:43:35
11494
3
原创 css不用伪类实现底部弧度效果的两种办法border-radius的八个值
有天需求需要写一个底部有弧度的盒子，长这样网上都大多需要伪类元素:after我在想怎么不用伪类就可以写出来于是用了个笨方法 <style> .box{width: 800px;height: 400px;margin: 0 auto;position: relative;margin-top: 200px;overflow: hidden;} .box1{ width: 5000px;height:5000px;overflow: hidden; border-
2020-06-13 01:13:37
997
原创 uniapp input 输入框加下拉框模糊查询
...首先需要写一个输入框然后给他绑定事件（根据自己实际需求来）我这个输入框是搜索加下拉框选择，我用了三个事件绑定他一个是键盘输入触发事件还有就是聚焦和失去聚焦触发事件<view class="navinput"> <image :src="imgs" mode="" class="navlefts"></image> <input type="text" class="input" v-model="clientname" @f
2020-06-05 18:13:46
13109
2
原创 封装uniapp带token请求和上传图片
let userInfo = { userId: res.data.msg.user.userId, token: res.data.msg.token, phone: res.data.msg.user.userTel, userName: res.data.msg.user.userName } uni.setStorage({ key: 'token', dat
2020-05-13 13:50:43
7345
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人