初入JavaScript之JS的简单运用--渐入HTML5
初入JavaScript之JS的简单运用--渐入HTML5
关键代码介绍
document.write()
document.write()方法可向文档写入 HTML 表达式或 JavaScript 代码。
例如：
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
得到以下结果
当document.write("Hello World!")换成document.write("<h1 style='color:red'>Hello World!</h1>")
得到以下结果
使用循环输出直角三角形图案
代码
因为很简单，直接上代码，所有代码可在我GitHub上找到，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用循环输出直角三角形图案</title>
<script type="text/javascript">
function test() {
for(var i=0; i<5; i++){
for(var j=0; j<=i; j++){
document.write("*");
}
document.write("<br/>");
}
}
test();
</script>
</head>
<body>
</body>
</html>
效果图
使用循环输出斜边在左侧的指教三角形图案
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用循环输出斜边在左侧的指教三角形图案</title>
<script type="text/javascript">
function test() {
for(var i=0; i<5; i++){
for(var j=4; j>i; j--){
document.write(" ");
}
for(var k=0; k<=i; k++){
document.write("*");
}
document.write("<br/>");
}
}
test()
</script>
</head>
<body>
</body>
</html>
效果图
使用循环输出等腰三角形图案
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用循环输出等腰三角形图案</title>
<script type="text/javascript">
function test() {
for(var i=0; i<5; i++){
for(var j=4; j>i; j--){
document.write(" ");
}
for(var k=0; k<=i; k++){
document.write("*");
}
for(var l=0; l<i; l++){
document.write("*");
}
document.write("<br/>");
}
}
test()
</script>
</head>
<body>
</body>
</html>
效果图
使用循环输出100以内除7的倍数之外的整数
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用循环输出100以内除7的倍数之外的整数</title>
<script type="text/javascript">
function test() {
var j = 0
for(var i=1; i<=100; i++){
if(i % 7 != 0){
document.write(i + " ");
j += 1;
if(j % 10 == 0){
document.write("<br/>");
}
}
}
}
test()
</script>
</head>
<body>
</body>
</html>
效果图
锯齿数组的简单使用
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用锯齿数组</title>
<script type="text/javascript">
var subject = [["SQL SERVER", "C# OOP"], ["WEB FORM", "HTML/CSS/JAVASCRIPT", "ORACLE"], ["ASP.NET MVC", "LINQ"]];
document.write("subject数组的长度：" + subject.length.toString() + "<br/>");
for (var i=0; i<subject.length; i++)
{
document.write("subject数组对象的第" + i.toString() + "个元素是另一个数组.这个小数组的长度：" + subject[i].length.toString() + "<br/>");
for (var j=0; j<subject[i].length; j++)
{
document.write("第" + j.toString() + "个元素：" + subject[i][j] + "<br\>");
}
document.write("<hr/>");
}
</script>
</head>
<body>
</body>
</html>
效果图
在网页中显示日期时间
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在网页中显示日期时间</title>
<script>
var d = new Date();
document.write("今天日期是：" + d.getFullYear().toString() + "年");
document.write((d.getMonth() + 1).toString() + "月");
document.write(d.getDate().toString() + "日");
switch (d.getDay()) {
case 0:document.write(" 星期日"); break;
case 1:document.write(" 星期一"); break;
case 2:document.write(" 星期二"); break;
case 3:document.write(" 星期三"); break;
case 4:document.write(" 星期四"); break;
case 5:document.write(" 星期五"); break;
case 6:document.write(" 星期六"); break;
}
document.write(" 现在时间是：" + d.getHours().toString() + "时");
document.write(d.getMinutes().toString() + "分");
document.write(d.getSeconds().toString() + "秒");
</script>
</head>
<body>
</body>
</html>
效果图
每一次刷新的时间，都会是当前的时间
