11.24 JS基础7
- 昨天作业回顾加改进（双色球）
红色球号码区由1-33共三十三个号码组成，蓝色球号码区由1-16共十六个号码组成。投注时选择6个红色球号码和1个蓝色球号码组成一注进行单式投注，每注金额人民币2元。
从1-33随机选择6个，但是要求不能重复。
从1-16随机选择1个。
老师的基础解法：（虽然说我昨天做的也没毛病。。）
<script>
//从1-33随机选择6个，但是要求不能重复.
//将6个红球存放在数组中
let redarray = new Array(6);
//拿到一个随机数放到数组中
for (let i = 0; i < redarray.length; i++) {
//立一个flag
let flag = false;//不重复
//生成随机数存储
let r = Math.ceil(Math.random() * 33);
//用r和之前生成的每个数组元素都比较一次
for (let j = 0; j < i; j++) {
if (redarray[j] == r) {
//重复了
flag = true;
break;
}
}
if (flag) {
//重新生成，刚刚生成的操作就作废了.
i--;
//关键字
continue;
}
//将生成的随机数放在数组中.
redarray[i] = r;
//打印数组的这个元素
//console.log(redarray[i])
//排序一下
}
console.log(redarray);
//再生成一个蓝球
let blue = Math.ceil(Math.random() * 16);
console.log(blue);
</script>我加的效果渲染：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn {
border: 1px solid red;
color: red;
}
.btn1 {
border: 1px solid blue;
color: blue;
}
input {
border-radius: 50%;
width: 30px;
height: 30px;
background-color: white;
}
</style>
</head>
<body>
<input type="button" id="btn0" value="" class="btn">
<input type="button" id="btn1" value="" class="btn">
<input type="button" id="btn2" value="" class="btn">
<input type="button" id="btn3" value="" class="btn">
<input type="button" id="btn4" value="" class="btn">
<input type="button" id="btn5" value="" class="btn">
<input type="button" id="btn" value="" class="btn1">
<script>
// 从1-33随机选择6个，但是要求不能重复.
//将6个红球存放在数组中
let redarray = new Array(6);
function sortby(a, b) {
return a - b;
}
//拿到一个随机数放到数组中
for (let i = 0; i < redarray.length; i++) {
//立一个flag
let flag = false;
//生成随机数存储
let r = Math.ceil(Math.random() * 33);
//用r和之前生成的每个数组元素都比较一次
for (let j = 0; j < i; j++) {
if (redarray[j] == r) {
flag = true;
break;
}
}
if (flag == true) {
//重新生成，刚刚生成的操作就作废了.
i--;
//关键字
continue;
}
//将生成的随机数放在数组中。
redarray[i] = r;
}
redarray.sort(sortby);
console.log(redarray);
for (let k = 0; k < redarray.length; k++) {
if (redarray[k] < 10) {
redarray[k] = "0" + redarray[k];
}
document.getElementById("btn" + k).value = redarray[k];
}
//再生成一个蓝球
let blue = Math.ceil(Math.random() * 16);
if (blue < 10) {
blue = "0" + blue;
}
document.getElementById("btn").value = blue;
console.log(blue);
</script>
</body>老师做的渲染（基础版）：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.red{
border: 1px solid red;
color: red;
}
.blue{
border: 1px solid blue;
color: blue;
}
div{
border-radius: 15px;
width: 20px;
height: 20px;
float: left;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="blue" id="blue"></div>
<script>
//从1-33随机选择6个，但是要求不能重复.
//将6个红球存放在数组中
let redarray = new Array(6);
function sortby(a, b) {
return a - b;
}
//拿到一个随机数放到数组中
for (let i = 0; i < redarray.length; i++) {
//立一个flag
let flag = false;//不重复
//生成随机数存储
let r = Math.ceil(Math.random() * 33);
//用r和之前生成的每个数组元素都比较一次
for (let j = 0; j < i; j++) {
if (redarray[j] == r) {
flag = true;
break;
}
}
if (flag == true) {
//重新生成，刚刚生成的操作就作废了.
i--;
//关键字
continue;
}
//将生成的随机数放在数组中。
redarray[i] = r;
}
redarray.sort(sortby);
console.log(redarray);
//再生成一个蓝球
let blue = Math.ceil(Math.random() * 16);
if (blue < 10) {
document.getElementById("blue").innerHTML = "0" + blue;
} else {
document.getElementById("blue").innerHTML = blue;
}
console.log(blue);
let reddiv = document.getElementsByClassName("red");
for (let i = 0; i < reddiv.length; i++) {
if (redarray[i] < 10) {
reddiv[i].innerHTML = "0" + redarray[i];
} else {
reddiv[i].innerHTML = redarray[i];
}
}
</script>
</body>老师做的修改（高级版）：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.red{border-radius: 15px; border: 1px solid red; width: 20px; height: 20px; float: left; color: red}
.blue{border-radius: 15px; border: 1px solid blue; width: 20px; height: 20px; float: left}
</style>
</head>
<body>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="blue"></div>
<script>
// 从1-33随机选择6个，但是要求不能重复.
//将6个红球存放在数组中
let redarray = new Array();
//存放33个红球的数组
let redinit = new Array(33);
//赋值为默认
for (let i = 0; i < redinit.length; i++) {
redinit[i] = i + 1;
}
console.log(redinit)
//随机
for (let i = 0; i < 6; i++) {
let rindex = Math.floor(Math.random() * redinit.length);
console.log(i + "--- " + redinit[rindex]);
console.log(redinit.length)
console.log(redinit)
redarray.push(redinit[rindex])
redinit.splice(rindex, 1)
}
console.log(redarray);
let reddiv = document.getElementsByClassName("red");
for (let i = 0; i < reddiv.length; i++) {
if (redarray[i] < 10) {
reddiv[i].innerHTML = "0" + redarray[i];
} else {
reddiv[i].innerHTML = redarray[i];
}
}
//再生成一个蓝球
// let blue = Math.ceil(Math.random()*16);
//
// console.log(blue)
</script>
</body>用到了push和splice方法
注：document.getElementsByClassName(xxx)这个方法我之前没用过，它取到的也是一个数组（想到getElementsByName）。
- function函数
1.函数是一段代码,完成特定某个功能的块.可以被多次调用。
2 语法结构: function 是固定的；
function后面跟的函数名-> 自定义,多为动词，功能相关的 如：getmax,getsum,findById,sort等等。
() 也是固定的，当然括号里的内容可以为空，可以写"参数"。函数执行的过程中，需要依赖外部数据，这些数据通过参数传递进来。
3.另外，参数前不要加let或者var。如果我们还不能确定参数的值，我们将这种定义函数参数称为形式参数，简称形参。
4.如果确定了（）内参数的值，称它（们）为实际参数，简称实参。
//定义函数
function fun01() {
console.log("hello-1");
console.log("hello-2");
}
//函数正常情况下是不会自动执行的，需要调用.
//函数名()
//函数可以多次调用
fun01();
fun01();定义一个函数，求两个数/一个数组中的最大值。
function getmax(a,b) {
if(a>b){
console.log("max: "+a);
}
else{
console.log("max: "+b);
}
}
function getmax(arr) {
let max = arr[0];
for(let i=1;i<arr.length;i++){
if(max < arr[i]){
max = arr[i];
}
}
console.log("max :"+max)
}对函数有无参数，有无返回值的表格汇总
|
语法 |
函数参数 |
返回值 |
调用方法 |
| //无参数，无返回值 function fun01(){ console.log("fun01") }
|
无参数，执行不需要条件 |
无返回值 |
1.直接在js中调用 2.事件调用 |
| //无参数，有返回值 function fun02(){ return "string"; }
|
无参数，执行不需要条件 |
有返回值.必须要接收并处理
|
1.直接在js中调用 2.事件调用 |
|
//实现特定功能: 计算两个数字的和
|
有两个参数，分别为a和b，用逗号隔开 |
没有返回值 |
1.直接在js中调用 2.事件调用 |
| function getsum2(a,b){ //在函数内部，将a和b当成已知条件 let sum = a+b; //return 后面的内容就是返回值 return sum; }
|
有两个参数，分别为a和b，用逗号隔开 |
有返回值.必须要接收并处理
用的是最多的。 //return 后面的内容就是返回值//1. 函数中只能return 一次 //2. 如果有多次return的代码 也只是去执行第一个而已 //3.其实 return 的功能是结束当前的函数
|
1.直接在js中调用 2.事件调用 |
|
|
|
|
|
备注：JS Function函数中return用得比console.log多，是因为它更灵活，console.log只在控制台输出，而return的值需要被接收，中间可以做更多操作（如果有想法的话）。
函数的定义和调用：（以以前看到过的一个三国杀选择阵营为例）
<body>
穿越到三国，你的阵营是？
<br/><input type="button" value="匹配势力" onclick="randomid()">
<div>
<img id="pic" src="imgs/5.jpg" id="pic" width="300px" height="500px" alt="图片" onmouseover="stop()">
</div>
<br/>
<div id="result">
</div>
<script>
let timeout;
let i = 0;
function randomid() {
let r = Math.floor(Math.random() * 4);
let z = ["魏", "蜀", "吴", "群雄"];
let pic = ["imgs/1.jpg", "imgs/2.jpg", "imgs/3.jpg", "imgs/4.jpg"];
let video =
console.log(z[r]);
console.log(pic[r]);
document.getElementById("result").innerHTML = z[r];
document.getElementById("pic").src = pic[r];
timeout = setTimeout("randomid()", 100);
}
function stop() {
clearTimeout(timeout);
}
</script>
</body>习题：（备注：3题共用一个随机数）
用函数来实现，传递一个参数n给函数，返回值为1+2+…+n的和。
function getSum(n) {
let sum = 0;
if (n % 2 == 0) {//如果n是偶数 1 2 3 4 5 6
for (let i = 1; i <= n; i++) {
sum = sum + i;
}
return sum;
} else {
for (let i = 1; i <= n; i++) {//奇数 1 2 3 4 5
sum = sum + i;
}
return sum;
}
}
let ran = Math.floor(Math.random() * 10);
console.log(ran);
let result1 = getSum(ran);
console.log("result1 :" + result1);用函数来实现，传递一个参数n给函数，判断这个n是否是偶数,并返回结果。
function isEven(n) {//判断这个n是否是偶数,并返回结果
if (n % 2 == 0) {
return "n是偶数";
} else {
return "n不是偶数";
}
}
let result2 = isEven(ran);
console.log("result2 :" + result2);用函数来实现，传递一个参数n给函数，判断这个数字n是否是质数，并返回结果。
function isPrime(n) {
if (n < 2) {
return "n不是质数";
} else if (n == 2) {//最小的质数
return "n是质数";
} else if (n % 2 == 0) {//偶数
return "n不是质数";
}
var s = Math.sqrt(n); //平方根，比如Math.sqrt(9)为3
for (var i = 3; i <= s; i += 2) {//奇数
if (n % i == 0) {
return "n不是质数";
}
}
return "n是质数";
}
let result3 = isPrime(ran);
console.log("result3 :" + result3);用函数来实现，传递一个参数name给函数，给这个人卜卦，并返回结果。
function getDestiny(name) {
let d = ["此命生来游好闲游，吃喝玩了度春秋，年青财喜多发旺，直到老来也无忧。",
"时逢春回日,百花正及时.得人轻借力,便是运通时",
"但行好事，莫问前程，多积阴德，福及子孙",
"你的印堂发黑，头顶隐约有黑气缭绕，不适宜走远门。若是不听劝告，恐有血光之灾。不过若想躲避，在下也不是没有办法。"];
let r = Math.floor(Math.random() * 4);
return name + "，缘主你好，让我瞧瞧你的运势：" + d[r];
}
let result4 = getDestiny("张三");
console.log("result4 :" + result4);这四题难度我觉得最大的应该是判断数字是否是质数的那题。。都知道质数除本身的绝对值外，不可能为大于1的整数除尽的数。但这题需要逆向思维，首先排除掉除了0和1还有负数，因为它们既不是质数也不是合数；然后排除掉2以外的偶数，因为2是偶数里惟一的质数；偶数排除了，剩下奇数，如果n是奇数，那么它的平方根还是奇数，如果n能被3以上（包括3）的奇数整除，说明它除本身的绝对值外，还可以为大于1的整数除尽；如果不能，它就是奇数。
关于新学的debug按钮
感想：今天的难点在于双色球实现方法里的slice方法和质数的判断，难题与收获并存。
18:43:54 2021-11-24
posted on 2021-11-24 18:43 heyiyang1312 阅读(10) 评论(0) 收藏 举报
浙公网安备 33010602011771号