js 中三元运算符的运用
外层为false,逐级向内层判断
$scope.nums=700;
$scope.result=($scope.nums>300)?($scope.nums>400)?($scope.nums>500)?($scope.nums>600)?'飞机':'高铁':'汽车':'客车':'无';
console.log($scope.result);
运算符的简单使用小例子(开关按钮效果)
一、页面结构
<div id="div1" class="open1">
<div id="div2" class="open2"></div>
</div>
二、样式
#div1{
width: 170px;
height: 100px;
border-radius: 50px;
position: relative;
}
#div2{
width: 96px;
height: 96px;
border-radius: 48px;
position: absolute;
background: white;
box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
}
.open1{
background: rgba(0,184,0,0.8);
}
.open2{
top: 1px;
right:0px;
}
.close1{
background: rgba(255,255,255,0.4);
border:3px solid rgba(0,0,0,0.15);
border-left: transparent;
}
.close2{
left: 0px;
top: 0px;
border:2px solid rgba(0,0,0,0.1);
}
三、事件方法
window.onload=function(){
var div2=document.getElementById("div2");
var div1=document.getElementById("div1");
div2.onclick=function(){
div1.className=(div1.className=="close1")?"open1":"close1";
div2.className=(div2.className=="close2")?"open2":"close2";
}
}
js 中三元运算符的运用的更多相关文章
- js中三元运算符的两种情况
一.一般情况 <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a=&q ...
- js中的运算符和条件语句
js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作. ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- JS中的运算符和JS中的分支结构
JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链 ...
- 让你彻底搞懂JS中复杂运算符==
让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...
- JS中的运算符_函数学习
js中的运算符: 算数运算符: + - * / % ++ -- 逻辑运算符: & | ! && || < > <= ...
- js中的运算符优先级顺序
js中运算符优先级从高到底的顺序: 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
- JS中的运算符 以及变量和输入输出
1.算术运算(单目运算符) + 加 .- 减.* 乘. / 除. % 取余.++ 自增.-- 自减. >>> +:有两种作用,链接字符串/加法运算,当+两边全为数字时,进行加法运算, ...
- 浅谈JS中逗号运算符的用法
阅读本文的前提是,你能区分什么是表达式,什么是语句.还有明确运算符和运算数都是些啥东西.所谓的表达式就是一个JavaScript的"短语",JavaScript的解释器可以计算它, ...
随机推荐
- Ngon 是啥
https://www.gamefromscratch.com/post/2011/07/11/So-whats-an-ngon-anyways.aspx 在 blender 里面 Add 一个 Cy ...
- Android 音乐(音效)播放方式总结
一.音效的分类 音效按照作用的不同,可以将音效分为即时音效和背景音乐.两种音效在Android中的实现技术是不同的. 主要的实现方式为:SoundPool.MediaPlayer. 区别在于,Medi ...
- GraphQL:你的容颜,十万光年
What? GraphQL 是一种类似于 SQL 的结构化查询语言,由 facebook 于2012年创造,于2015年开源.SQL 在服务端定义,GraphQL 在客户端定义,也就是说 GraphQ ...
- PHP字母数字验证码和中文验证码
1:字母数字组合的验证码 HTML代码: 验证码:<input type="text" name="code"> <img onclick=& ...
- Xamarin.Android 使用ListView绑定数据
使用ListView进行数据绑定 第一步:新建一个类,用于存储显示字段. namespace ListViewDataBIndDemo { public class Person { public i ...
- JodaTimeUtil日期处理工具类(简单、实用)
一.maven依赖 <!--joda time--> <dependency> <groupId>joda-time</groupId> <art ...
- jdk8- list操作
本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. student类 public class Student { private String age; ...
- eclipse导入Tomcat8源码
最近这段时间在学习how tomcat works这本书,需要结合书上的例子对照tomcat源码来看,需要导入tomcat的源码,所以在网上找了很多教程,结合自己遇到的问题,记录如下: 1.前期准备 ...
- Spring Boot + Spring Cloud 构建微服务系统(二):服务消费和负载(Ribbon)
使用RestTemplate调用服务 在上一篇教程中,我们是这样调用服务的,先通过 LoadBalancerClient 选取出对应的服务,然后使用 RestTemplate 进行远程调用. Load ...
- java ee期末项目相关
1.项目简介 本项目是对纸杯生产进行管理的的一个系统,从前端接收到订单,然后根据订单内容进行纸杯的生产.如下为该系统的总流程图: 1.项目系统架构图 3.系统用例图 4.ER图 主要的代码和相关文件见 ...