文档章节

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

皇上洗碗
 皇上洗碗
发布于 2017/05/03 14:18
字数 242
阅读 25
收藏 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
微信小程序 input占位符在安卓机上的坑

在做注册页面登录页面的时候,没有注意到这个问题,后来需要设置占位符颜色,就设置了 结果测试在用安卓机测试的时候发现了这个瑕疵,虽然一脸懵逼,以为是安卓机出现这种情况是偶然的, 于是...

leeolady
11/28
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
凡信(超仿微信Android版)开源了,内有源码下载

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

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

没有更多内容

加载失败,请刷新页面

加载更多

Netty handle方法周期 (四)

写了一个练习之后,发现自定义的助手类每次肯定是必须的,对于不同的业务逻辑需求,会写相对应的逻辑 最简单的查看Handle生命周期的方式,就是重写上级方法,看名字差不多应该可以知道方法的作用 ...

_大侠__
6分钟前
0
0
vue主动刷新页面及列表数据删除后的刷新实例

1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者...

前端小攻略
16分钟前
1
0
闲话高并发的那些神话,看京东架构师如何把它拉下神坛

高并发也算是这几年的热门词汇了,尤其在互联网圈,开口不聊个高并发问题,都不好意思出门。高并发有那么邪乎吗?动不动就千万并发、亿级流量,听上去的确挺吓人。但仔细想想,这么大的并发与...

James-
22分钟前
3
0
Emacs 系列:让我们拥抱 Emacs 和 org 模式

导读 我必须承认,在使用了几十年的 vim 后, 我被 Emacs 吸引了。长期以来,我一直对如何组织安排事情感到沮丧。我也有用过 GTD 和 ZTD 之类的方法,但是像邮件或是大型文件这样的事务真的很...

问题终结者
23分钟前
3
0
解析Node.js通过axios实现网络请求

本次给大家分享一篇node.js通过axios实现网络请求的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 1、使用Npm 下载axios n...

前端攻城老湿
36分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部