![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端相关手记
文章平均质量分 82
ansheng02
不会设计的前端不是好的摄影师
展开
-
Vue3.0 + pdf.js 实现pdf预览
pdf.js的对象结构遵循实际PDF的结构,通过渲染 canvas 完成 PDF 预览。原创 2022-02-27 13:33:06 · 5049 阅读 · 3 评论 -
vue3.0 引入i18n 做国际化 - 做动态语言切换
本文以 vue3.0 引入i18n 的使用为主,以 “中文” 和 “英文” 做演示,完成语言动态切换原创 2022-01-05 23:57:53 · 4203 阅读 · 0 评论 -
vue-echarts-v3——浙江省地图下钻(eg:浙江省-嘉兴市-嘉善县)
vue-echarts-v3和echarts的地图下钻配置项其实是一样的,本身就vue-echarts-v3而言,它只是echarts在vue的使用中,打包成了一个组件。 浙江省地图下钻需要geoJson数据包,浙江省及浙江省下的省市,geoJson的数据,可以通过这个链接(阿里云DATAV.GeoAtlas)获取geo数据包,很好用~(超推荐!!!!)...原创 2020-04-12 20:04:39 · 2383 阅读 · 2 评论 -
H5定位+腾讯地图逆地址解析 = 定位到区县
最近搞定位真是搞得心累,从百度到腾讯,最后还是用了H5。不得不夸一下我们的后台工作人员,真的是一个人搞定~不过我也学到了好多~emmmmmmmmm……说正题,H5定位得用手机来测,电脑浏览器切换成手机模式都不可以。(请把“KRYKRYKRYKRYKRYKRY^^^^^”换成自己的腾讯key)直接来源码<!DOCTYPE html><html lang=...原创 2019-02-21 11:20:41 · 4131 阅读 · 0 评论 -
城市搜索——基于zepto.js锚点选择后进行搜索
本来不想写这个,想着把zepto.js在了解下,再写,后来想想,可能我会忘,还是做个记录吧。基于zepto.js的字母锚点定位到城市是从网上下载的资源,出于项目需要,新增了城市搜索功能。具体的实现如下图:以上是样式,样式的代码很简单,暂且压下不提,主要来谈下在这个城市列表页面进行输入某个字,检索符合的城市名。思路:①:定义一个数组(var arr = [];)②:监测i...原创 2019-03-14 14:36:32 · 604 阅读 · 0 评论 -
jQuery获取屏幕分辨率 -> 动态定义img的高度
业务需求:商品详情页的轮播图太扁,希望可以拉长(增加高度),最好能动态赋予高度。思路:①:获取屏幕分辨率的宽度(jQuery -> $(window).width(); )②:改变轮播图盒子的高度(jQuery -> $(div).css( "height" ,"……");)③:计算高度(jQuery -> $(window).width * 1.07)④...原创 2019-03-15 16:49:31 · 631 阅读 · 0 评论 -
swiper.js实现3D界面滑动效果
官网地址:swiper中文网swiper的使用很简单,需要引入两个文件,<link href="css/swiper.min.css" rel="stylesheet"><script src="js/swiper.min.js"></script><div class="container"> <div class=...原创 2019-03-18 17:38:24 · 2271 阅读 · 0 评论 -
遍历checked列表选中并传id值——jquery
前男友订婚后并不快乐,我很难过,我不想写任何东西。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery....原创 2019-04-01 14:35:18 · 489 阅读 · 3 评论 -
JSP+freemarker判断参数
[#if isRegimentalCommander == "yes"] <%if (product.productCategory.id != "55555" && product.productCategory.treePath.indexOf("55555") == -1 && product.maxCommission != "0.00" ) ...原创 2019-04-27 14:49:03 · 532 阅读 · 0 评论 -
video标签隐藏右下角的下载——已解决
video::-internal-media-controls-download-button { display:none;}video::-webkit-media-controls-enclosure { overflow:hidden;}video::-webkit-media-controls-panel { width: calc(100% + 5...原创 2019-04-30 15:58:10 · 2566 阅读 · 0 评论 -
freemarker + JS完成数据渲染——已解决
需求:商品详情页面添加“***购买了该商品”,滚动列表实现:①:获取信息列表数据postListData ②:循环该列表数据,获取其中用户名,时间 ③:先做JS判断用户名name----超过两个字符用**,时间time计算----距离当前时间多久(如下)//判断姓名if(name.length > 2){ name= nam...原创 2019-05-21 13:36:29 · 6333 阅读 · 1 评论 -
jQuery返回顶部——记录
基本操作引包$().ready(function() { var $window = $(window); var $backTop = $('<div class="back-top"><i class="iconfont icon-top"><\/i><\/div>').appendTo("body"); ...原创 2019-06-03 11:06:00 · 1044 阅读 · 0 评论 -
canvas绘制分享商品海报——已完成
记一次canvas经验,本次绘制生成分享海报,用到了绘制多张图片、绘制文字(颜色、换行显示)、绘制线条(颜色、粗细)、绘制圆形图片等。以下的代码是需要写在draw函数里的//html <canvas id="myCanvas" width="1000" height="1200">该浏览器不支持生成分享图片</canvas> //jsfunction ...原创 2019-06-10 16:02:41 · 1251 阅读 · 0 评论 -
swiper组件实现tab——内容切换、动态数据请求、加载(续)——通过监测手指滑动实现导航吸顶
这篇文章是swiper组件实现tab——内容切换、动态数据请求、加载的续篇,主要内容是通过监测手指滑动方向来实现导航吸顶及归位。本篇文章是我在项目实现中的总结,本篇实现了在移动端监测手指滑动情况,通过上拉下滑检测与顶部的距离,实现导航吸顶及顶部轮播图的显示与隐藏。// 监测手指滑动事件$("body").on("touchstart", function(e) { // 判断...原创 2019-06-10 18:16:55 · 2559 阅读 · 0 评论 -
H5监听手机的物理返回按键——已完成
//监听手机物理返回,然后跳转首页function pushHistory() { var state = { title: "title", url: "#forward" }; window.history.pushState(state, null, "#forward"); } // 在需要监听的页面执行该方法p...原创 2019-07-16 14:09:56 · 4113 阅读 · 0 评论 -
jQuery + clipboard.js——实现文本复制
出于项目需求,需要复制两种不同类型,一个是复制文本链接,一个是div内容。首先引入jquery文件和clipboard.js文件。clipboard.js官网1-复制文本链接<button class="btn btn-primary col-xs-11 btn-copy" data-clipboard-action="copy"data-clipboard data-...原创 2019-07-21 11:11:11 · 3135 阅读 · 0 评论 -
jQuery遍历li下的a标签,添加参数
$('.storeUrl a').each(function(){ var Ahref = $(this).attr('href'); Ahref = Ahref + "?longitude="+longitude + "&latitude=" + latitude; $(this).attr("href",Ahref);});li标签添加class="...原创 2019-01-22 13:24:41 · 3143 阅读 · 0 评论 -
Tab栏切换系列——原生JS实现
Tab栏切换将使用原生JS、jQuery、bootstrap、小程序分别实现,今天第一次,先来原生的实现。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab</title> <sty原创 2019-01-15 18:10:22 · 368 阅读 · 0 评论 -
扁平化风格博客——后续
之前Po出的扁平化风格源码,只用了HTML5+CSS3(具体详见http://blog.csdn.net/ansheng02/article/details/78618750),这次的后续将会添加上侧边栏、返回顶部、及文章页。原创 2017-11-29 20:27:30 · 592 阅读 · 0 评论 -
响应式布局—Bootstrap初识
响应式布局设计能够极大地提升用户体验效果,在解决设备只见的差异化之外,响应式设计极有可能因为要兼容的代码多,影响了加载速度,也有可能会影响精确度判断。但优点大于缺点,我们不可否认,响应式的布局方式更流行于人们的社交和生活中。 在响应式设计中,我们的开发要考虑到移动设备,并且移动设备优先,页面要如何在多终端展示;在设备不支持新的Html属性和CSS3的某些属性的情况下,如何充分发挥硬件设备原创 2017-12-02 13:38:25 · 607 阅读 · 0 评论 -
扁平化风格博客源码
今天下午,学习了扁平化风格博客,在学习过程中,增加了一些知识储量。 在HTML中引入CSS文件有两种: ①http://cdn.staticfile.org/normalize/3.0.1/normalize.min.css(引自其它网站) 这个是重置样式,就是不管你外表原来如何,全部回炉重造。翻译 2017-11-25 12:08:44 · 961 阅读 · 0 评论 -
HTML+CSS实现缓冲效果
应同项目组要求,写一个等待缓冲的特效样式,初次接有点懵,虽然知道很小,但从未接触这个缓冲,无奈问度娘。 最开始实现缓冲是用gif动图,但现在有很多成熟的HTML+CSS的缓冲效果,当然还有JS、jQuery等。 本次案例效果使用HTML+CSS,HTML部分很简单,div盒子里写了5个span,主要是样式。 首先对div设置(宽、高、位置),其次是span(宽、高、行...原创 2018-04-01 18:43:10 · 3434 阅读 · 0 评论 -
Chrome控制台出现“Uncaught SyntaxError: Unexpected string”错误(已解决)
在Chrome调试时,出现“Uncaught SyntaxError: Unexpected string”报错,网上查询,是该行的上一行少了一个英文字符“,”,但我的代码中,该行上一行为定义的变量,所以,我又从新检查了下,发现是该行中我少了一个“+”,经修改,成功。...原创 2018-07-09 11:15:38 · 37503 阅读 · 0 评论 -
微信小程序报错——数据绑定(文章页数据加载不出来:已解决)
最近在研究微信小程序,在完成欢迎页面和文章列表页面后,在做文章内容页面时,出现了问题,明明绑定的数据名没有出错,路径也对,为什么文章页还是加载不出来,我把截图放在这里,大家可以参考下。这些是固定写好的图标,会正常显示,出现这种情况,后台也没有报错。再三检查过后,还是没有问题,百度后,得知还是数据绑定的有问题,我在绑定数据的时候,在wxml、js文件中,数据看起来是不错的,如图错误出...原创 2018-07-26 17:02:56 · 4251 阅读 · 0 评论 -
HTML中处理盒子内部边距
首先上图看下关系:本来想自己写来着,百度了下,真的有总结的很全面的文章,我还是不要献丑了……直接贴出来,看网址吧。https://blog.csdn.net/xuantian868/article/details/3116442...原创 2018-08-20 09:57:57 · 2858 阅读 · 0 评论 -
HTML——楼层跳跃
楼层跳跃转载 2018-11-20 14:45:40 · 834 阅读 · 0 评论 -
HTML项目(打卡)——时间判断
出于企业管理的便捷性,上下班打卡应运而生,且由来已久。立足于本公司实际情况,特准备开发一套内部使用的打卡机制,若后期发展稳定,将推广。 由于暂时为制定详细的项目规划,本篇文章仅记录自己做的小功能——时间判断。 先来看下页面效果HTML和CSS的代码很简单 .box{ width: 200px; hei...原创 2018-11-25 11:46:33 · 3788 阅读 · 1 评论 -
HTML支付密码输入框(已实现)
密码输入框思路梳理: a:用lable包裹li标签和input框; b:input设置最大输入值为6; c:用input框的输入值分别遍历到6个li标签中;代码需要引入jQuery代码:http://libs.baidu.com/jquery/2.1.4/jquery.min.jsHTML代码如下:<!DOCTYPE htm...原创 2018-11-29 18:02:36 · 8854 阅读 · 3 评论 -
HTML记错——hotrep(半解决)
错误出现的场景:在备案号上加一个工信部的链接跳不过去,报400错误,错误页面如下:四处询问无果,后来问了下老师,具体如下:无果……待解决...原创 2018-12-01 17:17:38 · 830 阅读 · 0 评论 -
CSS——利用calc做定位
在项目的商品详情页需要添加视频,移动端和PC端都需要添加,那视频播放的按钮位置自适应成了一个让我有点郁闷的问题。 先来说下PC端,本来吧,简单的使用了margin-top、margin-left,当浏览器窗口缩小时,惨了……样式乱了…… 不行了吧,就找度娘问了下定位,度娘真是很给力的说“css中有一个calc”。 话不多说,先来看下具体的效果( 播放按...原创 2018-12-30 14:23:20 · 1219 阅读 · 0 评论 -
HTML——百度地图判断两点间的距离并做判断
本示例代码将在jquery基础库上实现。key用的是百度地图,在创建应用时,我选择的是H5应用,应用在浏览器端,白名单记得要填*,这样可以适用于所有场景。具体Demo,百度平台很详细,我的应用场景主要在于比较两点间的距离,不同的地理定位展示不同的图片。先来看下HTML,很简单的两行<div id="allmap"></div><div id="...原创 2019-01-02 18:06:59 · 1584 阅读 · 0 评论 -
多张图文利用canvas生成图片模糊(已解决)
最近在搞分享,希望能点击分享按钮,生成卡片,卡片信息含商品图片、商品名、商品价格、用户名、本商品二维码、logo。具体的参数是后台传给我,所以,我只做接收到参数后的处理。HTML中,绘制卡片用canvas标签,但真正起到作用的,是JS对canvas的控制。思路:1.点击“分享”按钮(此时发送请求,获取所需要的参数:商品图片、商品名、商品价格、用户名、本商品二维码)2.将获取到的...原创 2019-01-17 18:44:25 · 4756 阅读 · 0 评论 -
JS基础——实现图片轮播效果础
目前还没有开始PHP的学习,最近在慕课网上的JS课程快听完了,国庆假期回去之后开始PHP学习进阶之路。在JS基础课程的最后要求实现一个图片轮播的效果,要求是打开后,隔1秒自动播放,鼠标滑过导航菜单,标题字会出现背景色,就像下图这样我写的代码中,没有实现“点击标题切换到相应的图片”,这个应该是在JS中修改,哎~先把我的代码附上~ 实现图片轮播效果原创 2017-10-05 15:02:14 · 895 阅读 · 0 评论