长木木木-CSDN博客

原创只显示一行，超出用点表示。显示两行，超出用点表示。

一、只显示一行，超出用点表示。 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;二、显示两行，超出用点表示。 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -we...

2018-11-30 16:28:00 3436

原创 box-shadow大全

外阴影：box-shadow: X轴 Y轴 Rpx color;属性说明：阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小）阴影的颜色内阴影：box-shadow: X轴 Y轴 Rpx color inset;默认是外阴影内阴影：inset 可以设置成内部阴影注:此属性使用于盒模型如(div,p,h1,h2,h3,h4,h...

2018-11-23 10:52:36 330

**一、校验数字的表达式** 1. 数字：^[0-9]*$2. n位的数字：^\d{n}$3. 至少n位的数字：^\d{n,}$4. m-n位的数字：^\d{m,n}$5. 零和非零开头的数字：^(0|[1-9][0-9]*)$6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7. 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$8. 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$9

2022-02-08 16:20:32 255

原创在uniapp h5中怎么使用在线引入高德地图js api

//这里要加window., loadScrpit的callback才会执行window.mapInit = function(){ let mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () { let geolocation = new AMap.Geolocati...

2020-03-28 09:05:24 5480

原创 vue脚手架移动适配px转换为rem

通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html的font-size因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。1、创建rem.js文件// 基准大小 const base...

2019-10-17 15:29:24 742

原创跨域问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓同源是指，域名，协议，端口均相同。http://www.123.com/index.html 调用 http://www.123.com/server.PHP （非跨域）http://www.123.com/index.html 调用 http://www.456.com...

2019-09-29 10:02:11 186

原创 swiper制作3D效果的轮播图

需要配合使用最新的swiper 4.0 使用.具体效果可自己修改~css: .student-swiper { position: relative; } .student-swiper-container { position: relative; overflow: hidden; } .swiper-s...

2019-08-20 14:39:04 2950

原创可任意拖动的客服按钮

html： <button style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent"> </button>JS:Page({ data: { ballBottom: 240, ballRight: 120...

2019-07-20 09:19:12 493

转载 js 获取视频的第一帧

capture screenvar captureImage = function() {var canvas = document.createElement(“canvas”); // 创建一个画布canvas.width = video.videoWidth * scale;canvas.height = video.videoHeight * scale;ca...

2019-06-27 16:02:00 6217 2

原创 jQuery 写评价的星星功能

html: ★ ★ ★ ★ ★css:.stars{white-space: nowrap;text-align: center;margin-top: 20px;margin-bottom: 20px;}.stars li{display: inline-block;color: #ADADAD;font-size: 40px;}js:$(f...

2019-05-31 11:31:34 447

原创 canvas绘制粒子背景，鼠标经过时吸附

html：&lt;canvas id="canvas" position : absolute;z-index : -1;&gt;&lt;/canvas&gt;js:var ctx = canvas.getContext("2d"); var pw=$("#canvas").parent().width(); var ph=$

2019-02-21 17:29:33 663

原创 canvas实现动态点线背景，鼠标画点连线。

html： <canvas id="canvas"></canvas>css： canvas{display: block;width: 100%;height: 100%;position:absolute;z-index: -1;}js://动态背景class Circle { //创建对象 //以一个圆为对象 //设置随机的 x...

2019-02-15 17:19:50 4911

原创点线动态背景，鼠标吸附特效

html:在前添加<script type="text/javascript" src="js/mouse.js" opacity= 0.6></script>mouse.js: //立即执行函数 //!的作用是告诉javascript引擎这是一个函数表达式，不是函数声明，()、！、+、-等运算符都能实现这个作用，不过()是最安全的 //在...

2019-02-15 17:16:32 2977 4

原创两列联动的picker（行业选择）

wxml:<view> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray

2018-12-14 17:17:39 2561 2

转载微信小程序左滑删除效果

今天我们说下微信小程序左滑删除效果的实现，现在市场上很多APP都在使用这个效果，一个listView页面，向左滑动一条item时，右侧会出现一个删除或者其他的选项，用户体验非常好，操作起来十分方便，今天我们使用微信小程序来实现这个效果…先看效果要实现的效果要实现的效果：1，当向左滑动时，item跟随手指像左移动，同时右侧出现两个可点击的按钮2，当滑动距离大于按钮宽度一半松开手指时，ite...

2018-12-14 17:07:19 245

原创横向滚动 scroll-view

1 2 3 4 5 6 {{item.proTitle}}7 {{item.proDec}}8 ￥{{item.proPrice}}9 查看详情 &gt;10 11 12 13 复制代码...

2018-12-14 17:02:47 132

转载 CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content

前面的话　　一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为’fill-availabel’和’fit-content’。除此之外，还新增了更细粒度的’min-content’和’max-content’。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字[注意]IE浏览器不支持，webkit内核浏览器需添加-webkit-前缀f...

2018-12-14 16:57:35 368 2

原创 bootstrap @media尺寸

一、超大屏@media screen and (min-width:1200px){ }二、1100分辨率（大于960px，小于1199px）@media screen and (min-width: 960px) and (max-width: 1199px) {}三、880分辨率（大于768px，小于959px）@media screen and (min-width: 7...

2018-11-20 16:34:13 2545

原创关于微信小程序背景图片设置

微信小程序在 .wxss文件中不允许设置background-image :url(’/img/bg.png’);解决方法有如下两种一：在 .wxss文件中设置背景图片时使用base64网址：http://imgbase64.duoshitong.com 上传图片转换成base64格式然后点击复制，将复制的内容复制到填写图片路径的地方。二：使用网路图片三：在 .wxml 文件中给要设置b...

2018-11-14 10:27:14 7452

原创微信小程序快捷键的使用

微信小程序代码编辑快捷键常用快捷键格式调整Ctrl+S：保存文件Ctrl+[， Ctrl+]：代码行缩进Ctrl+Shift+[， Ctrl+Shift+]：折叠打开代码块Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行Shift+Alt+F：代码格式化Alt+Up，Alt+Down：上下移动一行Shift+Alt+Up，Shift+Alt+Down：...

2018-11-14 09:48:16 322

原创 css3 颜色过渡以及阴影

背景颜色过渡: background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);阴影： box-shadow：color h-shadow v-shadow blur spread inset； color：阴影颜色 ------------ 可选 h-shadow ：水平偏移...

2018-11-13 16:37:12 1989

转载微信小程序自定义radio和CheckBox的样式

wxml:<view class='title'>radio单选标签</view><radio-group bindchange="radioChange"><view class='label'> <label class="ui-radio {{item.checked==true?'active':''}}" wx:for=&q

2018-11-07 09:08:36 2141

原创微信小程序的产品分类显示的实现

wxml:<view class='tab-container'> <view class='tab-list'> <block wx:for="{{pres}}"> <view class="{{item.id == id?'click':'noclick'}}" bindtap='click' data-id...

2018-11-06 09:43:33 10081 3

原创 css3中常用属性：background

1、background:在一个声明中设置所有的背景属性。取值： background: #00FF00 url(bgimage.gif) no-repeat fixed top; 颜色图片平铺固定起始位置background-color:设置元素的背景颜色。取值：color-name、color-rgb...

2018-10-30 12:04:29 456

转载微信小程序表单输入验证（手机号、邮箱验证、输入非空）

wxml:<form bindsubmit='formSubmit'> <view class='form'> <text class='label'>姓名<text class='red'>(必填)</text></text> <input class='int'...

2018-10-30 11:27:31 13219 2

转载 HTML5 移动页面自适应手机屏幕四类方法

1、使用meta标签：viewportH5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每...

2018-10-30 10:43:10 580

转载 e.target and e.currentTarget

MDN中对target的解释为，一个触发事件的对象的引用，当事件处理程序在事件的冒泡或捕获阶段被调用时。而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。举个例子来说明。事件冒泡阶段: <!DOCTYPE html> <html>...

2018-10-30 10:24:17 139

转载 e.target

在微信开发中我们经常会用到标签中属性的属性值，有时候我们通过 data-* 和 e.target.dateset 来获取属性值会出现一点小bug，即是调用出来的数据是undefined。1）方案1–去掉驼峰式命名，纯小写&amp;amp;amp;lt;–HTML写法：–&amp;amp;amp;gt;//JS调用:buy:function(e){console.log(e.target.dataset.textId);//输出结果...

2018-10-30 09:18:16 247

转载微信小程序wx:for循环

列表渲染wx:for在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。&lt;view wx:for="{{array}}"&gt; {{index}}: {{item.message}}&lt;/view&gt;Page({ data: {

2018-10-07 10:39:10 3187 1

转载微信小程序的数据交互

wex.result：官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html思维是前后端分离，后端发布一个URL地址，前端调用。在微信小程序中，是通过wx.request( )发起请求。wx.request({url: ‘https://wxdemo.com/logi...

2018-10-07 09:35:57 913

原创微信小程序关于picker的使用！

官方：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html以mode=“region”wxml: {{region[0]}} -{{region[1]}}-{{region[2]}} wxss:.list{width:500rpx;height:50rpx;border:1px...

2018-10-06 16:13:00 467

原创微信小程序页面显示地图并标记指定经纬度的点！

很简单的定位功能：页面打开以后就显示点图并标记指定经纬度的点~wxml: js:Page({data: {markers: [{iconPath: “…/…/images/dingwei.png”,id: 0,latitude: 36.741264,longitude: 117.068709,width: 50,height: 50}],},/**...

2018-10-06 09:46:13 11411 12

原创微信小程序中picker的正确使用

picker微信小程序开发错误集锦小程序开发过程中想要实现省市区三级联动效果，但是在使用手机预览时点击会唤醒手机输入法正确代码：wxml:地址{{region[0]}}-{{region[1]}}-{{region[2]}}js:data:{region: [‘贵州省’, ‘贵阳市’, ‘南明区’],}后台数据使用php链接的后台。...

2018-09-20 14:54:36 1927