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. ...
随机推荐
- 把数据库里面的数据导出来csv
function export_csv($filename, $data, $head = '') { $string = $head; foreach ($data as $key => $v ...
- "Cannot declare member function ...to have static linkage"错误
英文解释: if you declare a method to be static in your .cc file. The reason is that static means somethi ...
- CodeForces - 156C：Cipher （不错的DP）
Sherlock Holmes found a mysterious correspondence of two VIPs and made up his mind to read it. But t ...
- Yii查看(输出)当前页面执行的sql语句（log记录）
在Yii框架下查看当前页面执行的所有sql语句的方法,主要是通过配置相关文件来达到调试sql的目的,具体方法如下: (1)修改 index.php 开启调试模式 在 index.php 文件内增加如下 ...
- curl获取图片
<?php set_time_limit(0); //执行30秒超时后继续执行 header("Content-type:text/html;charset=utf-8"); ...
- CF884D：Boxes And Balls
浅谈\(Huffman\)树:https://www.cnblogs.com/AKMer/p/10300870.html 题目传送门:https://codeforces.com/problemset ...
- bzoj 1009 [HNOI2008]GT考试——kmp+矩阵优化dp
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1009 首先想到 确保模式串不出现 就是 确保每个位置的后缀不是该模式串. 为了dp,需要记录 ...
- Visualforce入门第二篇_2017.3.1
代码实现类似Html的表单(Form) <apex:page sidebar="false" standardController="Account"&g ...
- WPF案例：如何设计历史记录查看UI
(CSDN博客目前不支持外链, 只能纯文字) 设计WPF的UI,一般遵循下面的步骤: 1.首先分析数据结构 2.根据数据结构选择合理控件 3.定制外观 具体对于历史记录查看UI, 我们可以得知: 1. ...
- php之laravel学习
http://laravel-china.github.io/php-the-right-way/#composer_and_packagist laravel 添加 dingoapi路由插件 并运用 ...