poetPg-优快云博客

转载输入框blur和提交按钮事件冲突处理

表单提交页面通常都需要做前端验证，有时不仅在提交按钮时需要验证一下表单内的内容，输入框失去焦点时也需要做验证处理。但是这样有一个bug，那就是人们可以输完后直接点击提交按钮，这样便会造成二次验证。问题就是上面的描述，处理方法也是从网上找到的，不过忘记出处了。处理的方法是利用timeout来解决，示例代码如下所示： /* 点击按钮时不触发input的blur事件 */ ...

2019-07-23 14:04:06 1543

原创 echarts地图demo

echarts是一款常用的数据可视化工具，不过通常都是用来做折线图，饼图，柱状图之类的图表，很少用到地图，所以我对地图的api就比较陌生。下面是我练习写的一个demo。上图是江苏各个市区代理的学校数的统计地图。使用echarts必须引入jq和echarts，然后页面上放置一个显示地图的区域<div id="map" style="width: 500px;height: 5...

2019-07-23 13:51:55 1833

原创 VUE elementUi导航写法

elementUi导航通常会和vue-router一起使用，所以与官网的示例的写法不太一样。具体写法如下 <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router> <el-menu-item v-for="item in items" :index="item.src"...

2018-10-26 14:44:35 896

原创利用jquery ui中的slider编写自定义样式的滑动条

先来看下实现效果，经测试火狐，IE9+，谷歌浏览效果一致。因为实现借助于jquery ui，所以必须引入必要的文件，jquery.js，jquer ui.js和jquery ui.css。然后如上图，html结构<div class="scale_num_box"> <div>0</div> <div&gt...

2018-09-30 10:09:27 2229

原创关于java示例HelloWorld报错：找不到或无法加载主类

初学java，通常会做一个HelloWorld的例子。很有可能你会碰到“找不到或无法加载主类”这样的错误。原因经常是因为疏忽，名称写错或者java语句，路径不对，环境变量配置问题。那么怎么找错误原因呢？首先要把正确流程理清。比如，我的java目录是D:\jdk1.8,然后我的HelloWorld示例写在了F:\java\HelloWorld.java里。首先，我们要进入f:,因为我的H...

2018-09-12 13:39:18 4606

原创微信小程序文字逐个显示效果

要在微信小程序里实现文字逐个显示效果，不能像html那样直接操作dom，但方法类似，这里使用setInterval的方法。首先，页面内容如下，要展示的内容为{{text}}。<view class="index_wrap" style='height:{{winH}}rpx; background: url("../../image/1.jpg") no-repeat; backg...

2018-09-04 11:43:36 8445 2

原创微信小程序高度自适应布局

上图是我想要实现的效果，图片和文字描述区域各占屏幕的50%；在微信小程序中的通常做法是内联样式控制。<view class=""> <view class="img_box" style='height:{{helfH}}rpx'> <image src='../../image/2.j...

2018-09-04 09:41:39 28888

原创利用filter实现模糊查询

前端很多时候要实现模糊查询的效果，之前在网上搜模糊查询的时候，发现方法都比较麻烦，于是便写了这个比较简单的模糊查询。上面是简单的页面，要求列表内容根据输入框的值进行匹配。页面结构：<div class="search_box"><input type="text" placeholder="请输入您要查找的内容" autocomplete="off...

2018-08-13 09:56:52 6494

原创适配移动端和PC端的翻书效果

首先，实现翻书效果我使用了turnjs，是一款非常好用的翻书效果插件。可以直接在百度搜索turnjis下载。也可已选择在我的github库下载。其次，PC端和移动端屏幕的差异使得我们需要控制在PC端显示两页，在移动端显示一页，然后宽度和高度用js做适应即可。turnjs使用头部需要引入的文件。然后固定格式的代码 <link rel="stylesheet" href="css/...

2018-08-10 09:06:54 4019 3

原创 input range滑动条样式自定义

input[type="range"]的样式在谷歌，火狐，IE下的样式各不相同，而实际往往需要固定的样式，这里做了三个浏览器下样式处理，IE只支持9+。上面是效果图。首先清除浏览器默认的range样式。 input[type=range]{ width: 556px; height: 17px; ...

2018-08-04 15:25:44 2463

原创移动端自定义的下拉插件

鉴于ios自带的select,使得select标签及相关插件都无法使用，自己便写了这个移动端下拉demo。自定义下拉遇到的一个小的难点是点击其他区域隐藏当前下拉，并且点击其他下拉时，当前下拉也隐藏。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...

2018-06-29 18:37:31 2246

原创 canvas实现点击，拖拽和缩放的效果

目标：实现红点的点击，拖拽，和缩放效果。思路：1.缩放通过scale，通过计算鼠标滚轮的滚动实现放大和缩小。2.拖拽和点击通过定时器区分点击和长按，长按拖拽，点击alert一句话。直接上代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...

2018-06-26 16:46:58 13845

IT小小酥的博客