JavaScript - 教程之家

36浏览

0评论

分享一个精简的vue.js 图片lazyload插件实例

这个插件未压缩版本只有7.62kb，很精简，支持img标签和background-img资源的lazyload。支持vue.js 1.0 和vue.js 2.0安转$ npm install vue-lazyload --save使用方法//main.jsim...

2020-05-27

53浏览

0评论

百度地图JavascriptApi Marker平滑移动及车头指向行径方向

相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marke...

2020-05-27

57浏览

0评论

jQuery+CSS3实现点赞功能

效果图：图（1）初始图图（2）点击后代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html...

2020-05-27

42浏览

0评论

轻松实现jQuery添加删除按钮Click事件

大家登陆一些网站或论坛时，经常会被要求先浏览和确认“用户协议”。“用户协议”底部通常会设置一个“我已阅读并同意”复选框，勾选了该复选框，“登陆”按钮才可用。如下图所示...

2020-05-27

35浏览

0评论

jQuery实现表格奇偶行显示不同背景色就这么简单

做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。代码如下所示：<html><...

2020-05-27

60浏览

0评论

jquery插件ContextMenu设置右键菜单

Struts项目中右键菜单一般很少用到，但是一旦客户有要求，很多人就懵圈了，比如我。这个时候，当然要表现镇定，一面拍着胸口对客户承诺说绝对可以实现，一面赶紧打开百度神器，搜搜看是否...

2020-05-27

62浏览

0评论

Bootstrap笔记—折叠实例代码

1. 基础折叠
展示如下：<body> <div class="container">  <button class="btn btn-default" data-toggle="collapse" data-target="#shows">按钮</butto...

2020-05-27

54浏览

0评论

JavaScript校验Number(4,1)格式的数字实例代码

项目里面有个录入，需要数字格式进行校验，前端使用的是miniUI框架，miniUI文档里面自带了校验，vtype="float",校验浮点数的，但是它不能做到校验这个浮点数有几位整数和几位小数，所以...

2020-05-27

80浏览

0评论

原生JS实现左右箭头选择日期实例代码

先上个效果图，就是用左右尖括号可改变中间日期的值。（点击中间显示区域有时间选择器弹框，用的插件就不说了，主要说自己原创的部分）...

2020-05-27

41浏览

0评论

AngularJS实现页面定时刷新

有时我们在前端可能会有这样的需求：1、每隔一段时间刷新一下页面中的数据
2、根据需要可以暂停和启用刷新
接下来我们就来看下AngularJS的实现方法：
首先我们了解到AngularJS...

2020-05-27

75浏览

0评论

node.js爬虫爬取拉勾网职位信息

简介用node.js写了一个简单的小爬虫，用来爬取拉勾网上的招聘信息，共爬取了北京、上海、广州、深圳、杭州、西安、成都7个城市的数据，分别以前端、PHP、java、c++、python、Andr...

2020-05-27

34浏览

0评论

ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!

由于有些的程序员可能不是很会Photoshop，所以为了美化页面，我们可以借助工具bootstrap，实现起来相对就要比之前做的美观一些，今天我用bootstrap把之前做的显示表格进行了一下美...

2020-05-27

36浏览

0评论

使用BootStrap实现标签切换原理解析

原理解析
1.定义一无序列表。取id值为myTab。
2.定义列表中a标签的目标地址为我们要展示的div对应的id
3.为a标签注册对应的事件（就是js的代码）效果如图
代码如下 html代...

2020-05-27

50浏览

0评论

微信小程序跳转传参数与传对象详解及实例代码

微信小程序跳转传参数传对象微信小程序跳转传参一般都是传字符串到下一页，如果要想传对象怎么办呢？我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串，再转...

2020-05-27

67浏览

0评论

利用js定义一个导航条菜单

效果：一、html代码：<div class="Maintenance"> <div class="Title"> <div class="M_Button" id="Plan">menu1</div> <div class="M_Button" id="Expert">menu2</div> <...

2020-05-27

66浏览

0评论

微信小程序仿猫眼实现实例代码

微信小程序仿猫眼实现效果图：movie.jsPage({ data: { movies:null, scrollTop : 0, scrollHeight:0 }, onLoad: function (options) { // 生命周期函数--监听...

2020-05-27

302浏览

0评论

layer弹出层框架alert与msg详解

layer至今仍作为layui的代表作，她的受众广泛并非偶然，而是这五年多的坚持，不断完善和维护、不断建设和提升社区服务，使得猿们纷纷自发传播，乃至于成为今天的Layui最强劲的源动力...

2020-05-27

55浏览

0评论

Javascript前端经典的面试题及答案

前言如果面试题按类型来分，主要涉及到“技术”与“非技术”两大类，技术类别下涉及到的子类别有：移动 & PC端布局类 JavaScript 核心基础类衍生框架类项目应用类这四大类...

2020-05-27

61浏览

0评论

jQuery ajax实现省市县三级联动

下面我们用Jquery，ajax,做一个省，市，县的三级联动：下面是我做三级联动下拉的步骤以及逻辑
第一步：先做一个省市区表格
第二步：建个PHP页面显示用我是在<body>里放<div>用来接收要...

2020-05-27

42浏览

0评论

前端框架学习总结之Angular、React与Vue的比较详解

近几年前端的技术发展很快，细分下来，主要可以分成四个方面： 1.开发语言技术，主要是ES6&7，coffeescript，typescript等；
2.开发框架，如Angular，React,Vue.js，Angular2等；
...

2020-05-27

77浏览

0评论

jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现的2D堆条状图效果。分享给大家供大家参考，具体如下：1、HighCharts之2D堆条状图源码<!DOCTYPE html><html><head><meta charset="UTF-8...

2020-05-27

63浏览

0评论

jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制的2D堆柱状图效果。分享给大家供大家参考，具体如下：1、HighCharts之2D堆柱状图源码<!DOCTYPE html><html><head><meta charset="UTF-8...

2020-05-27

49浏览

0评论

Vue + Webpack + Vue-loader学习教程之功能介绍篇

Vue-loader 是什么？
vue-loader 是一个加载器，能把如下格式的 Vue 组件转化成JavaScript模块。vue-loader 提供了一些非常酷炫的特性： ES2015默认可用；在每个 Vue 组件内支持...

2020-05-27

63浏览

0评论

canvas实现刮刮卡效果

目前在html5和css3的热潮下，html页面的效果也是层出不穷，下面我们来介绍使用canvas来模仿刮奖刮开效果。原理在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas...

2020-05-27

41浏览

0评论

Vue + Webpack + Vue-loader学习教程之相关配置篇

前言之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍，大家可以点击这篇文章了解详情。下面就来看看相关配置篇，感兴趣的可以参考学习。使用预处理器
在 Webpack 中...

2020-05-27

46浏览

0评论

JS和canvas实现俄罗斯方块

效果图：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p style="font-size: 20px;">键盘箭头A,D控制左右移动，S控制快速下...

2020-05-27

58浏览

0评论

微信小程序在线支付功能的实现

微信小程序在线支付功能最近需要在微信小程序中用到在线支付功能，于是看了一下官方的文档，发现要在小程序里实现微信支付还是很方便的，如果你以前开发过服务号下的微信支付，那...

2020-05-27

97浏览

0评论

vuejs响应用户事件（如点击事件）

需求：
页面上的列表原先有3个，我们想点击一次添加一条记录，也可以在头和尾删除数据；
我们也可以删除我们想删除的任意一行记录；
如果是用传统的jquery操作，页面中js会特别多，而且操...

2020-05-27

43浏览

0评论

Vue 2.0+Vue-router构建一个简单的单页应用（附源码）

一、介绍vue.js 是目前最火的前端框架，vue.js 兼具 angular.js 和 react.js 的优点，并剔除它们的缺点，并且提供了很多的周边配套工具如vue-router 、vue-resource 、vuex等...

2020-05-27

44浏览

0评论

微信小程序动态绑定数据及动态事件处理

微信小程序动态绑定数据及动态事件处理关键核心代码<image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}"...

2020-05-27

53浏览

0评论

JavaScript ES6中export、import与export default的用法和区别

前言相信很多人都使用过export、export default、import，然而它们到底有什么区别呢？在看他们之间的区别之前，我们先来看看它们的用法。
ES6 import和export的用法ES6之前已经...

2020-05-27

61浏览

0评论

微信小程序页面跳转及数据传递详解

微信小程序页面跳转及数据传递详解类似 Android 的 Intent 传值，微信小程序也一样可以传值：
例如：wxml 中写了一个函数跳转：<view class="itemWeight" catchtap="jumpToOverMis...

2020-05-27

42浏览

0评论

轻松理解JavaScript闭包

摘要闭包机制是JavaScript的重点和难点，本文希望能帮助大家轻松的学习闭包一、什么是闭包？闭包就是可以访问另一个函数作用域中变量的函数。下面列举出常见的闭包实现方式，以例...

2020-05-27

73浏览

0评论

JS检测数组类型的方法小结

1.instanceof　　当只有一个全局执行环境时适用，如果包含多个框架，就存在两个以上不同版本的Array构造函数，如果从一个框架向另一个框架传递数组，传入的数组与在第二个框架中原...

2020-05-27

68浏览

0评论

Node.js 中exports 和 module.exports 的区别

Node.js 中exports 和 module.exports 的区别require 用来加载代码，而 exports 和 module.exports 则用来导出代码。但很多新手可能会迷惑于 exports 和 module.exports 的区...

2020-05-27

64浏览

0评论

基于React实现表单数据的添加和删除详解

前言最近在学习React，做了一个简单的Demo，用以自勉及和有需要的朋友们参考学习。实现功能在输入框中输入数据后，点击保存按钮，数据将会逐一显示在输入框下方，点击保存后显示的任...

2020-05-27

68浏览

0评论

利用jQuery实现一个简单的表格上下翻页效果

前言本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果，注：实现原理与轮播图相似。下面话不多说，来看看详细的实现方法吧。
html:<div class="popup day02-popup04">...

2020-05-27

68浏览

0评论

jQuery模拟窗口抖动效果

效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>jQuery模拟窗口抖动</title> <style type="text/css"> input{margin-top: 20px;} .center{...

2020-05-27

64浏览

0评论

yii form 表单提交之前JS在提交按钮的验证方法

很多时候，需要对Yii表单model中的对象设置的rules进行判断，但是有的时候可能需要在提交之前就在客户端进行验证，我这边设置的方法是在提交按钮上设置监听器，如果部分内容为空（比...

2020-05-27

46浏览

0评论

js实现自定义进度条效果

效果图：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Staged progress bar</title> <style type="text/css"> *{margin:0;padding:0;} html,...

2020-05-27

56浏览

0评论

JavaScript实现审核流程状态的动态显示进度条

对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，如下所示：
以上功能对应的html代码如下：<div class="col-md-12 col-lg-3"> <div class="panel pan...

2020-05-27

49浏览

0评论

javascript九宫格图片随机打乱位置的实现方法

今天就做个九宫格的简易拼图，最让我头疼的就是点击开始打乱图片位置。一开始在百度查看相关博客，走了很多弯路。最后看了众多的例子，自己写了个方法。
<script>//打乱图片方法...

2020-05-27

59浏览

0评论

nodejs+express实现文件上传下载管理网站

nodejs+express-实现文件上传下载管理的网站项目Github地址：https://github.com/qcer/updo后端：基于nodejs的express的web框架.前端：bootstrap框架+vuejs、jquery等js库功能点：...

2020-05-27

63浏览

0评论

利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

大容量文件上传早已不是什么新鲜问题，在.net 2.0时代，HTML5也还没有问世，要实现这样的功能，要么是改web.config，要么是用flash，要么是用一些第三方控件，然而这些解决问题的方法要么...

2020-05-27

54浏览

0评论

js仿淘宝商品放大预览功能

将鼠标移动至图片区域可放大预览效果图：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding:0; margin:...

2020-05-27

84浏览

0评论

vue.js 1.x与2.0中js实时监听input值的变化

一、vuejs 2.0中js实时监听input在2.0的版本中，vuejs把v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样： ref=...

2020-05-27

44浏览

0评论

jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现的2D条状图效果。分享给大家供大家参考，具体如下：1、实例代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HighCharts...

2020-05-27

56浏览

0评论

字太多用...代替的方法（两种）

Jquery方法：$(function() { $(".head-pic .user-name").each(function() { var maxwidth = 4; if ($(this).text().length > maxwidth) {...

2020-05-27

66浏览

0评论

jQuery阻止移动端遮罩层后页面滚动

css代码：.ovfHiden{overflow: hidden;height: 100%;}jquery: $(".header_right").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".sea...

2020-05-27

58浏览

0评论

jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现的2D面积图效果。分享给大家供大家参考，具体如下：1、实例代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HighCharts...

2020-05-27

热门文章