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. ...
随机推荐
- C#多线程操作
static void Main(string[] args) { Thread thread = Thread.CurrentThread; thread.Name = "Main Thr ...
- linux shell 学习笔记--内部命令学习
.基本命令 新手必须要掌握的初级命令 ls 基本的列出所有文件的命令.但是往往就是因为这个命令太简单,所以我们总是低估它.比如 ,用 -R 选项,这是递归选项,ls 将会以目录树的形式列出所有文件, ...
- OSI七层与TCP/IP五层网络架构
OSI七层模型 OSI中的层 功能 TCP/IP协议族 应用层 文件传输,电子邮件,文件服务,虚拟终端 TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet 表示层 数据格式化,代 ...
- Python函数-eval()
eval(source[, globals[, locals]]) 作用: 将字符串str当成有效的表达式来求值并返回计算结果.参数:source:一个Python表达式或函数compile()返回的 ...
- HIVE-执行hive的几种方式，和把HIVE保存到本地的几种方式
网上相关教程很多,这里我主要是简单总结下几种常用的方法,方便日后查询. 第一种,在bash中直接通过hive -e命令,并用 > 输出流把执行结果输出到制定文件 hive -e "se ...
- 前端跨域问题，以及ajax，jsonp，json的区别
看了很多网上的资料,小七感觉都没有完全解决我的疑惑以及问题,所以特意拿出通俗易懂的话讲解跨域问题,以及ajax,jsonp,json的区别.首先先说跨域问题什么时候需要跨域?[1]域名不同(即网址不同 ...
- openvswitch以及docker网络
修改docker0的IP,教程写的是/etc/default/docker文件,但是那是过时的配置,真正的配置是在/etc/docker/daemon.json,格式是json的: { "r ...
- POJ3292(素数筛选)
Semi-prime H-numbers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8706 Accepted: 3 ...
- java代码实现通讯录实例，我不知道这有什么用。，
运行显示: Friend:zl,Address:武大樱花美Colleagues:蔡依林,Department:麻城市人民政府 题目: 1．任务描述 完善上面通讯录名片的例子. 2．技能要点 掌握类继承 ...
- zedgraph控件的一些比较有用的属性
(1)zedgraph控件属性具体解释: AxisChange()() ->> This performs an axis change command on the graphPane. ...