javascript 基础练习 做Bingo图
---恢复内容开始---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环处理操作</title>
<script type="text/javascript">
/*
window.onload=iniAll;
function iniAll(){
for(var i=0;i<24;i++){
var newnum=Math.floor(Math.random()*75)+1;
document.getElementById("square"+i).innerHTML=newnum;
}
}
*/
//代码改进 主要通过传参
/*
window.onload=iniAll;
function iniAll(){
for (var i=0;i<24;i++) {
setSquare(i);
}
}
function setSquare(thisquare){
var currsquare="square"+thisquare;
var newnum=Math.floor(Math.random()*75)+1;
document.getElementById(currsquare).innerHTML=newnum;
}*/
//探测对象。。。
/*
window.onload=iniAll;
function iniAll(){
if(document.getElementById){
for (var i=0;i<24;i++) {
setSquare(i);
}
}
else{
alert("not support")
}
}
function setSquare(thisquare){
var currsquare="square"+thisquare;
var newnum=Math.floor(Math.random()*75+1);
document.getElementById(currsquare).innerHTML=newnum;
}*/
//限制没一列的 值
window.onload=iniAll;
function iniAll(){
if(document.getElementById){
for (var i=0;i<24;i++) {
setSquare(i);
}
}
else{
alert("not support")
}
}
function setSquare(thisquare){
var currsquare="square"+thisquare;
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[thisquare]*15;
var newnum= colbasis+Math.floor(Math.random()*15+1);
document.getElementById(currsquare).innerHTML=newnum;
}
</script>
<style type="text/css">
body{
background: #CCCCCC;
color: black;
font-size: 20px;
font-family: "arial, helvetica, sans-serif";
}
#free{
background: #fff;
}
h1{
font-size: 28px;
font-family: "微软雅黑";
}
table{
border-collapse: collapse;
}
th td{
padding: 10px;
border: 2px #555 solid;
text-align: center;
width: 40%;
}
</style>
</head>
<body>
<h1>my bingo</h1>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>B</th>
<th>i</th>
<th>n</th>
<th>g</th>
<th>o</th>
</tr>
<tr>
<td id="square0">∇</td>
<td id="square5">∇</td>
<td id="square10">∇</td>
<td id="square14">∇</td>
<td id="square19">∇</td>
</tr>
<tr>
<td id="square1">∇</td>
<td id="square6">∇</td>
<td id="square11">∇</td>
<td id="square15">∇</td>
<td id="square20">∇</td>
</tr>
<tr>
<td id="square2">∇</td>
<td id="square7">∇</td>
<td id="free">free</td>
<td id="square16">∇</td>
<td id="square21">∇</td>
</tr>
<tr>
<td id="square3">∇</td>
<td id="square8">∇</td>
<td id="square12">∇</td>
<td id="square17">∇</td>
<td id="square22">∇</td>
</tr>
<tr>
<td id="square4">∇</td>
<td id="square9">∇</td>
<td id="square13">∇</td>
<td id="square18">∇</td>
<td id="square23">∇</td>
</tr>
</table>
</body>
</html>
---恢复内容结束---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环处理操作</title>
<script type="text/javascript">
/*
window.onload=iniAll;
function iniAll(){
for(var i=0;i<24;i++){
var newnum=Math.floor(Math.random()*75)+1;
document.getElementById("square"+i).innerHTML=newnum;
}
}
*/
//代码改进 主要通过传参
/*
window.onload=iniAll;
function iniAll(){
for (var i=0;i<24;i++) {
setSquare(i);
}
}
function setSquare(thisquare){
var currsquare="square"+thisquare;
var newnum=Math.floor(Math.random()*75)+1;
document.getElementById(currsquare).innerHTML=newnum;
}*/
//探测对象。。。
/*
window.onload=iniAll;
function iniAll(){
if(document.getElementById){
for (var i=0;i<24;i++) {
setSquare(i);
}
}
else{
alert("not support")
}
}
function setSquare(thisquare){
var currsquare="square"+thisquare;
var newnum=Math.floor(Math.random()*75+1);
document.getElementById(currsquare).innerHTML=newnum;
}*/
//限制没一列的 值
window.onload=iniAll;
function iniAll(){
if(document.getElementById){
for (var i=0;i<24;i++) {
setSquare(i);
}
}
else{
alert("not support")
}
}
function setSquare(thisquare){
var currsquare="square"+thisquare;
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[thisquare]*15;
var newnum= colbasis+Math.floor(Math.random()*15+1);
document.getElementById(currsquare).innerHTML=newnum;
}
</script>
<style type="text/css">
body{
background: #CCCCCC;
color: black;
font-size: 20px;
font-family: "arial, helvetica, sans-serif";
}
#free{
background: #fff;
}
h1{
font-size: 28px;
font-family: "微软雅黑";
}
table{
border-collapse: collapse;
}
th td{
padding: 10px;
border: 2px #555 solid;
text-align: center;
width: 40%;
}
</style>
</head>
<body>
<h1>my bingo</h1>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>B</th>
<th>i</th>
<th>n</th>
<th>g</th>
<th>o</th>
</tr>
<tr>
<td id="square0">∇</td>
<td id="square5">∇</td>
<td id="square10">∇</td>
<td id="square14">∇</td>
<td id="square19">∇</td>
</tr>
<tr>
<td id="square1">∇</td>
<td id="square6">∇</td>
<td id="square11">∇</td>
<td id="square15">∇</td>
<td id="square20">∇</td>
</tr>
<tr>
<td id="square2">∇</td>
<td id="square7">∇</td>
<td id="free">free</td>
<td id="square16">∇</td>
<td id="square21">∇</td>
</tr>
<tr>
<td id="square3">∇</td>
<td id="square8">∇</td>
<td id="square12">∇</td>
<td id="square17">∇</td>
<td id="square22">∇</td>
</tr>
<tr>
<td id="square4">∇</td>
<td id="square9">∇</td>
<td id="square13">∇</td>
<td id="square18">∇</td>
<td id="square23">∇</td>
</tr>
</table>
</body>
</html>
javascript 基础练习 做Bingo图的更多相关文章
- javascript基础-HTML5
跨文档消息(Web Messaging cross-document messaging) 原理 往有关联(同一框架/弹出)的文档传递数据. Message Channel在javascript基础- ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- 8 张脑图入门 JavaScript - 基础面试不倒
8 张脑图入门 JavaScript - 基础面试不倒 转载请注明出处 第一:JavaScript 的变量 第二:JavaScript 运算符 第三:JavaScript 数组 第四:JavaScri ...
- 几张非常有意义的JavaScript基础学习思维图
分享几张对于学习JavaScript基础知识非常有意义的图,无论你的JavaScript级别如何,“温故而知新”完全可以从这些图中得到. 推荐理由:归类非常好,非常全面 JavaScript 数组 J ...
- 一步步学习javascript基础篇（3）：Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- javascript基础03
javascript基础03 1. 算术运算符 后增量/后减量运算符 ++ ,-- 比较运算符 ( >, <, >=, <=, ==, !=,===,!== ) 逻辑运算符( ...
- javascript基础06
javascript基础06 splice var del_arr = del.splice(0,2); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返 ...
- JavaScript基础（.....持续待更）
javascript热身 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. ...
随机推荐
- php 中改变字符编码的函数 是 iconv（）
json_enocode() 此函数里边接收的数据必须是utf8格式.要不然会输出null
- 杂项之python利用pycrypto实现RSA
杂项之python利用pycrypto实现RSA 本节内容 pycrypto模块简介 RSA的公私钥生成 RSA使用公钥加密数据 RSA使用私钥解密密文 破解博客园登陆 pycrypto模块简介 py ...
- JavaWeb框架_Struts2_(四)----->表达式语言OGNL
2. 表达式语言OGNL 2.1 OGNL简介 OGNL(Object-Graph Navigation Language)对象图导航语言的缩写,OGNL是一种表达式语言(Expression L ...
- 命令行启动MySQL
1 首先打开CMD,即命令行 输入mysqld ,如出现 则说明MySQL安装路径下的bin不在系统的环境变量中,你需要进入它的安装路径的bin目录下启动. ps:如果你不知道路径可以去开始菜单,找到 ...
- Java编程思想第七章复用类
7.1组合语法 在一个类中引入多个对象,以提高代码的复用性与功能. 7.2继承语法 使用继承子类可以获得,导出类可以获得基类的成员(变量与方法). 注:这里注意权限控制,若基类中的成员为默认权限,只有 ...
- 开启VMSS Autoscale的报警功能
VMSS可以自动的实现Scale Out和Scale in.在VMSS做自动操作的时候,可以通过配置通知服务,通知VMSS的状态. 具体实现方式: 1, 在portal中选择"监视器&quo ...
- 32位模式下C/C++程序可用最大内存
关于32位程序申请大内存问题(1.6G). 我在win7 64系统上面测试Visual studio 10 int* Test=new int[1024*1024*200]; int* Test2=n ...
- VS编译linux项目生成静态库并在另一个项目中静态链接的方法
VS2017也推出很久了,在单位的时候写linux的服务端程序只能用vim,这让用惯了IDE的我很难受. 加上想自己撸一套linux上的轮子,决定用VS开工远程编写调试linux程序. 在window ...
- 【转】CSG（Closed Subscriber Group）闭合用户组
CSG是3GPP R8中引入的概念,定义为闭合用户组.有以下特点: 1. 每个CSG由一个CSG ID标识 2. 同一用户可属于多个CSG,用户与CSG的关系就好比签约,启用了CSG小区只会允许签约用 ...
- cpu上下文切换（下）
--怎么查看系统的上下文切换情况 过多的上下文切换,会把cpu时间消耗在寄存器.内核栈以及虚拟内存等数据的保存和恢复上,缩短进程真正运行的时间,成了系统性能大幅下降的一个元凶. 查看,使用vmstat ...