弹窗
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>
网页效果如下:
onmousemove事件
当鼠标经过时触发事件
实例
(1)在html的<head>
里面添加<style>
代码
网页执行效果如下图: