发表于: 2020-08-22 20:09:52
1 1331
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
1.学习Math方法 floor方法 radom方法
2.Shuffle 打乱数组下标方法
3. randomlyColor 随机获取颜色函数
js Math
什么是Math?函数的一种 ,无需创建
为甚用?用于执行数学任务
怎么用?通过Math作为对象使用,可以调用方法和属性
语法
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
注释
变量 pi=数学函数 .圆周率 属性 返回
变量 sqrt=属性函数 数平方跟 方法 返回
实际代码
Math floor方法
是什么 运算函数的其中一个方法 返回小于等于x的最大整数
为什么 方便计算
怎么用
Math.floor(x)必需。任意数值或表达式。
例子
<p id="demo">单击按钮将不同的数值降到离它最近的整数。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var a=Math.floor(0.60);
var b=Math.floor(0.40);
var c=Math.floor(5);
var d=Math.floor(5.1);
var e=Math.floor(-5.1);
var f=Math.floor(-5.9);
var x=document.getElementById("demo");
x.innerHTML=a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e + "<br>" + f;
}
</script>
注释
执行的是向下取整计算,它返回的是小于或等于函数参数,并且与之最接近的整数。
小于等于 x,且与 x 最接近的整数。
对一个数进行下舍入 整数取整 0.1 取零 -5.1 取-6
Math 方法 random()
是什么 计算函数中的一个方法,返回0和1之间的一个随机数
为什么 暂时不知道 看起来像是比对作用
怎么用
语法 Math.random()
0.0 ~ 1.0(不包含) 之间的一个伪随机数
背景知识
这是返回值 0-1 之间的 0.7105500664206326
例子
场景 返回1-10的之间的随机数
<p id="demo">点击按钮显示 1 到 10 的随机数:</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var x=document.getElementById("demo")
x.innerHTML=Math.floor((Math.random()*10)+1);
}
</script>
注释
Math.floor((Math.random()*10)+1);
floor选取最小值 、*10 一个值,+1 一个值,都包含在random方法里面
场景 随机获得3个div
知识点1
Shuffle 函数 也叫洗牌操作
是什么 打乱数组下标的方法
为什么 完成打乱的场景
把一组图片顺序有正常但是变得乱七八糟,人移动恢复正常,完成人机验证
猜想: 定义好的数组不能不能用 按照口语化的说法,必须打乱牌的顺序,才能玩游戏
正常牌是 123456 打乱牌是 635241
那就是随机抽取 数组下标 也就是3个div不同的下标?
怎用?
类似例子1
类似例子2
从头遍历,每次从后面的牌中选一个与前面的交换(并不能完全随机)
function washCard1 (cards) {
var len = cards.length
for (var i=0; i<len; i++) {
var index = Math.ceil( Math.random() * (len-i-1)) + i
var tmp = cards[i]
cards[i] = cards[index]
cards[index] = tmp
}
return cards
}
知识点2
数组
什么是?数组数组 顾名思义 在一个组合多个数字吗
单一变量中存储多个值 ,
场景 有的个人怀1个娃 ,有的人怀7-10个娃
为什么用?满足只有一个变量,并且有必须存多个值的场景
更快的遍历速度
怎么用?
1.数组文本创建
例子
<script>
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars;
</script>
cars 数组名称 ,数组值1 数组值2
注意加 方括号 双引号
输出cars数组 文本
js创建数组 new
例子
<script>
var cars = new Array("Audi", "BMW", "porsche");
document.getElementById("demo").innerHTML = cars;
</script>
注释
关键 var cars = new Array ,这一句出来cars能变,其他不能变
背景知识
1.数组下标是什么?
以一个简单的一维数组为例bai:
int a[10];这是du一个整型的数组a,有10个元素:a[0]-a[9],因为正确的下zhi标应该是从0开始,到dao9结束,与生活习惯中的1-10不一样,于是产生一个a[10]的错误,即数组下标越界。
2.数组长度怎么计算?
3.a[i] 这是什么意思?
a[i]=i是一个循环赋值。bai
第一次循环:a[0]du=0;第二次循环:a[1]=1;一直zhi到第9次循环:a[9]=9。
int a[ ]中,a表示数组dao名,代表数组的首地址,可以看成一个常量,不可更改。
3.1 代码例子
var a = []; //声明空数组
a[100] = 2;
console.log(a.length); //返回101
3.2 注释
定义了一个空数组,然后为下标等于 100 的元素赋值,则 length 属性返回 101。因此,length 属性不能体现数组元素的实际个数
场景需要 随机给3个颜色
知识点 随机获取颜色的函数 randomlyColor
是什么 ? 颜色变化的控制方法
为什么 ? 某些业务场景需要 比如对于黑夜时间,自动把网页变成黑色的降低对眼睛刺激
或者制作节假日的跑马灯效果
怎么做?
明天计划的事情:(一定要写非常细致的内容)
1.研究洗牌写法
2.研究随机颜色写法
遇到的问题:(遇到什么困难,怎么解决的)
1.对于洗牌和随机颜色 没见过 这个有点懵逼
麻烦师兄看看 这个两个方法注释
洗牌
function Shuffle(a) {
var length = a.length;
for(var i = length - 1, rand;i >= 0; i--){
rand = Math.floor(Math.random()*(i+1))
var p = a[i];
a[i] = a[rand];
a[rand] = p ;
}
}
注释
/* shuffle 打乱函数 a数组名称 数组有 0-8 9个值
变量 length长度 =a函数的长度 ;
for循环语句 变量i的值=函数长度-1 9-1,rand随机变量 ,i值>=0, i--
for循环语句 场景化1 i的值减1是 8 ,但是没有满足小于等于0要求条件,8就自动递增减1
代码块
rand 随机变量 = 运算函数 floor() 方法返回的是小于或等于函数参数,并且与之最接近的整数
x的值是 random方法 返回0.0-1.0之间的数
假设
x值与i+1值 先假设x值随机到0.333 i+1值7 取值7 假设随机值 rand=7
内部变量 p的值 = a数组 【赋值i 】 8
a【i】值= a 【 赋值 rand 】 7
a【rand】=p ;
*/
随机颜色
function randomlyColor(){
var red,blue,green;
red = Math.floor(Math.random() * 256);
do {
green = Math.floor(Math.random() * 256);
} while (green == red);
do {
blue = Math.floor(Math.random() * 256);
}while(blue == red || blue == green);
return("rgb(" + red + "," + green + "," + blue + ")");
}
注释
/* 函数声明 随机生成颜色函数
变量 红 蓝 green
red 红色值= floor返回下舍取整 random返回0-1的值 * 256
做
green 绿色 和红色的获取值条件一样
在什么期间
绿色等于红色值
做
蓝色 和绿色取值条件一样
在做什么期间 蓝色等于红色 或 蓝色等于绿色
返回 rgb的值是 3个参数计算后的值
*/
收获:(通过今天的学习,学到了什么知识)
1.js的运算方法
2.随机的两个方法
评论