一.事件处理程序(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"> </th>
<td id="square1"> </td>
<td id="square2"> </td>
<td id="square3"> </td>
<td id="square4"> </td>
</tr>
<tr>
<td scope="row" id="square5"> </th>
<td id="square6"> </td>
<td id="square7">Free</td>
<td id="square8"> </td>
<td id="square9"> </td>
</tr>
<tr>
<td scope="row" id="square10"> </th>
<td id="square11"> </td>
<td id="square12"> </td>
<td id="square13"> </td>
<td id="square14"> </td>
</tr>
<tr>
<td scope="row" id="square15"> </th>
<td id="square16"> </td>
<td id="square17"> </td>
<td id="square18"> </td>
<td id="square19"> </td>
</tr>
<tr>
<td scope="row" id="square20"> </th>
<td id="square21"> </td>
<td id="square22"> </td>
<td id="square23"> </td>
<td id="square24"> </td>
</tr>
</table>
<p> </p>
<h2 align="center" id="redirect">
</h2>
</body>
</html>
分享到:
相关推荐
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的理念,用户...开发者需要掌握微信小程序的基础框架知识,了解数据绑定和事件处理机制,并合理利用动画和布局设计,以达到预期的UI设计效果。
本项目"js原生卡片式轮播图.zip"显然是一个用JavaScript原生代码实现的卡片式轮播图示例,无需依赖任何外部库,如jQuery或Bootstrap,这使得它在轻量化和自定义方面具有优势。 首先,我们来探讨一下卡片式轮播图的...
### JavaScript基础知识点总结—入门级别 #### 一、JavaScript简介 JavaScript是一种主要应用于网页开发的脚本语言,它能够在客户端运行。通过JavaScript可以为网页添加动态效果,改善用户体验,例如实现网页元素...
基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程...
【标题】JS堆叠卡片轮播插件stackedCards.zip是一个用于网页开发的资源,它实现了独特的卡片轮播效果。这种效果将多个卡片以堆叠的方式呈现,通过动态变换展示不同卡片,为用户带来新颖的交互体验。在网页设计中,...
此外,为确保滑动过程中的用户体验,可以添加阻尼效果,即在滑动停止时,卡片不是立即停止,而是有一个缓冲的过程,这可以通过调整 `transition` 的 `duration` 和 `easing` 属性实现。 在代码实现上,可以在页面的...
JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言,能实现网页的交互功能。下面是该资源中的重要知识点总结: 一、 JavaScript 基本概念 * ...
检疫宾果游戏 用Java编写的宾果游戏实现 去做: 添加游戏开始逻辑 添加游戏结束逻辑 添加排行榜 开发PWA版本 ...该项目欢迎捐助 :smiling_face: ,如果您有想要实施的建议/想法,请创建一个问题。
5. `Null`:表示一个空引用,常用来表示对象的值为空。 6. `Undefined`:表示未定义,当变量声明但未赋值时的默认值。 JavaScript对象是其强大之处,它可以封装各种属性和方法,实现数据的封装和操作。对象可以使用...
"js计时器数字卡片翻转秒表计时器网页特效"就是一个利用JavaScript实现的动态计时功能,它结合了数字卡片翻转的效果,使得秒表计时更为直观且具有视觉吸引力。这种效果常见于体育竞赛、健身应用或者任何需要实时计时...
当用户点击一个卡片时,相应的数据会被更新,从而触发视图的变化。 3. **事件处理**:点击卡片的事件可以通过Vue的`v-on`指令来监听和处理。当用户点击卡片时,会触发一个事件,该事件可以改变当前显示的卡片索引,...
本项目中的"银行卡卡片样式组件"是针对微信小程序的一个定制化设计,用于展示银行卡信息,通常包含银行Logo、卡号部分遮蔽显示、持卡人姓名、有效期以及安全码等元素。这种组件在电商、金融类小程序中十分常见,用于...
stackedCards是一款基于JavaScript的插件,专门用于创建富有创意的堆叠卡片轮播图效果。这种效果模拟了卡片在页面上堆叠和翻转的样子,既美观又互动性强。 一、核心概念 1. **堆叠卡片效果**:stackedCards插件的...
在这个"vue.js单排图文卡片滚动切换代码"项目中,我们将探讨如何利用Vue.js来实现一个具有动态滚动效果的图文卡片布局。 首先,`index.html`是项目的主入口文件,它包含了页面的基本结构和Vue实例的挂载点。在HTML...
将Javascript的基础知识浓缩到一张纸上
JS的基础知识是所有开发者入门时必须掌握的,这包括了词法结构、数据类型和值、对象、函数以及事件处理。 首先,让我们详细探讨JavaScript的词法结构。JavaScript的字符集基于Unicode,这意味着它支持多种国际字符...
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基础...
本文讲了Java与JavaScript的区别。主要讲的是JavaScript的基础知识,包括JavaScript是什么,JavaScript的基本语法以及本文运用用大量的实例来讲解各种语法。