`
yeluowuhen
  • 浏览: 156914 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

JS基础知识及一个小的Bingo卡片

阅读更多
一.事件处理程序(event handler)
   onabort    用户终止了页面的装载
   onblur     用户离开了对象
   onchange   用户修改了对象
   onclick    用户点击了对象
   onerror    脚本遇到一个错误
   onfocus    用户激活了一个对象
   onload     对象完成一个装载
   onmouseover 鼠标指针移动到对象上
   onmouseout  鼠标指针离开了对象
   onselect    用户选择了对象的内容
   onsubmit    用户提交了表单
   onunload    用户离开了页面
二.几种常用语句:
   1.confirm(),alert()及变量的比较(>,<,>=,<=);
   2.window.location()指浏览器中显示的页面;window.load=function()指页面装载完成后触发function();document.getElementById("elementId").innerHTML="new content";
document.referrer指引用都页面;
   3.document.getElementById().onclick=initAll;//注意无括号
     function initAll(){};
   4.两个概念:DOM脚本编程,无干扰脚本编程;
三. Bingo卡片的实现:
script07.js:注意每列约束条件是如何满足的,如B列数在1在15之间,I列在16到30之间,N列在31到45之间,G列在46-60之间,O列在61到75之间;
window.onload=initAll;
function initAll(){
	var flag=new Array(76);
	var newNum=new Array(0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4);
	for(var i=0;i<76;i++){
		flag[i]=false;
	}	
	
	for(var i=0;i<24;i++){
		if(document.getElementById){
		    var newNumber;
			do{
				newNumber=newNum[i]*15+Math.floor(Math.random()*15)+1;
				flag[newNumber]=true;
				document.getElementById("square"+i).innerHTML=newNumber;
			}while(!flag[newNumber])
			
		}
	}	
}

页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" rev="stylesheet" href="script01.css" />
<title>测试重定向</title>
</head>
<script src="script07.js" type="text/javascript" language="javascript">
</script> 
<body bgcolor="#FFFFF">
<h1>Create A Bingo Card</h1>
<table width="200" border="1">
  <tr>
    <th scope="col" width="20%">B</th>
    <th scope="col" width="20%">I</th>
    <th scope="col" width="20%">N</th>
    <th scope="col" width="20%">G</th>
    <th scope="col" width="20%">O</th>
  </tr>
  <tr>
    <td scope="row" id="square0">&nbsp;</th>
    <td id="square1">&nbsp;</td>
    <td id="square2">&nbsp;</td>
    <td id="square3">&nbsp;</td>
    <td id="square4">&nbsp;</td>
  </tr>
  <tr>
    <td scope="row" id="square5">&nbsp;</th>
    <td id="square6">&nbsp;</td>
    <td id="square7">Free</td>
    <td id="square8">&nbsp;</td>
    <td id="square9">&nbsp;</td>
  </tr>
  <tr>
    <td scope="row" id="square10">&nbsp;</th>
    <td id="square11">&nbsp;</td>
    <td id="square12">&nbsp;</td>
    <td id="square13">&nbsp;</td>
    <td id="square14">&nbsp;</td>
  </tr>
  <tr>
    <td scope="row" id="square15">&nbsp;</th>
    <td id="square16">&nbsp;</td>
    <td id="square17">&nbsp;</td>
    <td id="square18">&nbsp;</td>
    <td id="square19">&nbsp;</td>
  </tr>
  <tr>
    <td scope="row" id="square20">&nbsp;</th>
    <td id="square21">&nbsp;</td>
    <td id="square22">&nbsp;</td>
    <td id="square23">&nbsp;</td>
    <td id="square24">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<h2 align="center" id="redirect">
	
	
</h2>

</body>

</html>


0
0
分享到:
评论

相关推荐

    微信小程序实现卡片层叠滑动效果

    微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的理念,用户...开发者需要掌握微信小程序的基础框架知识,了解数据绑定和事件处理机制,并合理利用动画和布局设计,以达到预期的UI设计效果。

    js基础知识点总结-入门级别

    ### JavaScript基础知识点总结—入门级别 #### 一、JavaScript简介 JavaScript是一种主要应用于网页开发的脚本语言,它能够在客户端运行。通过JavaScript可以为网页添加动态效果,改善用户体验,例如实现网页元素...

    js计时器数字卡片翻转秒表计时器网页特效

    "js计时器数字卡片翻转秒表计时器网页特效"就是一个利用JavaScript实现的动态计时功能,它结合了数字卡片翻转的效果,使得秒表计时更为直观且具有视觉吸引力。这种效果常见于体育竞赛、健身应用或者任何需要实时计时...

    JavaScript入门篇,JavaScript基础知识

    `就是一个简单的语句,它会弹出一个对话框显示“hello!”。在编写代码时,良好的编程习惯是使用分号,尽管它们在某些情况下可以省略。 注释是提高代码可读性的关键,有单行和多行两种形式。单行注释以`//`开始,...

    vue.js单排卡片滚动切换代码.zip

    当用户点击一个卡片时,相应的数据会被更新,从而触发视图的变化。 3. **事件处理**:点击卡片的事件可以通过Vue的`v-on`指令来监听和处理。当用户点击卡片时,会触发一个事件,该事件可以改变当前显示的卡片索引,...

    javascript基础知识ppt

    关于javascript基础知识ppt里头包括javascript最基础的知识

    vue.js单排图文卡片滚动切换代码

    在这个"vue.js单排图文卡片滚动切换代码"项目中,我们将探讨如何利用Vue.js来实现一个具有动态滚动效果的图文卡片布局。 首先,`index.html`是项目的主入口文件,它包含了页面的基本结构和Vue实例的挂载点。在HTML...

    Javascript 基础知识 一张纸

    将Javascript的基础知识浓缩到一张纸上

    简单的js 基础知识

    JS的基础知识是所有开发者入门时必须掌握的,这包括了词法结构、数据类型和值、对象、函数以及事件处理。 首先,让我们详细探讨JavaScript的词法结构。JavaScript的字符集基于Unicode,这意味着它支持多种国际字符...

    js基础知识js的简介

    2. DOM(Document Object Model):这是一个用于访问和操作HTML或XML文档的标准接口,允许JavaScript操作页面元素,如添加、删除或修改元素属性。 3. BOM(Browser Object Model):提供了与浏览器交互的方法,如...

    JavaScript基础知识简介

    本文讲了Java与JavaScript的区别。主要讲的是JavaScript的基础知识,包括JavaScript是什么,JavaScript的基本语法以及本文运用用大量的实例来讲解各种语法。

    论基于JavaScript语言的Bingo游戏实现.pdf

    Bingo游戏是一种流行的卡片式游戏,游戏的规则是参赛者购买一张或多张Bingo票,每张票上有25个号码,包括5行5列,中间一格为空白区域,称作“Free Space”。玩家可以根据游戏的规则涂黑号码所在的格子,直到某个玩家...

    Node.js-CardView-3d卡片效果-国人

    这个项目是关于使用Node.js来实现3D卡片效果的,尽管“CardView”通常在Android开发中指的是一个用于展示信息的视图组件,但这里它似乎被用在了一个与前端开发相关的项目中。项目由国人创建,可能意味着它具有中文...

    JavaScript基础知识.md

    JavaScript基础知识.md

    swiper3实现卡片效果banner

    在本示例中,我们将深入探讨如何利用 Swiper3 实现一个具有卡片效果的 banner。 Swiper3 是 Swiper 系列的第三个主要版本,虽然现在已经有更新的 Swiper4 和 Swiper6,但 Swiper3 依然被广泛使用,因为它的功能稳定...

    网页模板——vue.js实现的单排卡片滚动切换特效代码.zip

    在这个卡片滚动效果中,我们可以创建一个Vue实例,绑定数据数组来存储每个卡片的信息,如标题、描述、图片等。每当我们添加或移除卡片数据,视图中的卡片也会相应地增加或减少。 接着,我们需要构建卡片组件。Vue....

    javascript基础知识学习文档.doc

    javascript基础知识学习文档.doc

    javaScript 卡片布局

    javaScript 卡片布局卡片布局卡片布局

    javascript 基础知识

    javascript 基础知识

Global site tag (gtag.js) - Google Analytics