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的解释器可以计算它, ...
随机推荐
- 人工智能必须要知道的语义分割模型:DeepLabv3+
图像分割是计算机视觉中除了分类和检测外的另一项基本任务,它意味着要将图片根据内容分割成不同的块.相比图像分类和检测,分割是一项更精细的工作,因为需要对每个像素点分类,如下图的街景分割,由于对每个像素点 ...
- javascript从作用域到闭包-笔记
读<你不知道的javascript>一书做个笔记;编译原理: js是一门编译型的语言,与传统编译语言类似,传统编译的过程分为三个阶段 ; 1. 分词/词法分析; 2.解析/语 ...
- Java 虚拟机的内存结构
Java虚拟机运行时数据区 整个程序执行过程中,JVM会用一段空间来存储程序执行期间需要用到的数据和相关信息,这段空间一般被称作为Runtime Data Area(运行时数据区),也就是我们常说的J ...
- typescript handbook 学习笔记3
概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...
- [Swift]LaunchScreen.storyboard如何跳转到到Main.storyboard
在加载App时,首先读取[LaunchScreen.storyboard]中的内容, 在App加载到内存之后,自动读取[Main.storyboard]中的初始视图控制器, 用于替换原来的[Launc ...
- SQL SERVER 用sql语句将一列数据拼接成一个字符串
执行 SELECT userid FROM userinfo 得到 1 2 3 4 如果要得到 1,2,3,4 执行方案 DECLARE @STR NVARCHAR(8000) SELEC ...
- Xamarin.Android 无法检索到 Resource 问题
错误提示:当前上下文中不存在名称"Resource" 解决方法: 1.看是否有其他错误,如果有其他错误优先解决.(其他错误导致无法感知到Resource) 2.重新生成解决方案.( ...
- CentOS 安装 kafka
首先确保JDK已正确安装并设置好环境变量 安装Zookeeper 到官网下载: https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/ zooke ...
- tomcat8 性能优化
一.编辑配置文件:vim /opt/tomcat/conf/server.xml打开默认被注释的连接池配置:默认值: <!-- <Executor name="tomcatThr ...
- github总结(1)--怎样创建一个新的仓库
第一步:登录账号,进入github,创建一个新的空仓库 第二步:打开电脑上已经安装好的git-bash,切换至项目所在本地目录 第三步:创建本地仓库及提交文件到本地仓库(用windows命令行或者gi ...