服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 原生js中运算符及流程控制示例详解

原生js中运算符及流程控制示例详解

2021-12-27 15:59meichaoWen js教程

这篇文章主要给大家介绍了关于原生js中运算符及流程控制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

运算符

算数:+ 加、- 减、* 乘、/ 除、% 求模

赋值:=、+=、-=、*=、/=、%=

关系:>、<、 >=、 <=、 ==、 ===、 !=、 !==

逻辑:||或、&&与、!否

实例1、求模

?
1
2
3
4
5
window.onload = function(){
 alert(0%2) //0
 alert(1%2) //1
 alert(2%2) //0
}

实例2、隔行变色

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
 <ol>
  <li>取模:就是求余数</li>
  <li></li>
  <li></li>
 </ol>
 <script>
  window.onload = function(){
   var aLi = document.getElementsByTagName('li');
   for(var i = 0; i < aLi.length; i++){
    if(i % 2 == 0){
     aLi[i].style.background = 'red'
    }else{
     aLi[i].style.background = 'green'
    }
   }
  }
 </script>
</body>

实例3、秒转分钟

?
1
2
3
4
5
6
<script>
 window.onload = function () {
  var a = 1568
  console.log(parseInt(a / 60) + '分' + a % 60 + '秒')
 }
</script>

实例4、+=

?
1
2
3
a = a + 1;
a+=1
a++

程序流程控制

switch

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
 window.onload = function () {
  var name = 'abc';
  var sex = ''
  switch (sex) {
   case '男':
    alert(name + '先生,你好');
    break;
   case '女':
    alert(name + '女士,你好');
    break;
   default:
    alert(name + '你好')
  }
 }
</script>

break、continue

?
1
2
3
4
5
6
7
8
9
window.onload = function(){
 for(var i = 0; i < 5; i++){
  if(i == 3){
   //break; //整个循环中断了
   continue; //本次循环中断了
  }
  alert(i)
 }
}

什么是真、什么是假

?
1
2
3
4
5
6
7
8
9
10
window.onload = function(){
 //真:true、非0数值、非空字符串('false'或‘ ')、非空对象
 //假: false、数值0、空字符串、空对象(null)、undefined
 var a = 'false'
 if(a){
  alert('真的')
 }else{
  alert('假的')
 }
}

总结

到此这篇关于原生js中运算符及流程控制的文章就介绍到这了,更多相关原生js运算符及流程控制内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/meichaoWen/article/details/112152681

延伸 · 阅读

精彩推荐
  • js教程JavaScript实现瀑布流布局的3种方式

    JavaScript实现瀑布流布局的3种方式

    这篇文章主要为大家详细介绍了JavaScript实现瀑布流布局的3种方式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    杏子_10247272021-12-20
  • js教程微信小程序视频弹幕发送功能的实现

    微信小程序视频弹幕发送功能的实现

    这篇文章主要介绍了微信小程序视频弹幕发送功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的...

    保护我方豆豆4822021-12-21
  • js教程mapboxgl实现带箭头轨迹线的代码

    mapboxgl实现带箭头轨迹线的代码

    这篇文章主要介绍了mapboxgl实现带箭头轨迹线的代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    GIS兵器库9122021-12-27
  • js教程微信小程序自定义支持图片的弹窗

    微信小程序自定义支持图片的弹窗

    这篇文章主要为大家详细介绍了微信小程序自定义支持图片的弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    岁末Zzz8162021-12-15
  • js教程如何在JavaScript中正确处理变量

    如何在JavaScript中正确处理变量

    这篇文章主要介绍了如何在JavaScript中正确处理变量,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    疯狂的技术宅10672021-12-20
  • js教程微信小程序自定义胶囊样式

    微信小程序自定义胶囊样式

    这篇文章主要为大家详细介绍了微信小程序自定义胶囊样式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    四曦11322021-12-21
  • js教程原生js中运算符及流程控制示例详解

    原生js中运算符及流程控制示例详解

    这篇文章主要给大家介绍了关于原生js中运算符及流程控制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价...

    meichaoWen4942021-12-27
  • js教程基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    A.香辣鸡腿堡8982021-12-15