`
yeluowuhen
  • 浏览: 158455 次
  • 性别: 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原生卡片式轮播图.zip

    本项目"js原生卡片式轮播图.zip"显然是一个用JavaScript原生代码实现的卡片式轮播图示例,无需依赖任何外部库,如jQuery或Bootstrap,这使得它在轻量化和自定义方面具有优势。 首先,我们来探讨一下卡片式轮播图的...

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

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

    基于Javascript编程基础知识基于Javascript编程基础知识基于Java基于Javascript编程基础知识.zip

    基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程...

    JS堆叠卡片轮播插件stackedCards.zip

    【标题】JS堆叠卡片轮播插件stackedCards.zip是一个用于网页开发的资源,它实现了独特的卡片轮播效果。这种效果将多个卡片以堆叠的方式呈现,通过动态变换展示不同卡片,为用户带来新颖的交互体验。在网页设计中,...

    微信小程序卡片左右滑动(有动画)

    此外,为确保滑动过程中的用户体验,可以添加阻尼效果,即在滑动停止时,卡片不是立即停止,而是有一个缓冲的过程,这可以通过调整 `transition` 的 `duration` 和 `easing` 属性实现。 在代码实现上,可以在页面的...

    JavaScript学习笔记,javascript基础知识,基础语法整理.pdf

    JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言,能实现网页的交互功能。下面是该资源中的重要知识点总结: 一、 JavaScript 基本概念 * ...

    bingo:使用Javascript实现的以检疫为主题的宾果游戏

    检疫宾果游戏 用Java编写的宾果游戏实现 去做: 添加游戏开始逻辑 添加游戏结束逻辑 添加排行榜 开发PWA版本 ...该项目欢迎捐助 :smiling_face: ,如果您有想要实施的建议/想法,请创建一个问题。

    JavaScript基础知识整理

    5. `Null`:表示一个空引用,常用来表示对象的值为空。 6. `Undefined`:表示未定义,当变量声明但未赋值时的默认值。 JavaScript对象是其强大之处,它可以封装各种属性和方法,实现数据的封装和操作。对象可以使用...

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

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

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

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

    微信小程序uniapp银行卡卡片样式组件

    本项目中的"银行卡卡片样式组件"是针对微信小程序的一个定制化设计,用于展示银行卡信息,通常包含银行Logo、卡号部分遮蔽显示、持卡人姓名、有效期以及安全码等元素。这种组件在电商、金融类小程序中十分常见,用于...

    js堆叠卡片轮播图插件stackedCards

    stackedCards是一款基于JavaScript的插件,专门用于创建富有创意的堆叠卡片轮播图效果。这种效果模拟了卡片在页面上堆叠和翻转的样子,既美观又互动性强。 一、核心概念 1. **堆叠卡片效果**:stackedCards插件的...

    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 js基础学习 示例代码

    JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...

    JavaScript基础知识简介

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

Global site tag (gtag.js) - Google Analytics