javascript函数编写+html基础

table
在网页上显示表格数据
tr
在表格中开始一行
th
表格中列的标题单元格
td
包含表格中的每个单元格
建立bingo卡片：
效果:
在这里插入图片描述
代码：

<!DOCTYPE >
<html>

<head>
<title>Make Your Own Bingo Card</title>
<link rel="stylesheet" href="script01.css">
<script src="script01.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="square0">&nbsp;</td>
<td id="square5">&nbsp;</td>
<td id="square10">&nbsp;</td>
<td id="square14">&nbsp;</td>
<td id="square19">&nbsp;</td>
</tr>
<tr>
<td id="square1">&nbsp;</td>
<td id="square6">&nbsp;</td>
<td id="square11">&nbsp;</td>
<td id="square15">&nbsp;</td>
<td id="square20">&nbsp;</td>
</tr>
<tr>
<td id="square2">&nbsp;</td>
<td id="square7">&nbsp;</td>
<td id="free">Free</td>
<td id="square16">&nbsp;</td>
<td id="square21">&nbsp;</td>
</tr>
<tr>
<td id="square3">&nbsp;</td>
<td id="square8">&nbsp;</td>
<td id="square12">&nbsp;</td>
<td id="square17">&nbsp;</td>
<td id="square22">&nbsp;</td>
</tr>
<tr>
<td id="square4">&nbsp;</td>
<td id="square9">&nbsp;</td>
<td id="square13">&nbsp;</td>
<td id="square18">&nbsp;</td>
<td id="square23">&nbsp;</td>
</tr>
</table>
<p><a href="script01.html" id="reload">Click here</a> to create a new card</p>
</body>
</html>

<script language="javascript">
function convert(num)
{
    
     var result=0; var dec="";
if(isNaN(num)){
    
     result=0; }else{
    
     if(num.length<4){
    
     result=num; }else{
    
     pos=num.indexOf(".",1); if(pos>0){
    
     dec=num.substr(pos); res=num.substr(0,pos); }else{
    
     res=num; } var tempResult="";}}}
function deal(){
    
     result.innerHTML="＆nbsp;转换结果："+convert(form1.number.value); }

</script>

script01.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);
}

js文件：

window.onload = initAll;
function initAll() {
    
    
for (var i=0; i<24; i++) {
    
    
var newNum = Math.floor(Math.random() * 75) + 1;
document.getElementById("square" + i).innerHTML = newNum;
}
}

window.onload = initAll;
。当窗口完成加载时，它调用initAll()函数。
document.getElementById(“square” + i).innerHTML = newNum;
在这里，我们将刚才获得的随机数写入表格中。我们处理的元素的id 属性是square 再拼接上i的当前值。例如，在循环的第一次迭代中，i 的值是0，所以这一行处理id 为square0 的元素。这一行将square0 对象的innerHTML 属性设置为newNum 的当前值。

上面的bingo还有重复数字，为了使得每一列无重复数字修改js代码：

window.onload = initAll;
var usedNums = new Array(76);
function initAll() {
    
    
if (document.getElementById) {
    
    
for (var i=0; i<24; i++) {
    
    
setSquare(i);
}
}
else {
    
    
	alert("Sorry, your browser doesn't support this script");
}
}
function setSquare(thisSquare) {
    
    
var currSquare = "square" + thisSquare;
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasis = colPlace[thisSquare] * 15;
var newNum;
do {
    
    
newNum = colBasis + getNewNum() + 1;
}
while (usedNums[newNum]);
usedNums[newNum] = true;
document.getElementById(currSquare).innerHTML = newNum;
}
function getNewNum() {
    
    
return Math.floor(Math.random() * 15);
}

在这里插入图片描述

以下代码实现单击click时更新bingo表:

window.onload = initAll;
var usedNums = new Array(76);
function initAll() {
    
    
if (document.getElementById) {
    
    
document.getElementById("reload").onclick = anotherCard;
newCard();
}
else {
    
    
alert("Sorry, your browser doesn't support this script");
}
}
function newCard() {
    
    
for (var i=0; i<24; i++) {
    
    
setSquare(i);
}
}
function setSquare(thisSquare) {
    
    
var currSquare = "square" + thisSquare;
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasis = colPlace[thisSquare] * 15;
var newNum;
do {
    
    
newNum = colBasis + getNewNum() + 1;
}
while (usedNums[newNum]);
usedNums[newNum] = true;
document.getElementById(currSquare).innerHTML = newNum;
}
function getNewNum() {
    
    
return Math.floor(Math.random() * 15);
}
function anotherCard() {
    
    
for (var i=1; i<usedNums.length; i++) {
    
    
usedNums[i] = false;
}
newCard();
return false;
}

在这里插入图片描述
运行成功后点击会发现动态更新了。
function anotherCard() {
for (var i=1; i<usedNums.length; i++) {
usedNums[i] = false;
}
newCard();
return false;
}
这是anotherCard()函数，当用户单击链接时会调用这个函数。它执行3 个操作：
 将usedNums[]数组中的所有元素设置为false（这样就可以重新使用所有数字）；
 调用newCard()函数（生成另一个卡片）；
 返回false 值，使浏览器不尝试加载链接的href 中指定的页面（

一些数学函数：
floor 返回小于等于当前参数的最大整数
min 返回两个参数中较小者
max 返回两个参数中较大者
pow 指数函数，第一个参数是底数，第二个参数是幂
random 返回介于0和1之间的随机数
round 返回当前参数最接近的整数，四舍五入
sqrt 平方根

数字格式化

 <script language="JavaScript">


    function formatNO(str,len){
     
      var strLen=str.length;
        for(i=0;i<len-strLen;i++){
     
      str="0"+str; } return str; }
function deal(){
     
      if(form1.str.value=="") {
     
     alert("请输入要格式化的数字！");form1.str.focus();return false;} if(isNaN(form1.str.value))
{
     
      alert("您输入的数字不正确!");form1.str.focus();return false; }
    if(form1.le.value=="") {
     
     alert("请输入格式化后的长度！");form1.le.focus();return false;}
    if(isNaN(form1.le.value)){
     
      alert("您输入的格式化的长度不正确!");form1.le.focus();return false; } form1.lastStr.value=formatNO(form1.str.value,form1.le.value); }
</script>

<input name="Submit" type="button" class="btn_grey" onClick="deal();" value="转换">

表单：

<body>
<!-- 添加文档主体内容 -->
<form name="form1"> <tr align="left" bgcolor="#FFFFFF"><td width="183" height="22" align="left">销售编号:</td><td width="298" height="22"><input name="txt_snum" type="text" id="txt_snum" title="销售编号"></td></tr><tr align="left" bgcolor="#FFFFFF"＞＜td width="183" height="22" align="left">退货数量:</td>

    <td width="298" height="22"><input name="txt_nums" type="text" id="txt_nums" title="退货数量">
    </td></tr><tr align="left" bgcolor="#FFFFFF"><td height="22" align="left">退货日期:</td><td height="22">
    <input name="txt_date" type="text" id="txt_date" title="退货日期"></td></tr><tr align="left" bgcolor="#FFFFFF"＞＜td height="22" align="left">加盟商应收退款是否对账:</td><td height="22">
    <input name="txt_fig" type="radio" value="1" checked>是<input type="radio" name="txt_fig" value="0">否</td></tr><tr align="center" bgcolor="#FFFFFF">
    <td height="22" colspan="2"><input type="submit" name="Submit" value="商品销售退货"    onClick="Mycheck(this.form)"></td></tr>
</form>

<script language="javascript">function
Mycheck(form){
     
     
        for(i=0;i<form.length;i++)
    {
     
      if(form.elements[i].value==""){
     
      alert(form.elements[i].title+"不能为空!");return false;} } }
</script>

</body>

效果:
在这里插入图片描述

javascript嵌套函数

<html>
	<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title＞嵌套函数的应用</title>
<script type="text/javascript">
 var outter=10;//定义全局变量 
 function add(number1,number2)
{
    
    //定义外部函数 
function innerAdd()
{
    
    //定义内部函数 
alert("参数的加和为："+(number1+number2+outter));//取参数的和
 } 
return innerAdd();//调用内部函数
} 
</script>
 </head>
  <body>
	  <script type="text/javascript">add(10,10);//调用外部函数 
	  </script>
  </body>

</body>
</html>

结果:
在这里插入图片描述
&内部函数innerAdd获取了外部函数的参数number1、number2以及全局变量outter的值，然后在内部类中将这3个变量相加，并返回这3个变量的和，最后在外部函数中调用了内部函数。可以看到嵌套函数在JavaScript语言中非常强大，但使用嵌套函数时要当心，因为它会使程序可读性降低。

递归调用:



var outter=10; function functionName(parameters1){
functionName(parameters2); }

<html>
	<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>嵌套函数的应用</title>
<script type="text/javascript">
 function f(num)
 {
     
     //定义递归函数 
 if(num<=1)
 {
     
     //如果num＜=1
  return 1;//返回1
   }
	else
   {
     
      
	   return f(num-1)*num;//调用递归函数
	}
	}
</script>
 </head>
  <body>
	  <script type="text/javascript">
		  alert("10!的结果为："+f(10));//调用函数 	
		  </script>
  </body>

</html>

结果:
在这里插入图片描述

获取当前时间

<!DOCTYPE >
<html lang="en">
	<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>时钟=========</title>
 </head>
 <body>
<script type="text/javascript">
 function clockon(format)
 {
     
     
	 var now=new Date(); 
 var year=now.getFullYear();//要是没有full显示的年份不正常
  var month=now.getMonth(); 
 var date=now.getDate();
  var day=now.getDay(); 
 var hour=now.getHours();
  var minu=now.getMinutes();
  var sec=now.getSeconds();
  var week; month=month+1;
   if(month<10)month="0"+month;
	if(date<10)date="0"+date; 
	if(hour<10)hour="0"+hour; 
	if(minu<10)minu="0"+minu; 
	if(sec<10)sec="0"+sec;
	 var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); 
	 week=arr_week[day]; 
	 var time="";
	 if(format==1)
	  time=year+"年"+month+"月"+date+"日"+week+""+hour+":"+minu+":"+sec;
	  return time;
	  }
	 alert(clockon(1));
	</script>
	 </body>

</html>

在这里插入图片描述

字符串分割

效果：
在这里插入图片描述
代码:

<body >
<script type="text/javascript">
 var str="How are you doing today?"
  document.write(str.split("")+"<br/>") 
 document.write(str.split("")+"<br/>") 
 document.write(str.split("",3))	
	</script>
	 </body>

ReplaceText：用于替换搜索到的内容的字符串，其中可以使用一些特殊的字符组合来表示匹配变量。其中，＄＆是整个表达式模式在被搜索字符串中所匹配的字符串，＄是表达式模式在被搜索字符串中所匹配的字符串左边的所有内容，＄＄则是普通意义的“＄”字符。

产生验证码:(显示还有问题)

 <body >
<script type="text/javascript">
	function checkCode(digit)
	{
     
     
var result=""; 
for(i=0;i＜parseInt(digit);i++)
{
     
      
	result=result+(parseInt(Math.random()*10)).toString(); } 
return result; 
}
</script>
<script type="text/javascript">
function deal()
{
     
      
	result.innerHTML="＆nbsp;＆nbsp;产生的验证码："+checkCode(form1.digit.value);
}
	</script>
	<div id="result">&nbsp;&nbsp;产生的验证码:</div>
	<input name = "Submit" type="button" class="go-wen-ben-kuang" value="生成" οnclick="deal()">
	 </body>

在声明数组时，将数组的元素放在圆括号中，以逗号分隔，如下所示：
var newCars = new Array(“Toyota”, “Honda”, “Nissan”);