简单的JS控制button颜色随点击更改的实现方法

先上效果图:默认“今日”是选中状态,是行内样式:<button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button>上面的日...

JS实现二叉查找树的建立以及一些遍历方法实现

二叉查找树是由节点和边组成的。
我们可以定义一个节点类Node,里面存放节点的数据,及左右子节点,再定义一个用来显示数据的方法://以下定义一个节点类function Node(data,left,...

react.js CMS 删除功能的实现方法

页面效果图:数据操作分析:在查询表组件的 TableData.js 中操作如下内容:给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(formatPostCollectionLi...

Vue.js仿Metronic高级表格(一)静态设计

Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables,本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库,jQuery做部分用户交互(弹窗)。使用到的库:Vue 2.0,Bo...

JS简单获取当前日期和农历日期的方法

本文实例讲述了JS简单获取当前日期和农历日期的方法。分享给大家供大家参考,具体如下:navCal.js文件如下:today=new Date();function initArray(){ this.length=initArray.arg...

bootstrap select插件封装成Vue2.0组件

因为bootstrap-select功能比较强大,而且样式还不错,所以在项目使用了vue,所以,觉得对bootstrap-select进行封装。html
复制代码 代码如下:<my-select :options="input.options"...

JS与jQuery实现子窗口获取父窗口元素值的方法

本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法。分享给大家供大家参考,具体如下:功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父...

巧用weui.topTips验证数据的实例

场景一、有一个输入金额的场景,这个金额需要验证,验证说明如下:不能为空格;不能为0;不能为汉字;不能为其它字符;不能大于200;唯一可以的是,只有输入3~199之间的数字,下面的确定按钮才...

JavaScript实现的商品抢购倒计时功能示例

本文实例讲述了JavaScript实现的商品抢购倒计时功能。分享给大家供大家参考,具体如下:<html><head><meta charset="utf-8"><title>JS抢购倒计时</title></head><body><span id...

JS简单验证上传文件类型的方法

本文实例讲述了JS简单验证上传文件类型的方法。分享给大家供大家参考,具体如下:function checkType(){ //得到上传文件的值 var fileName=document.getElementById("file_logo...

Map.vue基于百度地图组件重构笔记分享

Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能.第一步:重构自定义的富文本对象,设置为全局对...

微信小程序商城项目之侧栏分类效果(1)

在商场项目中,一般都会有分类页面。
分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图布局分析:
<主盒子>
<左盒子></左盒子>
<右盒子></右盒子>
</主盒子>
左...

微信小程序商城项目之商品属性分类(4)

续上一篇的文章:微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)
所提及的购物数量的加减,现在说说商品属性值联动选择。为了让同学们有个直观的了解,到电商网截了一个...

微信小程序商城项目之购物数量加减(3)

我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示:
在宝贝详情页里:在购物车里:
现在就为大家介绍这个小组件,在小程序中,该如何去写
下图为本项目的图:
wxml:
<!-- 主...

微信小程序商城项目之淘宝分类入口(2)

分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例
下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面。
如需学习页面跳转...

微信小程序教程系列之页面跳转和参数传递(6)

关于页面的跳转,微信小程序提供了3种方法:方法一:使用API wx.navigateTo()函数

示例:首先先新建一个test页面如何新建页面?请到先阅读下面教程微信小程序的新建页面 —— 微信...

微信小程序教程系列之新建页面(4)

例如在web的开发中,新建一个页面只需要新建一个html文件即可。
但是到在微信小程序中,新建一个页面也不只是新建一个wxml文件,那么该如何做呢?下面我们一起来学习新建一个页面的...

微信小程序实战之上拉(分页加载)效果(2)

上拉加载(分页加载)
当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪...

微信小程序实战之顶部导航栏(选项卡)(1)

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图:wxml:<!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" d...

微信小程序实战之轮播图(3)

轮播图是大部分应用的一个常用的功能,常用于广告投放、产品展示、活动展示等等。
漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用。
废话少说,下面开始动手。
业务需...

Angularjs根据json文件动态生成路由状态的实现方法

项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来:首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui-router....

jacascript DOM节点——元素节点、属性节点、文本节点

元素节点  元素节点就是HTML标签元素,元素节点主要提供了对元素标签名、子节点及属性的访问;  元素节点的三个node属性:nodeType:1、nodeName/TagName:元素的标签名大写、nod...

用 js 的 selection range 操作选择区域内容和图片

先放上最后的效果,这是点击图片以前:这是点击图片以后:非常清晰,一目了然,就算是小白用户也明白发生了什么。挺好的。最近在做编辑器相关的东西,遇到一个需求,用户在编辑器中插入或...

JavaScript实现前端实时搜索功能

大部分页面都具备搜索功能。而作为前端,我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户,具体实现如下:1.基本布局:<div class="searcher"> <p class="searche...

微信小程序实战之仿android fragment可滑动底部导航栏(4)

底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一,因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏。相关教程:微信小程序教程系列之设置标题栏和导航...

微信小程序教程系列之设置标题栏和导航栏(7)

微信小程序标题栏和导航栏的设置方法,具体内容如下设置标题栏标题栏window在app.json文件里面,通过window对象里面的属性进行设置示例:
app.json:
运行:设置导航栏导航栏TabBar如...

Angular2数据绑定详解

大致介绍Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为:1、属性绑定和插值表达式 组件类-> 模板2、事件绑定:模板 -> 组件类3、双向绑定: 模板 <-> 组件类...

微信小程序实战之登录页面制作(5)

提供一个登录页的案例,供同学们使用项目效果图:目录结构:图片资源:name.pngkey.pngloginLog.jpglogin.wxml:<view class="container"> <view class="login-icon"> <image class...

Jquery-data的三种用法

记录一下Jquery-data的用处:jQuery-data主要是用来存储数据,帮助普通对象或者jQuery对象来存储数据,其实如果单纯的储存dom的单一的属性,用attr自定义属性足够了;如果存储多个键...

微信小程序实战之自定义toast(6)

微信提供了一个toast的api wx.showToast()
相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject
本来是比较好的,方便使用,但是这个t...

微信小程序--onShareAppMessage分享参数用处(页面分享)

今天下午突然听到群里有人说微信小程序工具更新了,文档也更新了不少内容.顾不上吃冬至的饺子.我就冲进来了.先说分享功能,目前真机尚不能调试.开发工具上可以看看效果.后续...

微信小程序实战之自定义抽屉菜单(7)

微信提供了动画api,就是下面这个
相关链接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject通过使用这个创建动画的api,可以做出...

微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

今天遇到微信小程序的用户头像设置功能,做笔记.先上gif:再上代码:小demo,代码很简单.1.index.wxml<!--index.wxml--> <button style="margin:30rpx;" bindtap="chooseimage"...

微信小程序开发之麦克风动画 帧动画 放大 淡出

想做个录音机,第一步就卡在麦克风动画这里了.先上gif.再吐槽.① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设...

微信小程序实战之自定义模态弹窗(8)

先看看官方提供的模态弹窗,供大家参考,具体内容如下api如下:示例:这样的模态弹窗,充其量只能做个alert,提示一下信息。
但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从...

jQuery加密密码到cookie的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <table> <tr>...

javascript实现日期三级联动下拉框选择菜单

由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示:编辑生日栏的【年】或者【月】,之前保存的具体的【日】就不显示啦,产品说不管编辑哪个数据,其他数据不变;然后自...

Vue键盘事件用法总结

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件
键盘事件<!DOCTYPE html><html><head> <meta charset="utf-8">...

详解vue-router基本使用

路由,其实就是指向的意思,当我点击页面上的home 按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮...

Vue响应式原理详解

Vue 嘴显著的特性之一便是响应式系统(reactivity system),模型层(model)只是普通JavaScript对象,修改它则更新视图(view)。Vue 响应式系统的底层细节如何追踪变化把一个普通的JavaSc...

vue动态生成dom并且自动绑定事件

用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。
html:<di...

JavaScript实现前端分页控件

现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据。前端分页多是用ajax请求数据(其他方式也有比如手动构造表单...

Vue.js仿Metronic高级表格(二)数据渲染

上篇使用Vue.js制作仿Metronic高级表格(一)静态设计介绍了需求、原型设计以及静态页面实现,这篇讲解如何使用Vue渲染数据,实现动态展示。
表格数据
先定义一个数组来保存所有数...

纯JS实现图片验证码功能并兼容IE6-8(推荐)

最近要搞一个图片验证码功能,但是又不想自己写后台代码。于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美。不过后面接到说...

详解vue表单验证组件 v-verify-plugin

verifygithub:https://github.com/liuyinglong/verify
npm:https://www.npmjs.com/package/vue-verify-plugininstallnpm install vue-verify-pluginusehtml
<div> <div>...

Angular2自定义分页组件

在项目中,前端传给后台的参数有:pageSize:每页的条数 pageNo:当前页码 比如当前是第1页,每页20条,则后台返回第1页的20条记录(sql应该是用limit去获取分页数据)同时,后台接口还会返回...

angular-cli修改端口号【angular2】

找到node_modules/angular-cli/lib/config/schema.json default值就是默认的端口"serve": { "description": "Properties to be passed to the serve command", "type": "ob...

bootstrap日期控件问题(双日期、清空等问题解决)

bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架。在项目开发中,我们使用它的日期控件确实遇到了一些问题:    1.日期控件后面两个图标点击触发失效 ...

Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器

原教程:http://cn.vuejs.org/guide/instance.htmlhttp://cn.vuejs.org/guide/syntax.html本博文是在原教程的基础上加上实例,并尝试说明的更详细。(十)Vue实例的生命周期如图:(我...

微信小程序页面传值实例分析

微信小程序页面传值实例分析最近组里开发小程序,遇到了一个前端亘古不变的话题:页面传值
刚开始使用路径传参解决,但是众所周知:各浏览器HTTP Get请求URL最大长度并不相同,几类常...

返回顶部
顶部