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. ...
随机推荐
- L123
My heart, the bird of the wilderness, has found its sky in your eyes. 我的心是旷野的鸟,在你的双眼中找到了天空.His main ...
- UVA - 11019 Matrix Matcher (二维字符串哈希)
给你一个n*m的矩阵,和一个x*y的模式矩阵,求模式矩阵在原矩阵中的出现次数. 看上去是kmp在二维情况下的版本,但单纯的kmp已经无法做到了,所以考虑字符串哈希. 类比一维情况下的哈希算法,利用容斥 ...
- SaaS模式实现架构
SaaS模式实现架构 https://blog.csdn.net/xwq911/article/details/50630266 1. 数据库层: 数据库这一层的设计模式是很清晰的,无外乎只有3种方案 ...
- 继《关于讯飞语音SDK开发学习》之打包过程中遇到小问题
关于讯飞语音SDK开发学习 使用vs自带打包,具体怎么操作就不说了,网上关于这方面的资料挺多的.例如:winform 打包部署,VS2010程序打包操作(超详细的),关键是桌面上创建快捷方式中的&qu ...
- ORACLE初始化参数文件概述
ORACLE初始化参数文件概述 在9i之前,参数文件只有一种,它是文本格式的,称为pfile,在9i及以后的版本中,新增了服务器参数文件,称为spfile,它是二进制格式的.这两种参数文件都是用来存储 ...
- Hibernate检索方式（转载）
我们在项目应用中对数据进行最多的操作就是查询,数据的查询在所有ORM框架中也占有极其重要的地位. 那么,如何利用Hibernate查询数据呢?Hibernate为我们提供了多种数据查询的方式,又称为H ...
- DIY ESXI虚拟化服务器再度升级ESXI6.0 （U盘安装Esxi）
前期我写了一个篇关于<IT屌丝DIY ESXI虚拟化服务器记实 >链接地址:http://lidongni.blog.51cto.com/2554605/1643996,这次主要是在原有的 ...
- C#中获取Excel文件的第一个表名
// 2.以数据库方式打开并输入数据// 此方式将xls文件所在目录看作数据库,其中的xls文件看作数据库表,表名即文件名(不加扩展名).// 函数importExcelTo ...
- PhantomJS python 截屏
参考:https://www.cnblogs.com/LanTianYou/p/5578621.html # coding:utf8 from time import sleep from selen ...
- Azure Managed Disk
Azure的磁盘存储是保存在存储账户中的Page Blob.由于Azure Storage Account的各种限制,在设计VM的磁盘存储时,要符合Azure磁盘存储账户的最佳实践,请参考:http: ...