文档章节

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

皇上洗碗
 皇上洗碗
发布于 2017/05/03 14:18
字数 242
阅读 20
收藏 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
博文 154
码字总数 86252
作品 0
浦东
程序员
2017.12.5-学习笔记:前端零碎知识点整理复习

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

演员小新
2017/12/05
0
0
iOS NSNotificationCenter(广播)的介绍及使用

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

JoshSone
2016/11/12
20
0
Reading:一款不错的Material Desgin风格的Kotlin版本的开源APP

Reading https://github.com/Hankkin/Reading 简介 很久不见,重新拾起博客吧,今天分享一个开源APP-Reading,项目的初衷是因为自己平时翻文章,但是公众号又经常忘记看,自己索性搞一个APP吧...

Hankkinn
08/22
0
0
前端开发在IOS上元素active状态无法触发问题

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

干煸小黄鱼儿
2015/08/27
345
0
凡信(超仿微信Android版)开源了,内有源码下载

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

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

没有更多内容

加载失败,请刷新页面

加载更多

Windows小技巧 – Win+R提高Windows使用效率

追求效率的朋友都需要一款顺手的快速启动工具,Win 平台上有键盘流的RunZ、Listary、ALTRun、Launchy、Wox 和图标流的 Fences、Rolan、 WinLaunch 等,而 Mac 上也有 Alfred、Spotlight。 而...

QQZZFT
6分钟前
1
0
Android 移植ffmpeg报错:"atof" referenced by "libavformat.so"

cannot locate symbol "atof" referenced by "libavformat-57.so"... 原因:android的stdlib.h中atof是内联的, 外部模块不能直接使用。跟android版本有关。 解决办法:将所有的atof改成str...

她叫我小渝
20分钟前
1
0
Java并发编程:volatile关键字解析

volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在Java 5之后,volatile关键字才得以重获生...

engeue
36分钟前
1
0
php-fpm配置文件详解

第一部分:FPM 配置 参数          | 说明 -p            | 命令行中动态修改--prefix   ;include=etc/fpm.d/*.conf  | 用于包含一个或多个文件,如果glob(3)存在(...

bengozhong
38分钟前
1
0
Django允许外部ip访问

1、关闭防火墙 service iptables stop 2、设置django 开启django时,使用0.0.0.0:xxxx,作为ip和端口例如: python manage.py runserver 0.0.0.0:8000 3、在settings里修改ALLOWED_HOSTS = [......

MichaelShu
42分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部