发表于: 2019-03-20 20:21:28

1 838


今天完成的事情:修改了任务十三图片大小不一,用俩种办法求随机数,一种洗牌,一种逻辑运算符||。
明天计划的事情:js任务二
遇到的问题:暂无
收获:


任务:

1、任务需要判断,即点击按钮则功能开始。

相关知识点:

①html里运用button元素。

<button type="button" onclick="start()" >开始闪烁</button>

属性解读:type类型,代表它是一个button;

                 onclick=“脚本命名()”;代表点击button,则开始运行脚本名为start的的脚本(函数)。此名字是可以自己编写,但应符合命名规范。

       js函数命名规范                                                                                               

      命名方法:小驼峰式命名法。

                    小驼峰式命名法:首字母小写。eg:studentInfo、userInfo、productInfo

      命名规范:前缀应当为动词。

      命名建议:可使用常见动词约定,如下图

  动词      含义                                                         返回值

  can       判断是否可执行某个动作(权限)                 函数返回一个布尔值。true:可执行;false:不可执行

  has       判断是否含有某个值                                 函数返回一个布尔值。true:含有此值;false:不含有此值

   is         判断是否为某个值                                     函数返回一个布尔值。true:为某个值;false:不为某个值get         获取某个值                                               函数返回一个非布尔值

set         设置某个值                                               无返回值、返回是否设置成功或者返回链式对象

load       加载某些数据                                            无返回值或者返回是否加载完成的结果

②js里对应的脚本书写

function start() { 运行内容}

③js文件应放在什么位置。

放在</body>前

<script type="text/javascript" src="Task1试验1.js"></script>
</body>

命名规范:项目命名

                全部采用小写方式, 以下划线分隔。示例:my_project_name;

2、需要随机变色,则需要随机选中box,以及随机颜色。

2.1如何将box与js函数联系在一起?或者说如何让html里元素与js中函数相关联?

①涉及知识为DOM。HTML DOM 树。

②将盒子与js联系在一起:

在js里:

var z = document.getElementsByClassName('box');

属性解读:

var 变量

document 理解为固定用法;

.getElementsByClassName  查找 HTML 中元素的class。

('box')所要查找的名字。

整体含义:即html里class名字为box的所有元素,为变量z。【至于是变量还是常量现在还没具体了解】

相关知识:

命名规范:变量常量

JS中变量和常量的定义

var只能声明一个变量,这个变量可以保存任何数据类型的值

ES6之前并没有定义声明常量的方式,ES6标准中引入了新的关键字

const来定义常量使用const定义常量后,常量无法改变

③如何产生随机数。(返回暂时可以理解为输出)

一、第一种方法:

第一步:了解相关最基础的函数:Math.random()返回介于 0 (包含) ~ 1(不包含) 之间的一个随机数。

                                                     Math.random()*9返回介于 0 (包含) ~ 9(不包含) 之间的一个随机数。

第二步:第一步得到的随机数是包含小数的,我们所需要的是整数。

             用到函数:Math.floor(x)向下取整计算,它返回的是 ≤ X 的 max的整数。即x=3.1输出为3;x=4输出为4。

第三步:得到一个随机数:第一步与第二步函数结合。

              在js里:

var a = Math.floor(Math.random() * 9);

第四步:得到三个随机数:重复第三步

var a = Math.floor(Math.random() * 9);
var b = Math.floor(Math.random() * 9);
var c = Math.floor(Math.random() * 9);

第五步:目前得到随机数,存在相等的可能性,但我们要的是不相等的三个随机数。即要加上条件判断。

相关知识:js逻辑运算符。

运算符描述
&&and       俩真才真,一否就否
||or一真就真,俩否才否
!not

     || 

       只要有一个条件为true时,结果就为true;

       当两个条件都为false时,结果才为false;

       当一个条件为true时,后面的条件不再判断;

例子 “a=b || b=c :若     a=b或 b=c,则这个判断就真;当a≠b≠c则这个判断就位假。  

   &&

      两边条件都为true时,结果才为true;

      如果有一个为false,结果就为false;

      当第一个条件为false时,就不再判断后面的条件

例子 “a=b && b=c :若     a=b=c,则这个判断为真;当a≠b或b≠c则这个判断就为假。  

相关知识:js的for循环和条件运算

即当我们通过第四步得到的3个随机数后,经过|| 或&&判断后,如果不符合我们要求,我们应该再次获得三个随机数。但我们不能再来设置新的变量,这样会使代码繁琐无用。这时采用for循环。

for (语句 1; 语句 2; 语句 3){被执行的代码块}:当条件符合(语句 1; 语句 2; 语句 3)就执行{}里的代码块。

即以|| 或&&作为条件,来构建新的函数,得到不相等的随机数。

   

for (; a == b || b == c || c == a;) {//当abc有任意两个相等,就开始运行,直到没有相等,才输出这三个数。选择三个不相同的随机数
   var a = Math.floor(Math.random() * 9);
   var b = Math.floor(Math.random() * 9);
   var c = Math.floor(Math.random() * 9);
}

二、第二种方法:(洗牌)

原理:先排列一个数组,通过数组的数互换顺序而时他们打乱,之后在跳出其中随机数。

第一步:建立一个数组

let A = [0,1,2,3,4,5,6,7,8];

因为A是不变的,所以是常量,所以是let。

第二步:建立一个函数

function randomArray(A, B) { 代码块}//myFunction(var1,var2),调用函数时,参数可以在函数中使用。您可以发送任意多的参数,由逗号 (,) 分隔.//这一大段都是函数,(var1,var2)参数,A代表数组,B代表所需要随机数的个数。

第三步:函数解析

function randomArray(A, B) {
   var s = A.slice(0), i = A.length, min = i - B, c,d;//S:代表表示新数组//slice(单值)是提取字符串中第几到字符串结束//.length字符串的长度//CD作用起转换数值。
   while (i-- > min) {//当i-1的值小于min的值,自我感觉这个条件没有,可以舍弃,除非B=1或0这个条件才不生效。
       d = Math.floor((i + 1) * Math.random());//Math.floor(x)向下取整计算,它返回的是小于或等于函数参数//Math.random()返回介于 0 (包含) ~ 1(不包含) 之间的一个随机数。
       c = s[d];//C的值是S数组的第D个数(从0开始计数)
       s[d] = s[i];//S数组的第D个数的值替换成S的第i个数值。此时S数组发生第一次变化,这是有两个相同的值
       s[i] = c;//将S数组的第i个数的值替换为C。
   }
return s.slice(min);//输入S数组的第min个开始到结束之间的数值。
}

将需要打乱的数组,赋予s:即 var s = A.slice(0),此时s输出为0,1,2,3,4,5,6,7,8


相关知识:slice()

slice(start(包含), end(不包含)) 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

slice(单值)是提取字符串中第几到字符串结束

字符串中第一个字符位置为 0, 第二个字符位置为 1, 以此类推。

例子:var str="Hello world!";

var n=str.slice(1,5);      n 输出 ello

          str.slice(0)             输出 Hello world!,从0开始(包含)到整个字符串结束。

          str.slice(3);            输出  llo world!,     从3开始(包含)到整个字符串结束

          str.slice(-1)            输出!,                  从左边开始为0,从右边开始为-1.

相关知识:.length

.length表示字符串的长度(字符数)。。

例子:var txt = "Hello World!";
      var     n=txt.length;    n输出为12



                              


返回列表 返回列表
评论

    分享到