码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript之函数

时间:2019-01-06 18:25:28      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:fun   ima   doctype   color   时间   inf   alert   调用   function   

一.函数初认识

 1.函数类型
     function(){} -->匿名函数
     function 函数名(){}-->命名函数
 2.函数不调用就不会执行
 3.函数的调用方式
    ①.事件调用
    ②.直接调用


二.函数调用的两种方式

第一种事件调用之:通过匿名函数进行事件调用

li[i].onclick=function()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的两种调用方式</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script type="text/javascript">
  var li=document.getElementsByTagName(li);
  for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
          alert(阔落要加冰,学习要走心);
      }    
  }
</script>

点击效果:

技术分享图片

第一种时间调用之:通过命名函数进行事件调用:

li[i].onclick=onclickMe;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的两种调用方式</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script type="text/javascript">
  var li=document.getElementsByTagName(li);
  for(var i=0;i<li.length;i++){
     li[i].onclick=onclickMe;
     function onclickMe(){
         alert(阔落要加冰,学习要走心);
     }
  }
</script>

点击效果:

 技术分享图片

第二种直接调用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的两种调用方式</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script type="text/javascript">
  var li=document.getElementsByTagName(li);
  for(var i=0;i<li.length;i++){
    li[i].onclick=onclickMe();
  }
  function onclickMe(){
         alert(阔落要加冰,爱我要走心);
     }
</script>

效果(直接出现三次显示,无需点击,这就是直接调用,只要格式正确,直接执行函数体代码):

技术分享图片

JavaScript之函数

标签:fun   ima   doctype   color   时间   inf   alert   调用   function   

原文地址:https://www.cnblogs.com/zjm1999/p/10229237.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!