网页字符串的改变:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demo">
<!-- 123是不能够输出的,输出id属性为demo的js代码 -->
123
</div>
<input type="button" value="改变" onclick="change()">
</body>
<script>
//语句是JS向浏览器发出的命令,它的作用是告诉浏览器要做什么
// document.getElementById("demo").innerHTML = "hi,js!";
//函数(JavaScript严格区分大小写)
function change(){
document.getElementById("demo").innerHTML = "hi,js!";
}
</script>
</html>
当点击 “改变” 按钮的时候,字符串会发生改变:
弹出网页警示框:
方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="改变" onclick="javascript : alert('欢迎你');">
</body>
</html>
方法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点击我" onclick="change()");>
<script>
function change (){
javascript:alert('欢迎进入 JavaScript 页面');
}
</script>
</body>
</html>
实战举例:
请编写代码,使弹出的网页一开始提示欢迎信息,然后网页中显示出两个按钮,其中一个按钮的作用是:点击按钮后网页提示是否删除的信息,点击确定则提示删除成功,否则提示删除失败。
另一个按钮的作用是:点击按钮后弹出文本框的输入页面(默认一个名字),当点击确定的时候,提示欢迎信息,输入内容为空的时候提示并进行重新输入,否则提示 已取消输入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点击我1" onclick="show_on()");>
<input type="button" value="点击我2" onclick="show_prom()");>
<script>
alert('欢迎');//文本警示框
function show_on(){
var result = confirm("是否删除");//文本确认框
if(result){
alert("删除成功");
}
else {
alert("删除失败");
}
}
function show_prom(){
var value=prompt("请输入你的名字","马云");//马云设置为默认值,可以在弹出的文本框中修改
if(value==null)//点击取消按钮的时候
alert("已取消输入");
else if(value==""){
alert("输入内容为空,请重新输入");
show_prom()
}
else
alert("你好"+value);
}
</script>
</body>
</html>
实战举例:
根据输入的成绩类型,提示相应的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点击我输入成绩" onclick="choise()");>
<script>
function choise(){
var value=prompt("请输入你的成绩类型","B");
switch(value){
case 'A':alert("高手,佩服"); break;
case 'B':alert("不错哦"); break;
case 'C':alert("勉强及格"); break;
case 'D':alert("恭喜你,又挂了"); break;
default:
alert("抱歉,你输入的成绩类型有误,请重新输入");
choise();
}
}
</script>
</body>
</html>