发表于： 2018-12-05 19:35:22
1 718
今天完成的事：
做任务一，完成html，css部分，js部分尚未完成
明天计划的事：尽量完成任务一，把数组，循环，函数的知识在复习下 加深下印象。
遇到的问题：
，知识点虽然都学习了，但是任务一的思路有点理不清，不知从何下手。
解决办法：
经师兄指导大概有了任务一的思路
一，获取盒子的dom节点
二，设置一个全局变量
三，利用rgb设置盒子的随机背景颜色
四，获取随机三个盒子
1，设置while循环判断三个盒子是否重复
2，给三个随机盒子背景颜色赋值随机rgb
五，用onclick 点击事件 关联绑定开始按钮
1，设置计时事件 setInterval()
2，用for循环重置所有盒子背景颜色为原始颜色橙色
3，调用随机获取的三个盒子（背景颜色赋值随机rgb）
4，背景颜色rgb的值 变换时间设置为1000毫秒
六，用onclick 点击事件 关联绑定结束按钮
1，用for循环重置所有盒子背景颜色为原始颜色橙色（结束）
收获：
JavaScript HTML DOM - 改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
下面的例子会改变 <p> 元素的样式：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>777</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>
尝试一下 »
使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
元素被点击。
页面加载完成。
输入框被修改。
……
在接下来的章节，你会学到更多关于事件的知识。
本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
实例
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>
</body>
</html>
JavaScript indexOf() 方法
定义和用法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
注意： indexOf() 方法区分大小写。
语法
string.indexOf(searchvalue,start)
参数值
参数 描述
searchvalue 必需。规定需检索的字符串值。
start 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。
返回值
类型 描述
Number 查找指定字符串第一次出现的位置，如果没找到匹配的字符串则返回 -1。
实例
在字符串查找字符 "e" 第一次出现的位置:
var str="Hello world, welcome to the universe.";
var n=str.indexOf("e");
n 输出结果:
1
实例
在字符串第五个位置开始查找字符 "e" 第一次出现的位置:
var str="Hello world, welcome to the universe.";
var n=str.indexOf("e",5);
n 输出结果:
14
返回列表
评论