文档章节

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

皇上洗碗
 皇上洗碗
发布于 2017/05/03 14:18
字数 242
阅读 18
收藏 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
博文 153
码字总数 86112
作品 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
前端开发在IOS上元素active状态无法触发问题

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

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

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

极分享社区
2016/04/01
416
3
测试用例设计-web登录测试

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

iBazinga
2016/09/22
92
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

获取多个集合列表的笛卡尔积

获取多个集合笛卡尔积 电商中典型业务场景:商品搜索 单属性属性值之间为并查询 不同属性的属性值之间查询为与查询 import java.util.ArrayList;import java.util.List;/** * Created w...

键走偏锋
15分钟前
0
0
echarts 迁移地图 控制鼠标缩放大小比例

在网上找了好久没有找到解决方式,还是重新看了一下文档,终于找到的解决方案, zoom:1, //默认显示级别 scaleLimit:{min:1,max:3}, // 缩放级别 echarts 文档-配置项链接 http://echarts.b...

心驰
18分钟前
0
0
Boot2Docker ISO is out-of-date,

Boot2Docker ISO is out-of-date, downloading the latest release. 使用docker-machine时无法更新Boot2Docker ISO导致创建vm machine失败 解决方法:关闭网络,创建好之后再开启...

writeademo
26分钟前
0
0
在 Tomcat 中设置 Tapestry 框架的 html 热加载

如果开发中使用到了 Tapestry 这个框架,如果事先没有设置过的话,开发的时候 html 是不会热加载的,也就是说修改了 html 文件,不能刷新浏览器后立马看到修改完的效果,必须先重新启动应用服...

LeoXu
48分钟前
0
0
【微服务】开启巨石应用到微服务的探索

背景 在过去的一年时间里,我一直在从事一件事情,将现有的单体应用(巨石应用)向微服务改造。 接下来,将持续整理一些在微服务路上的学习与成长。 为什么要做微服务 单体应用,开发、部署简...

艳沐石
58分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部