编程
文章平均质量分 62
米米余
不断学习进步着!
展开
-
mpvue实现仿喜马拉雅banner颜色渐变效果
参考:https://blog.csdn.net/WeiHan_Seven/article/details/103872499用swiper轮播图片,调用色彩分析插件取出图片的配色,然后设置轮播图背景渐进色。下面的Vue文件是效果实现,底下的两个js是用到的两个工具类:ColorThief、rgb颜色转换成16进制颜色缺点:没有处理两个轮播图中间的过渡效果<template> <div class="lnk-page"> <div class="lnk-co原创 2020-07-30 23:53:40 · 572 阅读 · 1 评论 -
常用动画效果
1.翻转:关键是加 perspective,有3d的翻转效果.compose-img{ width: 220px; height: 330px; margin: 10px auto; animation: miss 1.3s ease;}@keyframes miss { from{} to{transform: perspective(600px) rotateY(360deg) scale(1.2);}}2.放大:使用position实现更好.shunk{原创 2020-05-28 11:08:24 · 616 阅读 · 0 评论 -
小程序快速开发海报图
由于小程序没有开放分享朋友圈的功能,所以直接走曲线救国的方法,生成一张带有小程序码或者其他二维码的海报图,然后将海报图保存至手机相册,通过分享海报图来实现目标。海报图一般都是使用canvas进行绘制的,现在有很多的奖canvas封装好作为一个插件,通过使用插件可以快速开发海报图。使用Painter快速开发...原创 2020-05-28 11:00:09 · 666 阅读 · 0 评论 -
小程序如何实现一直滚动到页面最底部
小程序可以用wx.pageScrollTo({ scrollTop: 0 })实现回到页面顶部,也可以用wx.pageScrollTo({ scrollTop: 99999})实现滚动到页面最底部1.效果图:按钮原处于页面底部,点击后出现橙色块内容,并且橙色块内容自动顶上去2、实现addDiv () { this.theDiv = true setTime...原创 2019-11-12 11:41:16 · 4323 阅读 · 0 评论 -
小程序如何在input中的placeholder中加图标
小程序如何在input中的placeholder中加图标方式二可用,方式一不可用,1.使用mpVue编写小程序代码,首先想到的就是Vue实现的方式,<input :placeholder="placeholdrValue" class="iconfont"> export default { data () { placeholderValue: '/uxe669' ...原创 2019-11-11 10:25:06 · 6095 阅读 · 3 评论 -
微信小程序:点击商品+,出现数量和-
问题描述:商品列表中只有“+”,点击之后出现“-1+”,可以对数量进行增减,效果.wxml <view class="add-box"> <image src="/image/reduce.png" class="add-img {{item.numbers==0 ?'none':''}}" bindtap="reduceNum" data-index="{{inde原创 2017-08-17 10:23:30 · 6869 阅读 · 0 评论 -
cordova-plugin-datepicker插件的使用
cordova-plugin-datepicker插件的使用初次学习cordova,学习调用cordova插件1、添加插件创建cordova工程,添加cordova-plugin-datepicker插件(cordova plugin add cordova-plugin-datepicker)2、在index文件中引用cordova.js注意:cordova.js最好放在...原创 2018-08-15 17:05:25 · 501 阅读 · 0 评论 -
mpvue小程序实现老虎机
一、效果图:二、说明很简单的三列数字在Y轴旋转,然后将三列数字布局在一个老虎机的背景图上,点击按钮触发旋转事件,旋转到哪个数字停下来可以设置,可以由后端传回获奖数字。三、代码<template> <div class="page"> <div class="slot-machine"> <img class=...原创 2019-03-05 09:11:07 · 15140 阅读 · 1 评论 -
背景图片全屏拉伸显示
将图片设置为背景图有两种方式,一种是用标签,一种是用css的background-image:url(“”);样式1.利用标签设置背景图全显示,且自适应屏幕代码:HTMLhtml lang="en">head> meta charset="UTF-8"> title>Titletitle> link href="img.css" rel="style原创 2019-03-05 09:21:40 · 3114 阅读 · 0 评论 -
mpvue小程序实现砸金蛋
一、效果图二、说明1.素材没选好,金蛋和已砸开的蛋大小不匹配,看着不太协调2.mpvue实现砸金蛋主要也是利用css动画,然后使用v-if来控制锤子和开花的金蛋的显隐。三、代码<template> <div class="page"> <div class="stage"> <img src="https:...原创 2019-03-05 18:55:47 · 2681 阅读 · 0 评论 -
mpvue小程序营销活动——canvas实现刮刮卡
一、效果图二、说明1.使用mpVue编写小程序刮刮奖,底部的优惠券信息可以随时变化2.如果有需要刮奖涂层可以是一个图片,也可以是纯色背景,依据coating变量是否为空来控制选项。3.如果刮奖涂层是一个图片,在绘制的时候需要注意网络图片不能直接绘制,需要缓存到本地(wx.downloadfile),用本地地址进行绘制,wx.download花费时间,会导致优惠券内容先显示...原创 2019-03-04 16:36:44 · 1685 阅读 · 0 评论 -
小程序跳转公众号
小程序跳转公众号是通过组件进行跳转的,步骤如下:1.在微信公众平台上关联公众号,然后打开公众号关注组件2.在页面上使用:<official-account></official-account>标签引入公众号关注组件注意组件使用的限制,共有三个限制:当小程序从扫小程序码场景(场景值1047)打开时,(场景值1011)当小程序从聊天顶部场景(场景值1089)中的「...原创 2019-06-13 09:37:13 · 6648 阅读 · 0 评论 -
微信小程序:“+1”字样的消失与出现(setTimeout的使用)
问题描述:点击商品的“立即购买”按钮后会有“+1”的字样出现,一秒钟后又再次消失。效果:思路:将“+1”效果设置显示和隐藏,以商品list的属性存储,当点击按钮时利用setTimeout函数设置显示1秒钟wxml<view class="special1 {{item.addlabel==0?'none':''}}" >+1</view><button data-index="{{index}}"原创 2017-08-17 10:18:52 · 4654 阅读 · 0 评论 -
微信小程序:自定义弹出层
自定义弹出层,在弹出层中可键入任意内容。原创 2017-08-17 10:14:50 · 34086 阅读 · 2 评论 -
jquery validate的两种方法
jquery的两种表单验证方式原创 2017-04-11 19:46:31 · 564 阅读 · 0 评论 -
jQuery实现div单选与多选
jQuery实现div单选与多选一、单选1、思想:先监听所有的div,点击某个div触发事件。如果被点击的div的border是红色,则remove;否则被点击的div的border不是红色,则遍历所有的div,去掉所有的div的红色border,点击了某个div,再给某个加上border。2、js代码js代码如下:$(".container").on("click",this,function (原创 2017-04-12 16:26:39 · 4543 阅读 · 1 评论 -
双击页面跳转事件
双击页面跳转原创 2017-05-10 21:42:39 · 2597 阅读 · 0 评论 -
单选按钮与复选按钮的相互转换
单选按钮可以和复选按钮相互转换:一、复选按钮转换为单选按钮1. 思想:遍历所有的checkbox,将所有的checkbox都设为没有选中的状态,点击了谁,谁就勾选;当双击同一个checkbox时,就是去掉勾选。js代码:$(function(){ $("#tbody").on("click","input[type=checkbox]",function(e){原创 2017-05-11 17:02:32 · 1539 阅读 · 0 评论 -
注销登陆
1.注销登陆 jsp : 利用表单传输注销指令给后台onclick="return confirm('您确定要退出系统吗?');"> action="../../project/user/logout" method="post"> type="submit" value="注销"> controller:清除session内容,重原创 2017-05-12 17:10:23 · 305 阅读 · 0 评论 -
button实现一组checkbox的全选与全不选效果
charset="utf-8"/> src="reference/js/jquery-3.2.0.min.js">type="checkbox" name="box"/>读书type="checkbox" name="box"/>思考type="checkbox" name="box"/>思考type="checkbox" name="box"/>睡觉id="all"原创 2017-05-12 17:33:10 · 1124 阅读 · 0 评论 -
快速理解盒模型
盒模型是web界面的一个重要概念,理解盒模型后将会对web前端有更加深刻的理解。1.盒模型包括:content、padding、border、margin四部分。(1)content:本身元素,即元素真实内容所占的区域;with,height,min-width,max-with等就是控制content的大小。将盒模型比作人,那么content就是人的身体(2)padding:内边距,包括有padd原创 2017-05-12 19:11:35 · 308 阅读 · 0 评论 -
背景图片全屏拉伸显示
将图片设置为背景图有两种方式,一种是用<img>标签,一种是用css的background-image:url(“”);样式1.利用<img>标签设置背景图全显示,且自适应屏幕代码:HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href原创 2017-05-24 09:50:12 · 4685 阅读 · 0 评论 -
前端获取表格中一行内容
获取表格一行的内容,主要可以用于修改表格内容的功能。此功能需要获取到表格内容,然后将内容填入修改页,利用前端直接获取内容,不用后台再次请求数据。1.表格> type="checkbox"> 姓名 性别 年原创 2017-04-25 15:34:53 · 5010 阅读 · 2 评论 -
html的input框
html的input框input框中type属性为不同内容,则输入框就是不同的控件,用好type属性有益于输入内容的校验。1.text文本type为text时,表示输入框可以输入任意内容。<label>姓名:</label><input type="text">2. number数字type为number时,表示输入的内容只能是数字,其他内容输入不了。 ** 注:可以输入字母e,在数学中表示数原创 2017-04-19 01:38:16 · 634 阅读 · 0 评论 -
js实现<input type="color">改变背景颜色
< input type=”color” >改变北京颜色原创 2017-04-26 19:41:40 · 35776 阅读 · 2 评论 -
bootstrap的两种模态框
bootstrap的弹出层bootstrap弹出层有多种触发方式,以下是我用到的几种方式:1.方法一:button中属性触发注意:button中的data-target内容应该和要和弹出层中的id保持一致 data-target=”#mymodal-data”——– id=”mymodal-data”<!--在button上绑定触发弹出层的属性--> <button class="btn btn原创 2017-05-09 20:59:50 · 472 阅读 · 0 评论 -
只显示年月的日期控件
火狐和ie浏览器对于<input type="month/date/type">不支持,为了让日期只显示年月日,总结了两种方法。1. jeDate v3.8.2 日期控件代码:<!DOCTYPE html><html><head><meta charset="utf-8"><title>jeDate日期控件</title><script type="text/javascript" src原创 2017-05-19 22:14:59 · 26554 阅读 · 0 评论