{welcome to JS} 第一个web程序

最新推荐文章于 2024-07-19 13:24:16 发布

lingle77

最新推荐文章于 2024-07-19 13:24:16 发布

阅读量802

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lingle77/article/details/48572525

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.用try和catch处理错误

welcome10.html

<!DOCTYPE html>
<html>
<head>
<title>Square root</title>
<script>
    window.onload = initAll;
    function initAll(){
        var ans = prompt("Please enter a number bigger than 0: ")
        // 如果不加【,""】，则输入框会出现undefined
        try{
          if (!ans || isNaN(ans) || ans<0){
          throw new Error("Not a valid number.");
          }
          //!ans用于判断是否输入，isNaN（Not a Number）用于判断输入的是否是一个数（无效则返回true）
          alert("The square root of " + ans + " is " + Math.sqrt(ans));
        }
        catch(errMsg){
          alert(errMsg.message);
        }
    }
</script>
</head>
<body>
</body>
</html>

运行结果

换个好看的浏览器

2.制作BINGO卡片

welcome11.html

<!DOCTYPE html>
<html>
<head>
     <title>Make my BINGO card</title>
     <link rel="stylesheet" href="script11.css">
     <!-- rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表 -->
     <script src="script11.js"></script>
</head>
<body>
<h1>Create A BINGO Card</h1>
<table> 
<!-- 在网页上显示表格数据 -->
    <tr> 
    <!-- 在表格中开始一行 -->
       <th>B</th> 
       <!-- 包含表格中每个单元格 -->
       <th>I</th>
       <th>N</th>
       <th>G</th>
       <th>O</th>
    </tr>
    <tr>
       <td id="s0"> </td>
       <td id="s5"> </td>
       <td id="s10"> </td>
       <td id="s14"> </td>
       <td id="s19"> </td>
    </tr>
    <tr>
       <td id="s1"> </td>
       <td id="s6"> </td>
       <td id="s11"> </td>
       <td id="s15"> </td>
       <td id="s20"> </td>
    </tr>
    <tr>
       <td id="s2"> </td>
       <td id="s7"> </td>
       <td id="free">Free</td>
       <td id="s16"> </td>
       <td id="s21"> </td>
    </tr>
    <tr>
       <td id="s3"> </td>
       <td id="s8"> </td>
       <td id="s12"> </td>
       <td id="s17"> </td>
       <td id="s22"> </td>
    </tr>    
    <tr>
       <td id="s4"> </td>
       <td id="s9"> </td>
       <td id="s13"> </td>
       <td id="s18"> </td>
       <td id="s23"> </td>
    </tr>
</table>
<p><a href="welcome11.html" id="reload">Click here</a> to creat a new card</p>
<!-- 网页设计中定义段落的标记，<p>称为开始标记，</p>称为结束标记 -->
</body>
</html>

script11.css

body{
	background-color:white;
	color:black;
	font-size:20px;
	font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
}

h1,th{
	font-family:Georgia,"Times new Roman",Times,serif;
}

h1{
	font-size:28px;
}

table{
	border-collapse:collapse;
}

th,td{
	padding:10px;
	border:2px #666 solid;
	text-align:center;
	width:20%;
}

#free, .pickedBG{
	background-color:#f66;
}

.winningBG{
	background-image:url(images/redFlash.gif);
}

script11.js

window.onload = initAll;

function initAll(){
	for (var i=0;i<24;i++){
	var newNum = Math.floor(Math.random()*75)+1;

	document.getElementById("s"+i).innerHTML = newNum;
// innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
// 如：<div id="aa">这是内容</div> ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；
// 也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容。
	}
}

运行结果

学习心得

迷迷糊糊的敲完了代码，还是有挺多不能理解的东西

~  为空格占位符

~ <table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

lingle77

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
{welcome to JS} 第一个web程序

1.用try和case处理错误welcome10.htmlSquare root window.onload = initAll; function initAll(){ var ans = prompt("Please enter a number bigger than 0: ") // 如果不加【,""】，则输入框会出现un
复制链接

扫一扫

专栏目录