前端之路
分析前端学习的点点滴滴
shaojia_
软件开发工程师一枚,有需要网站、小程序、业务系统等开发可以加我QQ:271720559
展开
-
Css效果之带背景图片的输入框
Css效果之带背景图片的输入框今天来看看怎么实现文本框有背景图片。效果图:可以看到有一个搜索图标放在文本框的最前面,实现背景图标效果。来看看css怎么实现:background-image:url('glass.gif'); background-repeat:no-repeat; padding-left:20px;首先把文本框的图片设置好后再根据图标的大小来调整好内左边距即可。...原创 2018-06-21 00:22:18 · 4859 阅读 · 0 评论 -
Css效果之好看的边框颜色大全
Css效果之好看的边框颜色大全今天分享一些好看的边框颜色,需要的可以直接拿走使用。效果图:html代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http...原创 2018-07-03 23:35:47 · 17328 阅读 · 1 评论 -
Vue之发起ajax请求
Vue之发起ajax请求今天来看看前端框架Vue怎么发起ajax请求。我们都知道在jquery框架发起ajax请求很简单,只需要$.ajax即可发起http请求。其实vue也很简单,不过需要用到插件axios。官方有提供安装,可以通过npm安装(npm install axios -S )axios是一个基于Promise的HTTP请求客户端。格式:methods:{ send(...原创 2018-07-10 00:54:26 · 1304 阅读 · 2 评论 -
Vue之简单购物车功能
Vue之购物车功能今天来看看vue怎么实现简单的购物车功能。效果图: 我们都知道vue是数据驱动和组件化的模式。意思就是只要绑定的数据改变其他的变化由vue去完成,无须再去操作dom。我们来看看简单的购物车功能怎么实现:1.先完成数据绑定代码:html:<tr v-for=...原创 2018-08-06 00:57:29 · 20874 阅读 · 6 评论 -
Vue之导航栏
Vue之导航栏今天我们来用vue实现简单的导航栏。效果图:根据点击的tab来展示对应的内容。其实很简单,用到了vue的v-show和绑定class。首先创建一个属性“shouDiv” 用来判断显示哪一个tab页。再为每一个连接注册点击事件:@click="showDiv=1"分别让sho...原创 2018-08-07 00:47:50 · 4735 阅读 · 0 评论 -
Vue之小目标列表实现
Vue之小目标列表实现今天来实现一个简单的小目标列表功能。效果图:功能:可以添加目标添加后自动显示在最下面,如果勾选了就说明是已完成的目标。1.创建一个文本框用于添加目标。并绑定键盘回车事件@keyup.13='addList' 调用添加目标方法。文本框的值则绑定addText data属性。2.实现...原创 2018-08-07 23:36:38 · 1381 阅读 · 1 评论 -
Vue之简单的统计功能
Vue之简单的统计功能今天我们来看看vue怎么实现简单的统计价格功能。效果图:最后的价格自动根据选择的项目来计算最终价格。1.首先绑定每个项目绑定class 如果选中则增加样式active,改变背景颜色 :class="{'active':item.active}"2.写计算事件,过滤掉集合中未选中的项...原创 2018-08-10 00:35:47 · 4259 阅读 · 0 评论 -
Jquery之cookie操作
Jquery之cookie操作今天来看看jquery是怎么操作cookie的。相比javascript,jquery操作cookie方便很多。在jquery cookie官网下载jquery.cookie.js 再项目中引入即可使用。地址:http://plugins.jquery.com/cookie/1....原创 2018-08-02 00:27:30 · 986 阅读 · 0 评论 -
Jquery之生成带图片的验证码
Jquery之生成带图片的验证码今天来看看jquery怎么生成图片的验证码,并实现验证功能,无需后台代码即可完成验证。效果图:会在页面加载是生成一个四位数的验证码。先生成四位随机数,在设置通过h5的canvas 来绘制图片。再为看不清按钮注册事情,来重新生成验证码即可。用一个变量来记录生成的验证码code。在登陆时...原创 2018-08-03 00:50:17 · 6109 阅读 · 0 评论 -
Jquery之删除内容效果
Jquery之删除内容效果jquery插件功能强大,今天我们来看看是实现删除内容的效果。效果图:我们点击右上角的x就会实现把这部分内容删掉。实现思路:首先写好页面样式后,引入jquery文件。在为x这个按钮添加点击事件。点击后获取父级元素,再使用jquery的动画事件:animate把整个...原创 2018-08-05 00:50:22 · 3323 阅读 · 0 评论 -
Javascript特效之感知方向遮罩
Javascript特效之感知方向遮罩先看看效果图:效果是鼠标移到每一张图就自动弹出一个div层显示具体信息。先说说我的思路:为每一张图添加一个鼠标移上去的事件,后再为当前鼠标移上去的层加上移入div信息层的效果,鼠标移开即回复原始状态。这里发现每一张图鼠标从哪个方向移入则鼠标移出时会往那个方向移回去。来看看代码实现:(function(b) { b.fn.extend({ ...原创 2018-06-11 23:49:28 · 456 阅读 · 0 评论 -
Javascript特效之可编辑下拉框
javascript之可编辑下拉框HTML里的select box只能下拉选择,是不可以编辑的,本范例实现了一个既可以编辑又可以下拉的select box,在很多项目中能够用到。看看效果图:如图可以实现编辑下拉框,实现既有文本框功能又有下拉框功能。就是input控件基础上添加可选项<input type="text" name="myText" value="Norway" selectBo...原创 2018-06-13 01:21:34 · 1283 阅读 · 0 评论 -
Javascript特效之随机显示文本或者图片
Javascript特效之随机显示文本或者图片通常我们网站都会挂上一些广告,有些广告是滚动形式有些则是随机显示出来。我们来看看怎么实现随机显示广告。首先思路就是先设置好需要显示的集合,再用js随机获取集合下标来显示出来。看看代码:<script>var strArry=new Array("111","222","333");var adv;adv=str[parseInt(Ma...原创 2018-06-13 23:58:29 · 3432 阅读 · 0 评论 -
JavaScript特效之图片提示框
JavaScript特效之图片提示框今天分析一个图片提示框。我们经常会需要在鼠标以上一个按钮或者图片时就自动显示出一些提示信息。先来看看效果图:实现思路:首先创建3个需要弹出提醒的按钮,在写出对应三个弹出框并隐藏起来。注册鼠标移上事件就显示出对应的文本框。jquery代码实现:$(document).ready(function(){ $(".menu a").hover(function()...原创 2018-06-15 01:03:41 · 1020 阅读 · 0 评论 -
Javascript特效之倒计时按钮
Javascript特效之倒计时按钮我们在做网站特别是电商网站经常会有秒杀活动,那就需要有倒计时结束点击按钮秒杀功能。今天来看看这个按钮怎么实现的。看看效果图:倒计时结束时按钮才可以点击。看看js代码怎么实现:i=10function change(){var p=document.getElementById("p");i--;p.value="准备秒杀"+iif(i==0){ p...原创 2018-06-16 00:16:09 · 425 阅读 · 0 评论 -
Javascript特效之表单文本框提示信息
Javascript特效之表单文本框提示信息我们在网页上填写信息经常会需要给用户一些提醒信息,例如提醒用户身份证文本框应该填18或者15位的身份证号码。今天来看看这类提示框怎么实现。效果图:在点击文本框时就弹出提示框。实现思路其实就是在input控件焦点事件时显示出对应的对话框来提示。这个例子用到 DHTMLgoodies_formTooltip这个类来处理并引用两个类库:form-field-t...原创 2018-06-17 01:51:00 · 3807 阅读 · 0 评论 -
Javascript特效之区域动画效果
Javascript特效之区域动画效果今天来分享一个会移动的区域,这里需要用到JQuery的动画功能animate。看看效果:图中方框会移动到右边后又移动回来。实现思路:利用JQuery动画效果控制区块的位置来回移动。js代码:$(document).ready(function(){ $(".run").click(function(){ $("#box").animate({opac...原创 2018-06-18 01:53:24 · 355 阅读 · 0 评论 -
Javascript特效之删除内容效果
Javascript特效之删除内容效果今天分享一个网页经常会用到的删除内容效果即想列表一样的每列数据实现单列删除效果。效果图:点击右上角的X后该内容会慢慢删除。实现思路:实际上很简单,就是在该div层加一个动画隐藏效果让该div层慢慢把可见度(opacity)设置为隐藏来实现。JQuery代码:$(document).ready(function(){ $(".pane .d...原创 2018-06-19 01:05:43 · 988 阅读 · 0 评论 -
Javascript特效之可翻阅上一条下一条的动态文字
Javascript特效之可翻阅上一条下一条的动态文字我们经常会看到网站有一些自动跳动的新闻动态,今天来看看新闻动态怎么实现还有怎么手动选择上一条和下一条。先来看看效果图:点击箭头则会显示上一条新闻或者下一条新闻。...原创 2018-06-20 00:06:59 · 739 阅读 · 0 评论 -
Javascript特效之选项卡定时自动切换
Javascript特效之选项卡卡定时自动切换我们经常看到一些广告是tab页形式的,而且会自动切换,今天我们来看看是怎么实现的。效果图:每过一秒会自动切换一个tab页。实现思路:写一个定时器每一秒执行一次,并判断当前tab页的下标来显示对应的tab页。对其他tab则设置display:none。js代码:function sh(){ s=(s>=5)?1:s+1 for (var i=1...原创 2018-06-22 00:47:39 · 1943 阅读 · 0 评论 -
Javascript特效之内容隐藏效果
Javascript特效之内容隐藏效果今天来看看怎么实现内容隐藏效果。效果图:点击栏目会显示其内容并且隐藏其他栏目内容。实现思路:点击栏目时直接用slideToggle控制p元素隐藏还是显示,接着对已经显示的p元素进行隐藏,最后再将最右边的小图标改成向上即可。jquery代码:$(".accordion h3:first").addClass("active"); $(".accordion p...原创 2018-06-23 00:26:24 · 322 阅读 · 0 评论 -
Javascript特效之轮播焦点广告图片
Javascript特效之轮播焦点广告图片我们经常会在一些网站上看到一些广告图片会自动切换而且会有广告标题。今天我们来看看怎么实现这种轮播广告。效果图:可以看到每一张图下面都有标题,而且如果一开始进入页面鼠标没移上去,是会自动切换图片的。实现思路:首先初始化每一张图片的图片地址、图片标题、还有注册好每个图片连接的鼠标移上事件,这样可以判断移上的是哪一个图片对应来显示出来。jquery代码:func...原创 2018-06-24 01:38:40 · 566 阅读 · 0 评论 -
Javascript特效之动画下拉效果
Javascript特效之动画下拉效果今天来看看怎么实现好看的动画下拉框效果。效果图:点击按钮会呈现动画效果下拉获取缩回。实现思路:就是在div里面加一个p元素存放文字。在点击按钮是使用jquery动画效果slideToggle来显示或者隐藏p元素,再把按钮最右边的箭头改成相应的即可。jquery代码:$(document).ready(function(){ $(".btn-slide")....原创 2018-06-25 01:04:29 · 2355 阅读 · 0 评论 -
Javascript特效之取得多选按钮的值
Javascript特效之取得多选按钮的值我们在网页表单中有可能会用到下拉选项,有可能会是需要同时选多个,今天来看看怎么实现选多个值。效果图:选中多个后点击查看即可看到选中的值都可以输出。实现思路:这个其实是用到表单提交的功能。获取表单的select选中的值然后再循环select选中的值即可。js代码:function reportMultiple(){var options_string...原创 2018-06-26 00:12:36 · 972 阅读 · 0 评论 -
Javascript特效之随机背景图
Javascript特效之随机背景图今天来看看如何实现网页背景图随机切换。其实实现起来很简单,就是写一个存图片路径的集合,然后再随机获取集合的其中一个元素用来生成网页的背景图。js代码:bg = new Array(5);bg[0] = 'a.jpg'bg[1] = 'b.jpg'bg[2] = 'c.jpg'bg[3] = 'd.jpg'bg[4] = 'e.jpg'index =...原创 2018-06-28 00:49:35 · 691 阅读 · 0 评论 -
Javascript特效之评论删除效果
Javascript特效之评论删除效果今天来看看怎么实现类似wordpress的评论删除效果。效果图:点击delete 整个内容会隐藏掉。实现思路:使用jquery动画功能animate先改变元素背景颜色后再把元素的可见度opacity 设置为隐藏。jquery代码:$(".pane:even").addClass("alt"); $(".pane .btn-delete").click(fu...原创 2018-06-28 23:41:54 · 785 阅读 · 0 评论 -
Javascrpit特效之打字机效果
Javascrpit特效之打字机效果今天来看看怎么实现炫酷的打字机效果。即把一段话一个字一个字的显示出来。效果图:实现思路:首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。再把判断段落的总字数,循环段落总字数来实现一个字一个字的输出。js代码:var theNewsNum; var theAddNum; var totalNum; var CurrentPo...原创 2018-06-30 02:19:08 · 2315 阅读 · 8 评论 -
Javascript特效之向左滚动的广告
Javascript特效之向左滚动的广告今天来看看怎么实现从右向左无缝滚动的文字广告效果。效果图:文字会一直向左重复滚动,直到鼠标放上去才停止。实现思路:因为是要向左移动,所以使用scrollLeft方法控制元素向左移动。需要写一个重复执行的代码来控制元素一直向左移动,这里用到setInterval。说到setInterval这里说说setInterval和settimeout的区别。settim...原创 2018-07-01 01:58:10 · 671 阅读 · 0 评论 -
Javascript特效之监听键盘按键
Javascript特效之监听键盘按键我们都知道很多软件都有快捷键可以使用,今天我们来看看怎么实现网页的快捷键功能。效果图:当我们按下ctrl和enter时,网页会弹出对话框。实现思路:其实实现起来很简单。只要注册好onkeydown键盘按下事件,再判断按下哪个按键做对应的操作即可。js代码:onkeydown="if(event.ctrlKey&&event.keyCode=='...原创 2018-07-01 23:00:35 · 1868 阅读 · 0 评论 -
Javascript特效之实现省市级联动
Javascript特效之实现省市级联动我们在网上买东西经常会需要填地址,而在填地址的时候经常在输入省份时就会自动弹出对应省份下面的市,今天我们来看看怎么简单的通过js实现省市联动。效果图:在选择省份后,后面的下拉框会自动赋值为该省份下面的城市。实现思路:首先我们要预设置好每个省份下面有多少个城市,然后在根据省份对应的城市查询出来赋值给后面城市的下拉框。js代码:var where = new A...原创 2018-07-03 00:17:41 · 1660 阅读 · 1 评论 -
Javascript特效之控制输入字数和进度条显示
Javascript特效之控制输入字数和进度条显示我们经常会遇到一些网页的输入框会限制输入的字数,并且会显示出当前输入了多少个字符,今天来看看怎么实现。效果图:可以看到,我们每输入一个字符下面的进度条会跟着变。实现思路:首先设置好总字数,再为文本框注册键盘按下事件。没按下按键或者删除字符都要进行处理,如果超过总字符数则截取掉。颜色则是通过rgb来控制越来越红。js代码:function textC...原创 2018-07-05 00:32:17 · 723 阅读 · 0 评论 -
Javascript特效之模拟抽奖程序
Javascript特效之模拟抽奖程序我们经常会看到一些抽奖程序,应该很多都是H5做的,今天我们来看看js怎么实现类似抽奖的程序。效果图:点击开始时,会一直跳动文本框的值直到我们点击停止。就类似抽奖的效果。不过这个几率没法设置。实现思路:我们先预设好参与抽奖的内容。再写一个setInterval重复执行函数,让文本框一直随机显示我们预设的内容。点击停止时则清除setInterval即可。js代码:...原创 2018-07-05 23:33:41 · 1339 阅读 · 0 评论 -
Javascript特效之控制文本框输入
Javascript特效之控制文本框输入今天我们来看看怎么实现限制文本框只能输入中文或者只能输入英文。效果图:实现思路:在input控制绑定onkeyup事件,再用正则表达式判断是中文或者英文,如果不是对应的则替换掉输入的内容。html:请输入汉字:<br><input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" ...原创 2018-07-09 01:23:49 · 273 阅读 · 0 评论 -
Javascript之冒泡排序法
Javascript之冒泡排序法今天来看看js是怎么实现冒泡排序法的。实现效果:排序前:排序后:实现代码:var arr = [3, 55, 12, 69, 23, 55, 6], temp = 0, flag = false;for (var i = 0; i < ar...原创 2018-07-26 00:07:08 · 396 阅读 · 0 评论 -
Javascript之用二分法查找数组
Javascript之用二分法查找数组今天我们来看看怎么用二分法输出数值在集合中的下标。集合:var arr = [11, 22, 33, 44, 8118,8900, 9000, 9900];查找的数:9000实现思路:每次一查找都先把集合分成两个集合来查找,判断集合中间数是大于或者小于要查找的值。如果大于说明查找...原创 2018-07-27 01:01:20 · 1320 阅读 · 0 评论 -
Javascript之继承
Javascript之继承我们知道面向对象编程语言都有继承,javascript也有继承,今天就来看看javascript怎么实现继承的。继承就是调用父属性或者实现父方法。假设有父方法 有属性 name和age 还有一个方法 printfunction a(name,age){ this.name ...原创 2018-07-28 01:52:09 · 132 阅读 · 0 评论 -
Javascript之获取元素距离页面的top、left、right、bottom
Javascript之获取元素距离页面的top、left、right、bottom我们在做网页是有时会需要用到绝对定位这时需要判定元素离页面的距离。今天我们来看看怎么获取元素距离页面的top、left、right、bottom。代码:function getElemDis(el) { var tp = document.documentElement.c...原创 2018-07-30 01:13:42 · 11063 阅读 · 0 评论 -
Javascript之js文件延时加载
Javascript之js文件延时加载我们做网页经常需要写很多js代码,如果有些代码库太庞大会影响到我们打开网页的速度。如果不是当前页面加载就需要用到的js代码,我们可以延时加载,这样可以提升网页的打开速度。下面几种延时加载方式都可以:1.我们可以写一个setTimeout函数来延时2秒后再加载js代码。<sc...原创 2018-07-30 23:54:09 · 723 阅读 · 0 评论 -
Javascript特效之高亮显示选中的文本框
Javascript特效之高亮显示选中的文本框今天我们来看看怎么实现网页文本框选中时高亮显示文本框以提醒当前正在输入的文本框。效果:当我们选中文本框时,文本框背景颜色变为深蓝色。实现思路:用js为文本框注册onfocus获得焦点事件,在获得焦点事件触发时添加写好的高亮样式即可。js代码:var currentl...原创 2018-08-01 00:17:33 · 2909 阅读 · 0 评论 -
Javascript之把网页加入收藏夹功能
Javascript之把网页加入收藏夹功能今天我们来看看js怎么实现把加入收藏夹功能。实现代码:<script>function addFav(){ var title = document.title; var URL = document.URL; if(document.all){ ...原创 2018-08-03 23:54:48 · 7418 阅读 · 1 评论