QQ_286115751-CSDN博客

转载 H5实现浏览器全屏API(全屏进入和全屏退出)

【进入和退出全屏】// Webkit (works in Safari5.1 and Chrome 15)element.webkitRequestFullScreen();document.webkitCancelFullScreen(); // Firefox 10+element.mozRequestFullScreen();document.mozCance

2017-06-05 10:52:26 16992 3

原创使用HBuilder编辑器将html5页面打包成APP

使用HBuilder编辑器将html5页面打包成APP （ios+安卓）1.首先先安装HBuilder编辑器。下载链接：http://www.dcloud.io/2.HBuilder编辑器菜单---->文件---->新建---->App项目---->新增项目名字---->选择实例模板。3.新建后，在manifest.json里面修改需要生成

2017-05-03 17:17:12 47660 2

原创 Swiper制作3d旋转木马轮播

Swiper制作3d旋转木马轮播现在html5页面效果用户体验要求原来越高了，慢慢出现了好多小伙伴需要使用到类似3d效果的旋转木马轮播，现在有本人通过Swiper插件制作一个该效果，下面会附上效果图和源码以及demo链接。效果图：因为是使用Swiper使用请先引入下列2个文件swiper.min.cssswiper.min.jsc

2017-04-07 16:47:32 18535

原创滤镜Filters的十种特殊效果

在日常的css图片样式处理上经常会遇到一些图片细微的模糊、透明、光亮、阴影等效果，下列我们将依此对其进行罗列使用方法。实现如下图所示的效果：滤镜Filters的十种特殊效果一、grayscale灰度.grayscale{ -webkit-filter:graysc

2017-03-23 15:20:38 943

原创 JS实现钟表效果

JS实现钟表效果通过new Date();获取实时时间然后通过css3的定位和旋转实现钟表效果css代码: .clock { position: relative; width: 400px; height: 400px; margin: 20px auto; border-radius: 50%; backgr

2017-03-18 15:46:48 5061 1

原创使用swiper 轮播插件ajax动态加载图片后导航点不动问题。

关于使用swiper 轮播插件ajax动态加载图片后导航点不动问题。逻辑1.通过ajax动态获取数据后获取图片后遍历到Swiper上；2.Swiper将其实例化后做效果渲染。根据上述思路做到的效果如下图：然而这样的话会遇到一个问题，用户在滑动Swiper的时候里面的导航点有时候可以有时候失效！！通过api文档查询找到2个参数observer 和observeParen

2021-07-19 10:02:55 412

腾讯开源的移动 H5 的控制台开发调试工具vConsole腾讯开源的移动 H5 的控制台开发调试工具，支持查看 console 日志、网络请求、自定义插件等用于移动网页的轻量级，可扩展的前端开发人员工具。特征查看控制台日志查看网络请求查看文档元素查看Cookies，LocalStorage和SessionStorage 手动执行JS命令自定义插件安装1.下载模块下载 vConsole 的最新版本。或者使用 npm 安装：npm install...

2021-02-21 17:10:38 1607

原创 js-ios对浏览器的浏览器往返缓存处理问题

ios手机的web端中，跳转到第三页面后，再返回回来，原页面的js脚本无法正常执行。虽然说在页面中增加了弹窗做判断能看到有执行，但是js的实际效果并没有反馈。相比安卓和pc上的移动端模拟均正常。网上查询后发现是ios对浏览器的浏览器往返缓存（Back/Forward cache）当判断为后退，或者是缓存中获取到状态变更时候。window.performance.navigation.type == 2 通过后退返回该页面 event.persisted 从缓存获取数据时为true，.

2021-01-29 20:03:34 857 1

原创 js-获取哈希值指定参数

测试地址http://localhost:8080/#/?game_id=1&token=a28b6b8a850611ea99c100163e0cc37b&role_id=12&zone=1&server_id=14var game_id = location_arr[0].split('game_id=')[1];var token = location_arr[1].split('token=')[1];var role_id = locat

2020-05-13 21:01:47 1100

原创 v-on、v-bind、v-for的demo

v-on<!DOCTYPE html><html><head> <title></title> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:"#my",...

2020-05-07 20:43:16 228

原创 vue商城数据动态添加删除demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

2020-05-07 16:38:15 248

原创 vue第一节课

什么是MVVM？M model 模型当前视图中可用的数据V view 视图页面DOM htmlC controller 控制器处理/加工modelviewModel 监控者 Vuejs的核心Vue官网对它的描述：通过尽可能简单的API实现响应的数据绑定和组合视图组件。1、Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变...

2020-04-30 13:57:32 214

原创 es6 留言板实例

<!DOCTYPE> <html lang="zh-en"> <head> <title>js实现简单留言板</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link href="c...

2020-04-23 20:00:55 238

原创 VUE过滤器的使用 vue 时间格式化

过滤器介绍官方教程地址：https://cn.vuejs.org/v2/guide/filters.htmlvue时间格式化创建Date.jsvar dateFormat = { padLeftZero: function (str) { return ('00' + str).substr(str.length) }, forma...

2020-04-22 11:37:38 331

转载基于vue-cli配置lib-flexible + rem，实现移动端自适应

安装flexiblenpm install lib-flexible --save引入flexible在项目入口文件main.js中添加如下代码，引入flexibleimport 'lib-flexible'px 转 rem使用 webpack 的 px2rem-loader,自动将px转换为rem安装px2rem-loadernpm install px2r...

2020-03-18 11:12:17 323

原创 vue 使用 vue-awesome-swiper （基础版）

1.0 安装 vue-awesome-swiper（稳定版本 2.6.7）npm install vue-awesome-swiper@2.6.7 --save2.0 引入配置（全局使用）2.1.0 在 main.js 中配置import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/sw...

2020-02-26 19:39:37 596

原创使用vue-preview的步骤

1.安装插件npm i vue-preview 2.在vue全局，也就是main.js声明插件import VuePreview from 'vue-preview'Vue.use(VuePreview)3.在组件里插入<div class="thumbs"> //list为你数据储存的地方，handleClose在下面组件方法里面设置 ...

2020-02-16 22:41:40 503

原创在vue_cli上使用mui或引入mui.js各种报错及问题

在子页面xxx.vue中添加mui的js组件后import mui from './assets/js/mui.js'之后执行会报错Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the argument...

2020-02-06 22:46:24 220

原创 js-html2canvas.js实现页面截图并显示或上传

一、js插件引入<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>二、js将需要的标签中的内容做canvas渲染后输出base64图，#xxx是需要渲染的内容html2canvas($("#xxx"), { // 是否尝试使用CO...

2020-01-09 15:44:15 907

原创 js-web前端-多语言切换-data-localize

html<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>语言切换</title> <script src="js/jquery-2.1.1.mi...

2019-11-25 11:36:17 1547

原创 js-createjs-图片预加载方式

引入createjs-js<script type="text/javascript" src="https://gumballs.leiting.com/mobile/20161208/js/preloadjs.js"></script>js预加载方法//图片预加载var queue = new createjs.LoadQueue();queue.o...

2019-11-12 17:01:46 624

转载 h5项目各种小问题解决方案

判断iOS系统版本号if(navigator.userAgent.match(/iphone/i)){ var verinfo = navigator.userAgent.match(/os [\d._]*/gi); version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//获取具体的系统版...

2019-11-12 16:39:26 438

原创 js-控制视频播放的全屏开启或者关闭

js-控制视频播放的全屏开启或者关闭//進入全屏 function launchFullscreen(element) { //此方法不可以在異步任務中執行，否則火狐無法全屏 if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.m...

2019-10-11 16:58:54 3585

原创 js-文本超出数量后隐藏

js-文本超出数量后隐藏<!doctype html><html><head> <meta charset="UTF-8"> <title>文本超过30个字符后隐藏</title> <script src="js/jquery-2.1.4.min.js"></script> <...

2019-09-26 17:15:49 764

原创 js-陀螺仪插件

陀螺仪插件晃动鼠标或者手机设备端会根据陀螺仪感应到的角度进行特定比例的数值变化，通过改变样式来实现效果。源码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Parallax.js | Relative Example</title...

2019-09-26 16:43:54 1239

原创 JsonBird解决前端跨域

使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题'https://bird.ioliu.cn/v1?url' + url

2019-09-18 17:37:14 836 1

原创 js 获取video视频标签的第一帧图片

js 获取video视频标签的第一帧图片<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title&g...

2019-08-26 10:13:48 10581

原创测试

2019-07-02 18:00:51 89

转载 git常用命令

git init //初始化本地git环境 git clone XXX//克隆一份代码到本地仓库 git pull //把远程库的代码更新到工作台 git pull --rebase origin master //强制把远程库的代码跟新到当前分支上面 git fetch //把远程库的代码更新到本地库 git add . //把本地的修改加到stage中 git commit -m ...

2018-11-20 11:26:29 114

转载 JQ转换数字为千分位保留两位小数,金额格式

一、千分位转换位整数var sum = '2,034,300';var x = sum.split(",");var plan_sum = parseFloat(x.join(""));输出的结果就是“2034300”；二、整数转换成千分位var TextBox8_all = "12340400";var num = TextBox8_all.toFixed(...

2018-11-09 17:44:28 3146

转载使用swiper 轮播插件ajax 请求加载图片时，无法滑动问题

因为banner图是动态创建的，在插件开始初始化时，文档流中没用图片，故没有创建相应宽度，通过调整js加载顺序，问题还是没有解决。最后找到swiper插件 api 有属性是可以根据内容变动，自动初始化插件的，添加observer：true后问题解决！var mySwiper = new Swiper ('.swiper-container', { pagination: '....

2018-08-30 14:46:44 585

转载常用正则表达式

"^\d+$"　　//非负整数（正整数 + 0） "^[0-9]*[1-9][0-9]*$"　　//正整数 "^((-\d+)|(0+))$"　　//非正整数（负整数 + 0） "^-[0-9]*[1-9][0-9]*$"　　//负整数 "^-?\d+$"　　　　//整数 "^\d+(\.\d+)?$"　　//非负浮点数（正浮点数 + 0） "^(([0-9]+\.[0-9]*[

2018-05-26 16:12:31 133

原创关于网站内唤起实时通信方式

一、使用百度商桥实现第三方通信接入方式。1.首先先下载百度商桥软件。http://qiao.baidu.com/download/index.html2.注册账号后进入简单设置。站点设置：选择需要放置的页面的站点域名位置。账号设置：1-5（人数）一般选择手动安装，将这段js复制到页面body中即可，自动安装的话目前只能支持FTP，需要提供FTP的账号和密码。然后大概需要等待10分钟左右，才会显示出...

2018-05-04 11:00:56 387

转载 jQuery插件库常用前端库引用地址

jQuery(一个快速、简洁的JavaScript框架)<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script><script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script sr

2018-04-23 09:39:56 1057

原创 ie6浏览器png透明图片兼容插件

ie6浏览器png透明图片兼容插件<!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a.js" mce_src="js/DD_belatedPNG_0.0.8a.js"></script> <script type="text/javascript">DD_belatedP

2018-04-20 17:49:11 259

转载 JS移动端页面自适应代码

当有引用jQ或者Zepto版本库时候：(function(){(window).resize(infinite); function infinite() { var htmlWidth = (‘html’).width(); if (htmlWidth >= 640) {(“html”).css({ “font-si...

2018-03-28 10:34:28 1004

原创 css3-多列布局

CSS3的多列布局主要用在类似报纸、杂志等这种排版的效果，这样书写可以省略很多一般布局上的多余标签、浮动、等等属性。column-count 设置分成几列兼容：ie10+column-gap 设置每列的边距大小兼容：ie10+column-rule 设置列边框的边线兼容：ie10+column-s...

2018-02-26 17:52:49 306

转载 css3-弹性布局display: flex;

2018-02-26 15:20:27 598

原创 css3-steps()的动画渐进效果

当我们需要实现一段小的动画视频的效果通常会想到以下的方式实现。1.gif的动画图；2.播放视频方式替代h5动画；3.canvas做绘图动画；4.js做图片帧轮询来做动画的；5.css3的steps()做动画渐进效果（过渡方式）。animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的。除了ease，linear、cubic-be

2018-01-30 10:47:37 1428

原创制作html邮件的注意要点

PS：第一次制作html的邮件代码时候以及使用的div+css的布局方式其完成后，发现将其的上传的浏览效果很不理想，里面的一些标签的效果失效，js失效，css的浮动定位等都失效，效果造成页面混乱，查了下发现。因为内核机制问题和一般的主流浏览器不一样，很多东西无法正常渲染，大多邮箱都不支持。因此不推荐使用 div 的原因是很多邮件客户端对 div 布局的支持并不好。一、css中的

2017-12-01 11:41:30 3809

vue-cli4搭建脚手架.doc

tzs_video.mp4

空空如也