JavaScript的学习，打卡（1）
描述：
一共5个小程序案例。对JavaScript的学习。。。
案例1——界面书写内容
document.write("书写的内容");
<!DOCTYPE html>
<html>
<head>
<title>JavaScript01</title>
</head>
<body>
<script>
document.write("<h1>您好！</h1>");
</script>
</body>
</html>
案例2——单击事件
alert("提示信息");
<!DOCTYPE html>
<html>
<head>
<title>JavaScript02</title>
</head>
<body>
<button onclick="alert('欢迎来到我的世界~')">启动</button>
</body>
</html>
案例3——内容改变
根据ID属性获取元素，改变内容。。。
效果展示：
代码演示：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript03</title>
</head>
<body>
<h1 id="title">JavaScript学习</h1>
<button onclick="update()">点击我，改变标题的内容</button>
<button onclick="yuan()">点击我，还原内容</button>
<script>
function update(){
var x = document.getElementById("title");
x.innerHTML = "好好学习，天天向上~";
}
function yuan(){
var x = document.getElementById("title");
x.innerHTML = "JavaScript学习";
}
</script>
</body>
</html>
案例4——改变样式
获取元素，通过单击事件，改变元素的CSS样式
效果展示：
原样式：
改变后的样式：
代码演示：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript04</title>
</head>
<body>
<h1 id="title">JavaScript学习</h1>
<button onclick="update()">点击我，改变标题的颜色</button>
<button onclick="yuan()">点击我，还原标题的颜色</button>
<button onclick="updateFontSize()">点击我，放大字体</button>
<button onclick="updateFontFamily()">点击我，改变字体的背景</button>
<button onclick="updateFont1()">点击我，改变字体为白色</button>
<script>
var x = document.getElementById("title");
function update(){
x.style.color = "red";
}
function yuan(){
x.style.color = "black";
}
function updateFontSize(){
x.style.fontSize = '50px';
}
function updateFontFamily(){
x.style.backgroundColor = 'blue';
}
function updateFont1(){
x.style.color = "white";
}
</script>
</body>
</html>
案例5——加法小程序
通过单击事件，实现加法小程序，计算两个数值的结果
效果展示：
代码演示：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript05</title>
</head>
<body>
<h1 id="title">JavaScript学习</h1>
<input type="number" id="one">+<input type="number" id="two">=<span id="result"></span>
<br>
<button onclick="update()">计算</button>
<script>
function update(){
var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
var result = document.getElementById("result");
result.innerHTML = parseInt(one)+parseInt(two);
}
</script>
</body>
</html>