1.完成一个双色球，红球的自选效果
规则：1-33
用表格画出一个1到33的格子，点击一个自选按钮，将随机选中6个数字，每个表格对应的数字的背景就改为一个红球的效果
双色球.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
td{
text-align: center;
height: 50px;
width: 50px;
background-repeat: round;
}
</style> <body>
<div align="center">
<table width="550px" id="tab"> </table>
<button onclick="xq()">随机选球</button>
</div>
</body>
<script type="text/javascript">
var tab = "";
var n = 1;
for(i=0;i<3;i++){
tab += "<tr>";
for(j=0;j<11;j++){
tab += "<td id='t"+n+"'>"+ n++ +"</td>";
}
tab += "</tr>";
}
document.getElementById("tab").innerHTML=tab; function xq() {
var rans = new Array();//用来存放6个不同的随机数的数组
for(i=0;i<6;i++){
//生成1-33的随机数
var ran = Math.ceil(Math.random()*33);
for(j=0;j<=i;j++){
if(ran==rans[j]){
i--;
break;
}
if(j==i){
rans[i] = ran;
}
}
}
//每次点击都清空红球
var tds = document.getElementsByTagName("td");
for(i=0;i<tds.length;i++){
tds[i].style.background = "";
} for(i=0;i<6;i++){
var tab = document.getElementById("t"+rans[i]);
tab.style.background = "url('ball.jpg') round";
}
}
</script>
</html>
双色球图片
结果
2.鲨鱼游戏
生成一排按钮，给其中一个按钮随机的绑定一个单击事件，单击后告诉玩家“你中招了”，点过的按钮颜色改变
game.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
button{
width: 80px;
}
</style>
<script type="text/javascript">
function changeColor(num) {
var but = document.getElementById("b"+num);
but.style.backgroundColor = "red";
}
function start_() {
//生成1-9的随机数
var ran = Math.ceil(Math.random()*9);
//获取按钮绑定事件
var but = document.getElementById("b"+ran);
but.onclick=function () {
document.getElementById("result").innerHTML="今天你搞卫生！！！！";
}
}
</script>
<body>
<div align="center">
<button id="b1" onclick="changeColor(1)">1</button>
<button id="b2" onclick="changeColor(2)">2</button>
<button id="b3" onclick="changeColor(3)">3</button>
<button id="b4" onclick="changeColor(4)">4</button>
<button id="b5" onclick="changeColor(5)">5</button>
<button id="b6" onclick="changeColor(6)">6</button>
<button id="b7" onclick="changeColor(7)">7</button>
<button id="b8" onclick="changeColor(8)">8</button>
<button id="b9" onclick="changeColor(9)">9</button>
</div>
<div align="center">
<button onclick="start_()">开始游戏</button>
</div>
<div align="center" id="result"></div>
</body>
</html>
游戏截图
3.
在网页中打印输出乘法口诀表；
在网页中画出一个10行10列的表格，格子中从1-100存放数字，表格边框为（1，实线，红色），数字全部居中显示；
定义一个数组，里面存放各个省份名称，要求在网页中写一个下拉列表，里面显示的内容就是数组中的省份
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
table{
border: 1px solid red;
}
td{
text-align: center;
}
</style>
<script type="text/javascript">
// document.write("哈哈");
//1数据类型：只有一个类型 var
// var num1 = 100;
// var str1 = "123";
//2.条件判断 if(){}
// if(num1==100){
//
// }
//3.循环 while ;do while; for
//输出语句：document.write("哈哈");
//1.在网页中打印输出乘法口诀表 for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(i+"x"+j+"="+i*j+" ");
}
document.write("<br>");
}
//2.在网页中画出一个10行10列的表格，格子中从1-100存放数字，表格边框为（1，实线，红色），数字全部居中显示
document.write("<table width='500' border='1'>");
var num = 1;
for(var i=1;i<=10;i++){
document.write("<tr>");
for(var j=1;j<=10;j++){
document.write("<td>"+ num++ +"</td>");
}
document.write("</tr>");
}
document.write("</table>");
//3.定义一个数组，里面存放各个省份名称，要求在网页中写一个下拉列表，里面显示的内容就是数组中的省份
//a。定义：var nums=[1,2,3];
//var nums = new Array();不需要声明长度
function addProvice() {
var p = document.getElementById("Provice");
var ss = ["湖南","湖北","河南","河北","天津","上海","黑龙江"];
var str = "<select>";
for(var i=0;i<ss.length;i++){
str += "<option>"+ss[i]+"</option>";
}
str += "</select>";
p.style.backgroundColor = "red";
p.innerHTML = str;
} //事件和函数的调用
//在页面中画一个div指定高度和宽度，在div下面画四个按钮分别显示：红，黄，蓝，绿 要求点击按钮将div的背景颜色
//改为相应的颜色
</script>
<body>
<h1>早上好</h1>
<div id="Provice"></div>
<button onclick="addProvice()">点我试试</button>
</body> </html>
结果
4./网页计算器：实现加减乘除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
function change(color) {
var div = document.getElementById("color");
div.style.backgroundRepeat="round";
div.style.backgroundColor = color;
div.style.backgroundImage = "url('../img/1.png')";
}
function show() {
var inp = document.getElementById("username");
alert(inp.value);
}
function jisuan(type) {
var n1 = document.getElementById("n1").value;
var n2 = document.getElementById("n2").value;
n1 = parseFloat(n1);
n2 = parseFloat(n2);
var n3;
if(type=="+"){
n3 = n1+n2;
}
if(type=="-"){
n3 = n1-n2;
}
if(type=="x"){
n3 = n1*n2;
}
if(type=="/"){
n3 = n1/n2;
}
document.getElementById("n3").value=n3;
}
//网页计算器：实现加减乘除功能。第一个数，第二个数，计算结果三个文本框和4个功能按钮 function createRan() {
alert(Math.ceil(11.1));
}
function start_() {
document.getElementById("b1").onclick = createRan;
}
</script>
<body>
<div id="color" style="width: 400px;height: 200px;"></div>
<button onclick="change('red')">红</button>
<button onclick="change('yellow')">黄</button>
<button onclick="change('blue')">蓝</button>
<button onclick="change('green')">绿</button>
<div>
<input type="text" id="username" onblur="show()">
</div>
<div>
第一个数:<input id="n1"><br>
第二个数:<input id="n2"><br>
计算结果:<input id="n3"><br>
<button onclick="jisuan('+')">+</button>
<button onclick="jisuan('-')">-</button>
<button onclick="jisuan('x')">x</button>
<button onclick="jisuan('/')">÷</button>
</div>
<button onclick="createRan()">随机数</button>
<button onclick="start_()">开始游戏</button>
<button id="b1">绑定事件</button>
</body>
</html>
结果
