前端攻城狮成长记录
Q久夏青
这个作者很懒,什么都没留下…
展开
-
移动端touch滑动事件
var startx, starty;获得角度function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI;};### 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动function getDirection(startx, starty, endx, endy) {...转载 2019-06-24 22:33:58 · 254 阅读 · 0 评论 -
微信用户授权
本地localStorage保存openid// localStorage保存tokenif(!window.localStorage){ alert("浏览器不支持localstorage");}else{ var storage = window.localStorage; var openId = storage.getItem("opd") ...原创 2019-06-23 21:46:58 · 207 阅读 · 0 评论 -
移动端共用提示语
封装getCommonTips方法参数传入提示文字,自适应提示框根据提示文字,自适应居中显示定时器 2S后清除此提示相关代码遇见难点: 多次点击,多次触发函数,重复出现提示语,影响用户体验解决办法: 每次点击移除getCommonTips方法,点击无反应,2S后给onclick添加getCommonTips方法,再次传入提示文字function getCommonTips(text)...原创 2019-06-23 21:42:06 · 546 阅读 · 0 评论 -
H5自动加载音乐,点击暂停、播放
html代码 <div id="btn"> <audio id="audio-player" ref="audio" preload="preload" autoplay="autoplay" loop="loop"> <source src="../../mp3/kwgr11.mp3" type="audio/mpeg...原创 2019-06-23 21:31:48 · 2900 阅读 · 0 评论 -
微信jssdk分享功能
//普通分享// showHide=1 分享// showHide=2 禁用分享var wechatshare = function (localUrl,title,desc,linkUrl,imgUrl,showHide=1) { var localUrl = localUrl; var title = title; var desc = desc; var linkUrl =...原创 2019-06-23 21:24:02 · 818 阅读 · 0 评论 -
封装微信支付和微信二维码扫码支付
//用户信息收集弹框function funTips(title,content,targetUrl,img,targetTip) {var str =’’;str += <div class="popover_box"> <div class="popover"> <div class="popover_img"> <img src="${img}...原创 2019-06-23 21:20:49 · 395 阅读 · 0 评论 -
移动端监听滑动事件
var startx, starty;//获得角度function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI;};//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动function getDirection(startx, starty, en...转载 2019-07-01 21:44:58 · 1739 阅读 · 0 评论 -
Vue配置本地代理
基本配置Vue-cli3.0 vue.config.jsmodule.exports = { devServer: { host: 'h5.anowl.net', //本机域名 port: 8080, ...原创 2019-07-01 21:07:59 · 991 阅读 · 0 评论 -
苹果手机点击无效
$(document).on('click', ".subject_box .subject_option label img", function () { $(this).closest('label').remove(); // 题目的长度});给要点击元素增加 css样式 cursor:pointer 就可以了...原创 2019-06-25 21:41:10 · 415 阅读 · 0 评论 -
jq获取节点
1、jquery 获取元素(父节点,子节点,兄弟节点)$("#test1").parent(); // 父节点$("#test1").parents(); // 全部父节点$("#test1").parents(".mui-content");$("#test").children(); // 全部子节点$("#test").children("#test1");$("#te...转载 2019-06-25 21:40:29 · 1588 阅读 · 0 评论 -
vue生命周期函数
生命周期一共四个 八个钩子函数12 属于初始渲染的周期34属于 生成插入节点的周期56属于数据修改的周期78属于销毁周期beforeCreata:这一步什么东西都没有html没加载 css没有data和方法都没有所以没用created:这个是data和方法生成 节点尚未生成 所以可以在这里请求一些接口把数据存起来beforeMout:这个是节点生成 尚未插入h...原创 2019-06-25 21:38:09 · 224 阅读 · 0 评论 -
XAMPP配服务
xampp Config httpd.confNameVirtualHost *:80<VirtualHost *:80> DocumentRoot "C:/xampp/htdocs/website/ych" ServerName h5.anowl.net</VirtualHost>C/Windows/System32/etc/hosts ...原创 2019-06-25 21:35:56 · 405 阅读 · 0 评论 -
js冒泡排序,取最小,或最大值
let arr = Object.keys(sku); //sku对象转化数组 拿到对象长度let arrSKU = []; //存放sku的拼团价格的数组let listNum=null; //数组比较大小...原创 2019-06-10 10:56:47 · 771 阅读 · 0 评论 -
手撸团购上传多张头图功能
因为是手撸BUG颇多,经过反复修改才得以完善以下功能演示 初始化选择头图 只有一张不会有删除按钮 头图banner跟随第一张改变而改变上传第二张出现删除按钮,一次能上传五张,采用flex布局平分间距html代码<!--头图--> <form id="bannerFom"> ...原创 2019-06-23 22:04:58 · 477 阅读 · 0 评论 -
时间以书面年月日显示
开始时间 let start_at = this.spu.affiliate.start_at.split(" ")[0]; //分割时分秒 //接收去掉月日首位为0的字符串 let startArr = []; //分割时分秒 start_...原创 2019-06-24 22:30:51 · 225 阅读 · 0 评论 -
短信60S倒计时
60s倒计时实现逻辑var countdown = 60; //定义参数赋予初始秒数function setTime() { if (countdown == 0) { //如果时间为0 $_("btn").disabled = false; ...原创 2019-06-24 22:29:02 · 191 阅读 · 0 评论 -
Swiper单图显示 多图轮播
banner图if(spu.banner_url.indexOf(",") == -1){ //当多图为空就显示单图imgstr += <img src=${h5Url+spu.banner_url} alt="">}else {var bannerImg = spu.banner_url.split(","); for (var i = 0;...原创 2019-06-24 22:26:27 · 1248 阅读 · 0 评论 -
Vue table切换
动态渲染className:class="{active : isActive == 0}":class="{active : isActive == 1}" :class="{active : isActive == 2}":class="{active : isActive == 3}" v-show显示隐藏切换v-show = "nowIndex == 0"v-show = ...原创 2019-06-24 22:24:11 · 1058 阅读 · 0 评论 -
localStorage储存
localStorage保存tokenif(!window.localStorage){ alert("浏览器不支持localstorage");}else{ var storage = window.localStorage; var token = storage.getItem("auth_token"); var id = storage.getItem...原创 2019-06-24 22:18:56 · 252 阅读 · 0 评论 -
JS路由传参传对象及中文字符
var str = JSON.stringify(strAddrs); //对象转为字符串 str = "../position.html?strAddrs="+str; //路由拼接 str = encodeURI(str); //encodeURI()是Javascri...原创 2019-06-24 22:16:57 · 1627 阅读 · 0 评论 -
js复制功能
HTML<div class="userTitle"> <h1 id="userName">油菜花花匠</h1> <p>邀请码:<span id="code">8975341</span><i onclick="copyText()">复制</i></p> &...原创 2019-06-24 22:14:04 · 108 阅读 · 0 评论 -
form表单提交,组装数据
获取答案 var msg = $("#formData").serializeArray();for (var i=0;i<msg.length;i++){ //为对象动态添加属性 msg.forEach(function(item){ let quesName = item.name.split(...原创 2019-06-24 22:10:33 · 954 阅读 · 0 评论 -
markdown语法
一、标题# 这是一级标题## 这是二级标题### 这是三级标题#### 这是四级标题##### 这是五级标题###### 这是六级标题二、字体**这是加粗的文字***这是倾斜的文字*`***这是斜体加粗的文字***~~这是加删除线的文字~~三、引用在引用的文字前加>即可。引用也可以嵌套,如加两个>>三个>>>这是引用的内容...原创 2019-06-24 22:08:42 · 102 阅读 · 0 评论 -
CSS文本溢出显示省略号
overflow:hidden; text-overflow:ellipsis; white-space:nowrap移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。d...原创 2019-06-23 22:07:16 · 114 阅读 · 0 评论 -
时间转换成年月日显示(去掉日月首位0)
let start_at = 2019-07-04 14:00:00let start_at = start_at.split(" “)[0]; //分割时分秒 2019-07-04//接收去掉月日首位为0的字符串let startArr = [];start_at = start_at.split(”-"); //年月日分开[...原创 2019-06-15 11:18:39 · 2325 阅读 · 0 评论 -
用户定位JSSDK获取用户经度纬度配合腾讯地图组件
function mapBtn() { //封装的地图 函数调用var localUrl = window.location.href;var appid,timestamp,nonceStr,signature;$.ajax({url:apiUrl+“jssdk”,type:‘post’,dataType:‘j...原创 2019-05-11 23:30:43 · 1463 阅读 · 0 评论 -
JQ获取节点
1、jquery 获取元素(父节点,子节点,兄弟节点)$("#test1").parent(); // 父节点$("#test1").parents(); // 全部父节点$("#test1").parents(".mui-content");$("#test").children(); // 全部子节点$("#test").children("#test1");$("#test")....转载 2019-05-11 23:27:18 · 2866 阅读 · 0 评论 -
异步加载js方案
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。异步加载方式:defer,只支持IEasync:创建script,插入到DOM中,加载完毕后callBack,见代码:function lo...原创 2018-11-21 13:15:07 · 163 阅读 · 0 评论 -
尝试实现ready方法
$(document).ready() 是个什么函数?跟window.onload有什么区别?1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(...原创 2018-11-21 13:11:18 · 229 阅读 · 0 评论 -
前端开发有哪些优化问题?
减少http请求次数:css spirit,data uriJS,CSS源码压缩前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能用setTimeout来避免页面失去响应用hash-table来优化查找当需要设置的样式很多...原创 2018-11-21 13:07:11 · 569 阅读 · 0 评论 -
4. CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS 3新增伪类有哪些?
id选择器(# myid) 类选择器(.myclassname) 标签选择器(div、h1、p) 相邻选择器(h1 + p) 子选择器(ul< li) 后代选择器(li a) 通配符选择器( * ) 属性选择器(a[rel = “external”]) 伪类选择器(a: hover, li: nth - child)可继承: font-size font...原创 2018-11-09 08:45:12 · 251 阅读 · 0 评论 -
1. AJAX的优点和缺点
ajax 优点是:1、最大的一点是页面无刷新,用户的体验非常好。2、使用异步方式与服务器通信,具有更加迅速的响应能力。3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。4、基于标准化的并被广泛支持的技术,不需要...原创 2018-11-09 08:43:26 · 514 阅读 · 0 评论 -
无缝滚动轮播
先上效果图HTML代码<div id="divall"> <div class="div01"> <img src="images/1.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <i原创 2018-10-26 22:48:57 · 173 阅读 · 0 评论 -
要求:弹出框接收字符串输入 输入aaabbbcccddd 输出3a3b3c3d
charAt() 方法可返回指定位置的字符。function fun(){ //封装一个fun函数var str = prompt(“请输入字符串”,“aaabbbcccddd”);var num = 0;var str1 = “”; for(var i = 0; i < str.length; i++){ //遍历 if(str.c...原创 2018-10-29 20:37:53 · 1372 阅读 · 0 评论 -
从前端和后端两个角度分析jsonp跨域访问(完整实例)
一、什么是跨域访问举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。跨域访问违反了同源策略,同源策略的详细信息可以点击如下链接:Same-origin_policy;总而言之,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相...转载 2018-10-31 09:22:38 · 283 阅读 · 0 评论 -
JavaScript初级部分总结
什么是JavaScript 1.解释型语言,可以被浏览器逐行执行解析 2.弱类型语言 3.声明变量:var var 变量名 = 变量值 4.声明规则: 只能是字母数字下划线美元符,不能以数字开头,不能是javascript关键字和保留字 break do instanceof typeof case else new var catch finally retu...原创 2018-09-28 10:21:30 · 196 阅读 · 0 评论 -
飞机大战canvas标签和JS结合的综合运用
效果图展示点击任意位置进人游戏,下一张 游戏加载阶段的,请等待 生命值耗尽游戏结束阶段 下面是制作源码,有兴趣的多看看,自行领会 这是目前为止做的最大的项目,相信以后能做的更好加油!!...原创 2018-09-02 15:52:37 · 476 阅读 · 0 评论 -
H5中canvas标签制作时钟
效果图展示每次打开都会与打开设备的时间同步,并且不关掉它,就会像正常的时钟一样一直运转下去。制作开始的准备部分绘制外围大圆以及存放小时数组 时钟与分钟数组的遍历 绘制指针 最后调用时钟,设置定时器使它正常运行初学H5就做这个时钟小项目,刚好是对之前学习的知识的来个综合运用,进行加强巩固。...原创 2018-09-02 15:26:10 · 775 阅读 · 0 评论 -
JS小练习软键盘
成品展示HTML部分CSS部分JS部分 其中比较重要的操作就是“去重”,对软键盘的起着很大的作用。原创 2018-08-25 21:23:56 · 351 阅读 · 0 评论 -
web前端兼容性问题总结
1. HTML对象获取问题FireFox:document.getElementById(“idName”);ie:document.idname或者document.getElementById(“idName”).解决办法:统一使用document.getElementById(“idName”);2. const问题说明:Firefox下,可以使用const关键字或var关键字来定...原创 2018-11-22 16:38:00 · 187 阅读 · 0 评论