JavaScript------Learning咿咿呀呀-CSDN博客

本文链接：https://blog.csdn.net/m0_47010003/article/details/110206266

弹窗

1.alert弹窗

这是一个只能点击确定按钮的弹窗

2.confirm弹框

这是一个你可以点击确定或取消的弹框
confirm方法与alert不同，他的返回值是boolean
点击“确定”时返回true，点击“取消”返回false

在html页面的<body>里加入以下代码

<script type="text/javascript">
      var r = confirm("确定删除吗？");
      if (r) {
          alert("执行删除！");
      }
      else {
          alert("撤销删除！");
      }
  </script>

3.prompt弹框

这是一个你可以输入文本内容的弹窗
第一个参数是提示信息，第二个参数是用户输入的默认值
当你点击确定的时候，返回用户输入的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var r = prompt("请输入一个数");
        if (r>0) {
            alert("正数");
        }
        else {
            alert("非正数");
        }
    </script>
</body>
</html>

网页执行效果
在这里插入图片描述
点击确定按钮后出现如下提示框：

事件

事件名称	描述
onchange	HTML元素内容改变
onclick	用户点击HTML元素
onmouseover	用户将鼠标移入一个HTML元素中
onmousemove	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeyup	键盘
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载
onsubmit	表单提交

1.onclick事件关联JS代码

运行代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">       
    </script>
    <div>
    	  <!--事件关联JS代码-->
        <button onclick="alert('hello')">普通按钮</button>
    </div>
</body>
</html>

网页效果如图：
在这里插入图片描述

2.onclick事件关联函数

在

<script type="text/javascript">
</script>

里面输入函数

代码如下：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript"> 
        function fff(a,b) {
            return a + b;
        }
        var sum = fff(100, 200);
    </script>
    <div>
        <!--事件关联函数-->
       
        <button onclick="alert('100+200的值为：'+sum )">点我计算结果</button>
    </div>
</body>
</html>