吴小花的博客
学如逆水行舟,不进则退。
展开
-
jQuery学习笔记
学习网址:http://www.runoob.com/jquery/jquery-stop.html1.常见的dom事件2.jQuery toggle()通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。<script>$(document).ready(function(){$("button")....原创 2019-02-11 17:19:33 · 161 阅读 · 0 评论 -
WebAPP开发——H5标签video(属性和API事件)
1.video标签src - 视频链接 controls - 视频控制器的video 在各个浏览器中显示的差异safai : mp4chrome: mp4、webm、ogvfirefox:mp4、webm、ogvOpera:mp4、webm、ogvsource 标签 也可以放入src 如果播放失败 video 会继续看下一个source 标签,直到兼容。2.vide...原创 2020-02-20 10:13:22 · 1902 阅读 · 0 评论 -
移动Web开发(box-sizing | flex布局 )
1.物理像素,CSS像素缩放改变的css像素的大小--物理像素的大小不会改变PPI(dpi):每英寸的物理像素点2.viewport视口<meta name="viewport" content="width=device-width">相当于<meta name="viewport" content="initial-...原创 2020-02-20 18:48:14 · 680 阅读 · 0 评论 -
WebAPP开发——H5标签audio(属性和API事件)
1.audio支持的格式audio 定义音频 格式:mp3 wav oggmp3所有浏览器兼容ogg safari不支持wav 都支持js 能帮助生成audio对象 new Audio(); 等同于HTML上面写上audio标签chrom和Opera都不能直接播放 需要页面上元素交互<button id='btn'>播放</button>...原创 2020-02-20 11:29:59 · 3026 阅读 · 0 评论 -
h5存储
一、cookie劣势二、localStorage和sessionStorage1.相同的使用方法 不同的储存时效localStorage.setItem(key,value) 设置存储内容localStorage.getItem(key) 获取存储内容localStorage.removeItem(key) 删除存储内容localStorage.clear() 直接清空所有内容localStorage.length 直接查看存储的个数2.不同的存储时效loca...原创 2020-09-08 10:49:34 · 253 阅读 · 0 评论 -
Swiper自定义分页器样式
效果:代码:html部分: <div class="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="{$Resource.home_ba...原创 2019-04-02 09:54:38 · 13434 阅读 · 10 评论 -
el-table 合并相同行(二维数组)|【elementUI中el-table中span-method 中传递自定义参数】
【代码】el-table 合并相同行(二维数组)|【elementUI中el-table中span-method 中传递自定义参数】原创 2023-02-20 16:23:04 · 813 阅读 · 1 评论 -
项目实战经验(this.$router.push 在新标签页打开)
【代码】项目实战经验(this.$router.push 在新标签页打开)原创 2023-02-16 14:29:45 · 1777 阅读 · 0 评论 -
hansontable文档
hansontble文档原创 2023-02-16 10:25:28 · 2803 阅读 · 0 评论 -
Echarts图表相关问题
1.用echats绘制图表的时候,遇到的问题是切换tab,图表无法绘制出来。解决方案,在<el-tab-pane>里添加lazy<!-- 6企业渠道统计 --><el-row:gutter="12"style="margin-top: 20px"><el-col style="width: 1100px"> <el-card shadow="always"> <div slot="hea..原创 2021-07-15 16:21:27 · 4603 阅读 · 4 评论 -
HTTP及相关网络协议
1.会话跟踪?监视同一个用户对服务器的连续的请求和接受响应。2.为什么需要会话跟踪?浏览器与服务器之间的通信是通过HTTP协议进行通信的,而HTTP协议是”无状态”的协议,它不能保存客户的信息,即一次响应完成之后连接就断开了,下一次的请求需要重新连接,这样就需要判断是否是同一个用户,所以才有会话跟踪技术来实现这种要求。3.会话跟踪常用的方法: URL 重写 URL(...原创 2019-12-10 15:37:34 · 538 阅读 · 0 评论 -
web前端开发之《历史轮播模块二》
效果网址:https://www.hwayimachine.com/single/about<!-- history --><div class="se3" style="background:url({$picture.about_bei});background-size: cover;background-repeat: no-repea...原创 2019-12-03 10:16:15 · 270 阅读 · 0 评论 -
Table切换组件
如下图所示,不同的table,展示不同的内容HTML <div class="tab-change"> <div class="item it1 active-tab"> {$content.material} ...原创 2019-11-26 16:02:45 · 365 阅读 · 0 评论 -
web前端项目经验之《产品详情页实现产品轮播》
项目网址:http://phpstack-338253-1042013.cloudwaysapps.com/p/KBZ%20SUBMERSIBLE%20DRAINAGE%20PUMP3HTML部分 <!-- 产品swiper --> <div class="pro-item left"> ...原创 2019-11-25 15:17:59 · 729 阅读 · 0 评论 -
web前端项目经验之《博客评论模块》
<!-- comment --> <div class="comment" id="comment"> <h1 class="comm"> Comment Area </h1> ...原创 2019-11-25 15:03:29 · 705 阅读 · 0 评论 -
web前端项目经验之《注册模块》
https://www.rongpeng.com/single/registerHTML ,JS部分<extend name="Public:base" /><block name="kw"> <meta name="keywords" content="{$keyword.service_keywords}" /> <me...原创 2019-11-25 14:50:03 · 535 阅读 · 0 评论 -
web前端项目经验之《登录模块》
HTML部分{extend name="common:base"}{block name="title"}{/block}{block name="css"}<link rel="stylesheet" href="__CDN__/assets/css/wy/login.css">{/block}{block name="header"}{include f...原创 2019-11-25 14:22:32 · 1277 阅读 · 1 评论 -
web前端项目经验之《FAQ模块》
HTML部分 <!-- question --> <div id="FAQs" id="FAQs"> <div class="s3"> <div class="container"> <div class="piece"> ...原创 2019-11-25 14:08:42 · 669 阅读 · 0 评论 -
web前端项目经验之《采用swiper开发的发展历史模块》
HTML部分 <!-- history --> <div class="s3" id="history"> <div class="imgBox"> <img class="bgImg" src="{$picture.his_bg}"> </div> ...原创 2019-11-25 13:51:39 · 467 阅读 · 0 评论 -
web前端项目经验之《采用Swiper插件开发的证书模块》
由于本项目采用的是PHP模板语法,所以在文字内容都存在了后台,前端采用{$变量名}的形式。如需看到效果,将{$变量名}直接写为对应的文字即可。引入文件<link rel="stylesheet" href="__CDN__/assets/css/wy/swiper.min.css"><script src="__CDN__/assets/js/wy/swi...原创 2019-11-25 13:32:48 · 285 阅读 · 0 评论 -
web前端项目经验之《产品列表筛选》
HTML部分 <!-- proList --> <div class="s2"> <div class="container"> <div class="pro_type"> <div class="wrap"> ...原创 2019-11-25 12:03:50 · 655 阅读 · 0 评论 -
web前端开发实战经验之《PHP模板语法常用》
1.判断是否登录,如有have代表登录过,如果是none代表没有登录过。{switch name="havepwd"}{case value="have"}{/case}{case value="none"}{/case}{default /}default{/switch}...原创 2019-11-19 14:39:27 · 191 阅读 · 0 评论 -
jquery轻量级数字动画插件jquery.countup.js(实现数字动态增加效果)
1.首先下载jquery.waypoints.min.js,jquery.countup.min.js下载地址:https://download.csdn.net/download/u013819968/96882412.在页面引入jquery,jquery.waypoints.min.js和jquery.countup.min.js文件。1 <script...转载 2019-10-31 14:19:30 · 3336 阅读 · 0 评论 -
嵌入的youtube视频如何在关闭的时候停止播放?
HTML<!-- 打开视频文件 --><div class="video-box"> <div class="vdobox"> <p class="myg"><span class="iconfont icon-guanbi"></span></p> <div ...原创 2019-10-30 15:46:56 · 2760 阅读 · 0 评论 -
::before和::after伪元素的用法
1.常见伪类和伪元素css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。:before和::after下特有的content,用于在css渲染中向元素逻辑上的...转载 2019-05-29 23:11:50 · 569 阅读 · 0 评论 -
在vs code中使用ftp-sync实现客户端与服务器端代码的同步
1.首先下载插件ftp-sync2.安装之后,Ctrl+Shift+P命令,输入ftp-sync:Init 点击确定3.进入ftp-sync.json配置文件,需要配置标红的几项,4.配置好文件remotePath 要上传文件的远程站点的目录ftp默认端口是21 sftp的默认端口是225.在vs中使用,选择ftp-sync:upload file 就...原创 2019-04-24 18:34:45 · 2938 阅读 · 0 评论 -
使用阿里的【字体图标】期望的效果
1.阿里巴巴icon的网站https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.22.注册账号,或者用自己的微博账号或者Github账号登陆后,找到图标管理->我的项目->然后新建项目:右边点击新建项目,用于保存自己常用的图标;3.项目新建完成后,往项目里添加我们要想使用的图标,找到...原创 2019-04-14 11:52:51 · 895 阅读 · 0 评论 -
基于inline-block进行自适应列表布局
1.block,inline和inlinke-block细节对比● display:block a. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。 b. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 c. block元素可以设置margin和padding属性。...原创 2019-04-12 18:52:07 · 1475 阅读 · 0 评论 -
Headroom.js 的使用
1.官网链接headroom官网(中文版):http://www.bootcss.com/p/headroom.js/headroom官网(国外版):http://wicky.nillia.ms/headroom.js/headroom在线使用地址:https://npmcdn.com/headroom.js@0.9.4/dist/headroom.jsheadroom–Playroom...原创 2019-04-02 15:22:59 · 1012 阅读 · 0 评论 -
浏览器兼容性问题与解决方案
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同W.SVP.ZU%9 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:CSS里 * 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。 浏览器兼容问题二...转载 2019-02-18 16:54:26 · 326 阅读 · 0 评论 -
为什么要学Fidder抓包?
http://www.cnblogs.com/langhuagungun/p/7737204.html 为什么要学Fidder抓包?学习接口,必须要学http协议,了解什么是协议、协议的报文、状态码等等!本文通过抓包工具Fidder带你进入接口的大门。我们通过抓取的请求来学习http协议。 fiddler是一个很好的抓包工具 一.基本模块划分1.第一块区域是设...转载 2019-02-11 17:29:25 · 1081 阅读 · 1 评论 -
项目经验之一《常用CSS技巧》 超出部分隐藏 | 水平滚动 | 绝对定位实现居中对齐|css渐变动画|改变PNG图标颜色|分享社媒|去掉youtueb推荐视频|禁用右键
1.css超出2行隐藏并用...表示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;2.水平滚动条 display: inline-block; white-space: nowrap...原创 2019-07-09 15:14:29 · 613 阅读 · 0 评论 -
APICloud config.xml应用配置说明
参考:https://docs.apicloud.com/APICloud/creating-first-appconfig.xml应用配置说明“id”: 必填,应用ID,由云服务器自动分配。它是该应用的唯一标识。 “version”:必填,应用的版本号。 “name”:必填,应用名称。 “description”:可选,应用简单描述信息。 “content”:必填,应用运行...原创 2019-08-20 16:24:42 · 1228 阅读 · 0 评论 -
时间戳转换为时间
php模板语法将时间戳转换为时间 <div class="time-ago"> Release time: {$vo.create_time|date='Y-m-d H:i:s',###}</div>js实现时间戳转换为时间 // 时间戳转换为时间 function timestampToTime(timestamp)...原创 2019-09-24 18:24:57 · 1544 阅读 · 0 评论 -
如何关闭表单自动填充(测试环境Chrome浏览器)
禁用自动填充要禁用的表单自动填充,网页可以将autocomplete的属性设置为 "off":autocomplete="off"网站可以为整个表单设置或单独设置:<form method="post" action="/form" autocomplete="off">[…]</form><form method="post" ac...转载 2019-09-06 11:21:03 · 4691 阅读 · 1 评论 -
web前端开发之Form表单
1.html(需要引入bootstrap) <div class="form"> <form action="post" class="form_box" id="registration_form" onsubmit="return false"> ...原创 2019-09-03 12:03:38 · 4324 阅读 · 3 评论 -
toLocaleString()获取本地日期和时间
想要获取本地的实时时间,如左图为美国时间格式, 右图为中国时间格式、1.HTML<p class="timeNow">15:48</p><p class="ourTime"> Our time now</p>2.js // 时间 $(document).ready(function () { ...原创 2019-09-03 11:31:28 · 3523 阅读 · 0 评论 -
如何向网页中嵌入谷歌英文地图
此方案亲测可用,已经成功将中文谷歌地图换成英文前言百度地图目前不支持英文,所以如果想向网页中嵌入英文地图的话只能使用谷歌地图。(当然,想在国内从浏览器访问谷歌地图的大前提是已经翻了墙。)谷歌地图网址:https://www.google.com/maps/@27.9666829,120.6656123,15z点击左侧的“共享”->“嵌入地图”,便可获得嵌入地图的ifram...转载 2019-09-02 15:09:54 · 1496 阅读 · 2 评论 -
图片懒加载
图片懒加载非常有用,亲测可用,大概能节省5S的网站加载时间。懒加载的原理原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃...转载 2019-09-02 13:12:46 · 167 阅读 · 0 评论 -
wordpress的环境搭建(使用工具phpstudy)
1.wordpress下载https://wordpress.org/download/2.运行环境3.环境分类4.使用phpstudy搭建wordpress4.1下载phpstudy 下载网址http://phpstudy.php.cn安装好phpstudy之后启动相关服务5.本地安装下载安装好wordpress之后,将wordpress整...原创 2019-08-12 13:45:51 · 6977 阅读 · 6 评论