- 博客(35)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 【H5】 svg可缩放矢量图形标签
【H5】 svg可缩放矢量图形标签<svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'></svg>circle 画圆：<svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'> <!--...
2019-05-31 09:12:26
691
原创 【H5】 canvas绘出喷泉告白效果
【H5】 canvas绘出喷泉告白效果效果图如下：代码如下：代码内有详解哦！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
2019-05-29 13:13:56
956
原创 【H5】canvas绘制太阳系
【H5】canvas绘制太阳系实现效果如下：实现逻辑：Star为一个主逻辑函数，通过调用此函数传递不同的参数和圆的位置来实例化各种球的运动实现代码如下：代码内有详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...
2019-05-29 10:04:52
1124
原创 第18课 微信小程序app.js全局属性与公共方法的使用
第18课 微信小程序app.js全局属性与公共方法的使用通过小程序的背景api播放器案例演示由于背景音乐播放器全局只能有一个所以只能在全局设置这一个并调用一个1、app.js内获取背景音乐api并设置成属性2、在utils内设置公共方法player,导出构造函数，在构造函数内添加方法3、在主件内引入公共方法player，并实例化方法内的构造函数，通过getApp()获取全局app...
2019-05-28 16:57:07
3358
原创 【H5】 canvas实现刮刮乐效果
【H5】 canvas实现刮刮乐效果效果图如下：全部实现代码如下：复制粘贴即可运行！代码内有步骤详解哦！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...
2019-05-28 11:45:02
3030
原创 【H5】 canvas图像各种合成详解
本素材来源：https://www.cnblogs.com/hzj680539/p/5068487.html尊重第一作者，把知识奉献给大家！简易直观图：黄色圆为原图，蓝色正方形为新图红色圆为新图，蓝色为原图！globalCompositeOperation = “source-over” 这是默认设置，新图形会覆盖在原有内容之上。destination-over 会在原有内容之下...
2019-05-28 10:25:04
1579
原创 【H5】canvas画布像素的设置与获取：
【H5】canvas画布像素的设置与获取：getImageData() 从Canvas画板上取得指定位置的像素数据putImageData() 将所得到的像素数据描画到Canvas画板上createImageData() 方法创建新的空白像素 ImageData 对象，参数里面也可以直接放ImageData 像素值我们来实践操作一下：<!DOCTYPE html><...
2019-05-28 09:32:43
5087
7
原创 [H5] Canvas画布的使用详解：
Canvas序言：在渲染复杂的动效、把数据可视化图形显示、游戏场景等需求，都会用canvas技术，比dom操作性能更高特点① H5新增的图形标签，通过提供的JavaScript函数绘制各种图表或利用算法实际非常华丽的动效② 在以前是用Flash技术实现，但不能和JS交互,③ 适合动态图形绘制缺点是位图，缩放会模糊API环境 目前只有2d绘制getContext(‘2d’) ...
2019-05-24 11:29:15
3341
2
原创 【H5】两种加密解密方法：
【H5】两种加密解码方法：encodeURI()； //加密decodeURI(); //解密加密成base64编码格式btoa() 加密atob() 解密实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...
2019-05-22 07:48:53
7864
1
原创 【H5】标签class类名属性的动态修改方法：
【H5】标签class类名属性的动态修改方法：box.classList.add(“className”); //添加类名box.classList.remove(“className”); //删除属性box.classList.toggle(‘className’)； //转换属性：class类名有className就删除 没有就加上box.classList.conta...
2019-05-22 07:22:51
3870
原创 第17课 微信小程序通过node获取用户openid:
第17课 微信小程序通过node获取用户openid:调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。调用 auth.code2Session 接口，换取用户唯一标识 OpenID 和 会话密钥 session_key。流程图如下：https://developers.weixin.qq.com/miniprogram/dev/framework/o...
2019-05-21 16:05:27
1655
5
原创 【H5】 浏览器内拖拽文字与图片：
【H5】 浏览器内拖拽文字与图片：效果图如下：dataTransfer.getData(‘Text’); //拿到的是文本内容let fileData = e.dataTransfer.files.item(0);let reader = new FileReader(); // 读取文本的信息；reader.readAsDataURL(fileData); //读取文件...
2019-05-21 10:45:26
1136
原创 【H5】 图片拖入浏览器readAsDataURL与createObjectURL处理图片：
【H5】 外部图片拖入浏览器：效果图如下：const file = new FileReader();//读到文件对象的信息file.readAsDataURL(oFile);//读取到文件所以的url,需要转入对象；实现代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="...
2019-05-19 12:04:21
615
原创 【H5】 标记精确拖拽小案例：
【H5】 标记精确拖拽小案例效果图如下：e.dataTransfer //拖拽的时候捕获里面的数据；setData(“name”,index) //设置存储值为index 存储名为namegetData(“name”) //获取存储名name的值实现代码如下：<!DOCTYPE html><html lang="en"><head&g...
2019-05-19 11:43:44
323
原创 【H5】 拖拽7事件：
【H5】 拖拽7事件被拖拽元素事件：ondragstart 拖拽开始的时触发 (触发一次)ondrag 连续触发拖拽事件ondragend 拖拽结束触发 (触发一次)拖拽进入的元素事件：ondragenter 鼠标进入目标元素内触发 (触发一次)ondragover 鼠标在目标元素内持续触发ondragleave 鼠标离开目标元素时触发事件 (触发一次)ond...
2019-05-19 11:14:43
706
原创 【H5】 拖拽3事件( onmousedown ,onmousemove ,onmouseup )
H5 拖拽案例：用到3个拖拽事件：onmousedown 鼠标按下触发事件onmousemove 鼠标按下时持续触发事件onmouseup 鼠标抬起触发事件效果图如下:以下是实现代码，代码上有详细说明哦！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...
2019-05-19 09:59:30
3180
原创 第16课 微信小程序组件详细安装导入方法:
第16课 微信小程序组件详细安装导入方法:npm init -y //初始化环境npm install --save miniprogram-slide-view //安装组件(这里已此组件为例)详情→勾选使用npm模块工具→构建npm在需要使用组件的页面的json文件内引入组件1.首先我们初始化环境并安装组件:在微信开发者工具→左击鼠标→点击磁盘打开→在当前项目目录进入cmd命...
2019-05-16 08:39:56
2027
原创 第15课 微信小程序behavior组件间的数据共享：
第15课 微信小程序behavior组件间的数据共享：先看看目录结构：我们先编写一下两my-behavior的代码：这里是my-behavior.js的代码：//behavior内还可以嵌套引入behavior// my-behavior.js//引入behaviors2就相当于把behaviors2里面的方法与数据都加到这里面var myBehavior2 = require(...
2019-05-14 11:58:23
4088
1
原创 第14课 微信小程序observers属性监听器：
第14课 微信小程序observers属性监听器：observers数据监听器可以用于监听和响应任何属性和数据字段的变化组件内使用observers数据监听器：Component({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 }, data: { // 这里是一些组件内部数据 //content: '...
2019-05-14 11:37:49
14590
5
原创 第13课 微信小程序组件间通信与事件：
第13课 微信小程序组件间通信与事件：通过接收组件内的点击事件触发外部页面内的点击事件实现组件内的通信：自定义创建组件的目录结构：触发事件：自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：my-component.js全部代码如下Component({ externalClasses: ['user-class']...
2019-05-13 15:27:02
694
原创 第12课 微信小程序Component构造器自定义组件：
第12课 微信小程序Component构造器自定义定义组件：1.自定义创建组件：2.在组件的my-component.json文件声明组件my-component.json全部代码：{ "component": true,}3.设置组件的my-component.js代码：my-component.js全部代码：Component({ externalClass...
2019-05-12 22:46:10
800
原创 【GitHub教程】 在GitHub中安装轮播图插件并使用：
在GitHub中引入轮播图插件并使用：效果图如下：1. 首先去GitHub寻找swiper轮播图插件：https://github.com //地址2. 点击进去查看使用说明：3. 这里我们介绍如何安装使用它：在cmd命令行输入下面内容安装 ：npm install vue-awesome-swiper --savepackage.json文件内的depend...
2019-05-12 17:40:17
712
原创 第11课 微信小程序多种弹窗提示样式
第11课 微信小程序弹窗提示样式：消息提示：wx.showToast(Object object)关闭消息提示： wx.hideToast(Object object)弹窗选框提示：wx.showModal(Object object)加载提示：wx.showLoading(Object object)关闭加载提示：wx.hideLoading(Object obje...
2019-05-12 08:51:11
4884
原创 第10课 微信小程序数据存储(同步缓存、异步缓存，本地读取缓存)：
第10课 微信小程序数据存储(同、异步缓存，本地读取缓存)：同步缓存：wx.setStorageSync(key, value)异步缓存：wx.setStorage(Object object)同步删除缓存：wx.removeStorageSync(key)异步删除缓存：wx.removeStorage(Object object)同步获取缓存： wx.getStorageSync(...
2019-05-12 08:27:39
4127
原创 第9课 微信小程序页面跳转传递数据wx.navigateTo：
第9课 微信小程序页面跳转传递数据wx.navigateTo：先看看效果图：方法一： 跳转页面不传数据方法二： 跳转页面传数据下面我们来看看两个页面的全部实现代码吧：index1.wxml全部代码如下：<!--pages/index1/index1.wxml--><text>这里是index1.wxml</text><!-- bin...
2019-05-11 23:01:44
1343
原创 第8课 微信小程序双向数据绑定this.setData：
第8课 微信小程序双向数据绑定：效果图上来吧：上面的输入框是input标签，输入的值与js代码中的data内的数据绑定下面的显示文字是获取data内绑定的那个数据的值微信没有v-mode这种方法哦，所以只能这样实现数据动态绑定实现双向数据绑定的代码如下：wxml全部代码如下：<!-- bindinput是监听输入时触发change方法的函数 {{属性名}}：这是引入js内...
2019-05-11 22:14:22
914
原创 微信开发者工具模拟器input点击偏移问题解决方法：
微信开发者工具模拟器input点击偏移问题解决方法：原因：由于win10系统显示设置了 缩放布局125% 将其改成100%即可1.在桌面右击鼠标：点击显示设置2.更改显示缩放布局：不用谢我，因为事后你会改回来的！好了拜~...
2019-05-11 17:59:40
1342
原创 第7课 微信小程序实现图片搜索器案例：
第7课 微信小程序实现图片搜索器案例：效果图如下：来我们来看看代码的全局样式：首先在app.json内的pages把需要的index1、index2页面注册之后我们只需写index1、index2两个页面 即可实现图片搜索小案例首先我们来看以下index1页面内的代码：index1.js代码：// pages/index1/index1.jsPage({ data: ...
2019-05-08 08:09:50
3575
4
原创 第6课 微信小程序模板的引入与使用：
第6课 微信小程序模板的引入与使用：在template1.wxml中自定义一个wxml模板：<template>定义模板标签</template>在template1.wxss中为模板设置wxss样式：在index1.wxml页面内引入模板：<!-- wxml内引入自定义的模板 路径 --><import src="../templat...
2019-05-06 18:01:22
468
1
原创 第5课 微信小程序常用尺寸单位rpx说明：
第5课 微信小程序尺寸单位rpx说明：rpx单位：width: 750rpx; //定义所有手机屏幕宽度都为750rpxpx单位：height: 750px; //px单位最好只用于高度，如果定义宽度 手机屏幕不同显示效果也会不同vw单位：width: 100vw; //定义所有屏幕宽度都为100vwvh单位：height: 100vh; //定义所有屏幕高度...
2019-05-06 16:18:55
2551
原创 第4课 微信小程序app.json目录结构解析：
第4课 微信小程序app.json目录结构解析：app.json全局配置文件内容详解：//json里面不能写注释不然会报错，运行时需把注释删除{ "pages": [ //页面路径都需要写入pages中 "pages/logs/logs", "pages/index1/index1", "pages/index2/index2", "pages/ind...
2019-05-06 15:53:12
980
原创 零基础学习Vue: 第43课 vue脚手架目录文件作用详解
零基础学习Vue: 第43课 vue脚手架目录文件作用详解vue脚手架内文件详解：package.json文件内详解：{ "name": "console", // 项目名称 "version": "1.0.0", // 版本 "description": "Console of Ascendas", // 描述 "author": "Gillian Qi", // 作者...
2019-05-05 13:59:26
505
原创 零基础学习Vue: 第42课 安装vue脚手架：
零基础学习Vue: 第42课 安装vue脚手架：第一步：首先按住 shift + 鼠标右键 → (按下)在此处打开命令行窗口 进入命令行窗口输入 ：node -v 与 npm -v 查看有无，没有则需要安装：以下证明已安装若没安装 以下是博友安装方法：https://blog.csdn.net/qq_33362864/article/details/80431162第二步：...
2019-05-04 20:16:47
1352
原创 零基础学习Vue: 第41课新闻列表小程序案例：
** 零基础学习Vue: 第41课新闻列表小程序案例：**效果图如下：以上效果只需如下一个html文件即可实现：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>新闻</title><style> * {...
2019-05-02 14:04:18
589
原创 零基础学习Vue: 第40课 js的导入与导出：
零基础学习Vue: 第40课 js的导入与导出：1.在一个文件夹中创建这3个文件：index.html //用来在浏览器内运行a.js //用来导入b.js的数据b.js //用来导出数据2.在创建的html文件引入外部a.js文件:以下是index.html文件内的所有代码：<!DOCTYPE html><html lang="en"><he...
2019-05-02 10:40:38
324
electron.zip
2020-03-24
Cocos Creator 打包成微信小游戏源代码
2020-02-25
LICEcap录屏软件GIF
2020-02-16
three.js 下载
2020-02-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人