文档章节

MUI登录注册按钮颜色切换变色

皇上洗碗
 皇上洗碗
发布于 2017/05/03 14:18
字数 242
阅读 17
收藏 0
点赞 0
评论 0

MUI登录注册按钮颜色切换变色

CSS

.log {

width: 100%;

color: white;

margin-top: 42px;

background: #999999;

border-radius: 4px;

}

 

.logblue {

width: 100%;

color: #ddd;

margin-top: 42px;

background: #03ceb9;

border-radius: 4px;

}

HTML

<form class="mui-input-group" action="">

    <div class="mui-input-row tel">

        <label style=""><span class="mui-icon iconfont icon-name"></span></label>

        <input type="text" class="mui-input-clear tel" placeholder="请输入手机号" id="userphone">

    </div>

    <div class="mui-input-row password">

        <label style=""><span class="mui-icon iconfont icon-dunpai"></span></label>

        <input type="password" placeholder="请输入登录密码" class="mui-input-password mui-input-clear"id="password">

    </div>

    <div class="mui-button-row">

        <a type="button" class="mui-btn next-step reg">立即注册</a>

        <a type="button" class="mui-btn next-step forget">忘记密码</a>

    </div>

    <div class="mui-button-row">

        <button type="submit" class="mui-btn log" id="login">登录</button>

    </div>

</form>

JS改变class来实现交互效果

mui("body").on('input','#password',function(){

    var pwd = document.getElementById('password').value;

    var next = document.getElementById("login");

    if(pwd.length > 2){

        next.className = 'mui-btn logblue';

    }else{

        next.className = 'mui-btn log';

    }

});

这里只是简单的判断,还可以用其他的判断条件来进行判断,例如修改密码的时候,可以判断两次输入的是否一致

看效果

 

© 著作权归作者所有

共有 人打赏支持
皇上洗碗
粉丝 3
博文 149
码字总数 84081
作品 0
浦东
程序员
2017.12.5-学习笔记:前端零碎知识点整理复习

前言:最近写了一个后台管理系统的页面和一个移动端商城的页面,后台用了bootstrap框架,移动端用了mui框架。这里整理一下零零碎碎的知识点,或许就有你需要的。 pc端 1.bootstrap 中容器 co...

演员小新 ⋅ 2017/12/05 ⋅ 0

iOS NSNotificationCenter(广播)的介绍及使用

1.什么时候广播? NSNotificationCenter,可以形象的理解成广播,广播是一种通知模式,特点是一对多,我们通过类似建立广播的模式来告诉对象,统一来执行某项任务,这里举一个更为具体的例子...

JoshSone ⋅ 2016/11/12 ⋅ 0

前端开发在IOS上元素active状态无法触发问题

###需求: 按钮在点击时变色,给用户反馈; 手指离开屏幕后按钮颜色变回之前的颜色; ###问题: 使用css active状态来实现上述需求;发现在浏览器和Android手机上效果都ok。但是IOS上死活不行...

干煸小黄鱼儿 ⋅ 2015/08/27 ⋅ 0

凡信(超仿微信Android版)开源了,内有源码下载

本项目的IM通信部分是基于 环信即时通讯云 的SDK开发的。对于个人开发者或者小企业来说,做IM用第三方的也是一种趋势吧,毕竟自己整一套可供运营使用的IM系统几乎是不切实际的(技术门槛和维...

极分享社区 ⋅ 2016/04/01 ⋅ 3

测试用例设计-web登录测试

页面描述 web登录页面:有两个文本框,一个提交按钮(注册、忘记密码等按钮) 用例设计 【功能测试(Function test) 0.什么都不输入,点击提交按钮,看提示信息。(非空检查) 1.输入正确的用户...

iBazinga ⋅ 2016/09/22 ⋅ 0

仿唱吧UI效果

这几天想放开歌喉 唱歌 下了唱吧app,发现里面的交互效果 挺好玩的,突然就想写出来 (可能这就是本能吧) 左侧是本地效果,图二是唱吧效果 这里写代码片 这里写图片描述 这里写图片描述 这里写图...

越长越圆 ⋅ 02/24 ⋅ 0

51NOD 1445 变色DNA(最短路)

有一只特别的狼,它在每个夜晚会进行变色,研究发现它可以变成N种颜色之一,将这些颜色标号为0,1,2…N-1。研究发现这只狼的基因中存在一个变色矩阵,记为colormap,如果colormap[i][j]=’Y’...

blue_kid ⋅ 2017/12/02 ⋅ 0

HBuilder 入门(5) 编写一个登录页面 - Ajax交互

使用AJAX方式,页面不会因为刷新而现实大白页。 交互这部分可以分成两个部分:服务器端和客户端。 服务端以Java语言为例子(因为我只做过Java的)。其实 c#或者php等语言实现起来也都是基本一...

chenzl0723 ⋅ 2017/12/13 ⋅ 0

jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个...

iSea ⋅ 2012/07/23 ⋅ 0

jQuery选择器大全(48个代码片段+21幅图演示)-转http://www.cnblogs.com/keepfool/archive/2012/06/02/2532203.html

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人...

未来十年 ⋅ 2012/08/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

线程池

一、线程池:提供了一个线程队列,队列中保存着所有等待状态的线程。避免了创建与销毁额外开销,提高了响应的速度。 二、线程池的体系结构: java.util.concurrent.Executor : 负责线程的使用...

stars永恒 ⋅ 14分钟前 ⋅ 0

你值5K还是15K?实战案例,测测你的分析功力

本文源自陈老师遇到的真实案例。 老板说:“我们今年准备参加展会,做一年。以前我没参加过,没关系,这里有一份展会数据,你回去分析下哪些有价值,后边组织的时候有个指导”。现在你收到任...

加米谷大数据 ⋅ 16分钟前 ⋅ 0

中文转英文功能

package com.sysware.task.util;import net.sourceforge.pinyin4j.PinyinHelper;import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;import net.sourceforge.pinyin4j.for......

AK灬 ⋅ 17分钟前 ⋅ 0

JNI Java层类关联C/C++层的类

Android开发时,因为要实现某某功能,需要集成算法公司的算法库(so库),这就需要自己编写JNI。 通常这些库提供的接口可以概况成1、初始化 2、算法处理 3、释放 4、打印版本号 初始化后会返...

国仔饼 ⋅ 20分钟前 ⋅ 0

maven下载jar包改为阿里云的maven库

一:修改maven安装路径中conf文件夹下的setting.xml文件 <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/......

夜醒者 ⋅ 21分钟前 ⋅ 0

电商用户行为分析大数据平台相关系列10-基础数据结构分析

电商用户行为分析大数据平台相关系列1-环境介绍 电商用户行为分析大数据平台相关系列2-HADOOP环境搭建 电商用户行为分析大数据平台相关系列3-HIVE安装 电商用户行为分析大数据平台相关系列4...

xiaomin0322 ⋅ 22分钟前 ⋅ 0

使用readLine()方法遇到的坑

下午玩 TCP/IP 的 Socket 通信时,使用 BufferedReader 的 readLine() 遇到了一个坑,现在终于解决了,特此记录下来。 程序很简单,客户段从控制台读取用户输入,然后发送至服务器端,主要代...

孟飞阳 ⋅ 22分钟前 ⋅ 0

基于Hadoop集群的Hive安装配置(Derby数据库)

Hive是一个数据仓库基础工具在Hadoop中用来处理结构化数据,提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运行(具体的Hive架构大家自行搜索)。接下来主要讲下Hadoop集群下...

海岸线的曙光 ⋅ 23分钟前 ⋅ 0

CoreOS裸机iso安装和相关配置

裸机通过iso安装CoreOS,个人趟了很多坑,以下就是完整的从零开始部署和配置的过程,希望对大家有用。 一、安装CoreOS到硬盘 1. 准备Live iso镜像,制作好usb启动盘 Live iso下载地址 2. 搭建...

ykbj ⋅ 28分钟前 ⋅ 0

jquery控制表格锁列(转)

表格已经完成后新加的需求,要实现锁表格的第一列。很多带这种效果的都是js封装的框架或者具体某种框架的组件,不适用解决当前问题。作为后端开发又实在不熟样式,搜到了一个可以用的,虽然样...

刘昌鑫 ⋅ 30分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部