发表于： 2019-12-13 20:22:44
1 1161
今日完成：
写html页面
添加js代码
思考业务逻辑,
点击按钮,显示身份,数组已经传递出来,0代表杀手,1代表平民
思路:
分开做,先做到点击一次按钮,身份根据数组传递的数据改变,
1.设置函数,声明变量aaa,赋值aaa=0,aaa要添加到穿过来的数组里,当数组的索引值
2.声明一个变量,作用是显示身份牌上面的序号,因为从1开始,所以设置aaa+1,绑定html中输出序号的标签
3.html中设置一个空标签用来输出身份,绑定
4.设置判断语句,如果索引值所代表的的数组的值是0,就输出身份是杀手,值是1就输出身份平民
5.同理按钮中也要绑定设置输出序号aaa+1
设置函数:
console.log(cc4);//控制台查看是否传输成功,本地储存成功.会话不成功,原因待查询
function shenfen(){
var aaa=23;
aaa=aaa++//a++是先执行表达式后再自增，执行表达式时使用的是a的原值。
// ++a是先自增再执行表达示，执行表达式时使用的是自增后的a。
//所以这里是先执行aaa=0,执行完后aaa=1
document.getElementById("p1").innerHTML=aaa+1;//页面的序号从1开始,所以aaa+1
if(cc4[aaa]=0)//从传递来的数组序号0开始,数组中索引值代表的值是0,代表是杀手
{
document.getElementById("p2").innerHTML="身份:杀手";//身份输出杀手
}
else if(cc4[aaa]=1)//从传递来的数组序号0开始,数组中索引值代表的值是1,代表是平民
{
document.getElementById("p2").innerHTML="身份:平民";//身份输出平民
}
}
显示:
遇到问题:
如上显示,不管索引值aaa取值多少,点击按钮,显示都是平民
解决:等号(=)改为==or===
原因:=在js中是赋值的意思
测验:随机数组显示:
索引值0是0,即:杀手
当代码改为if(cc4[aaa]==1);f(cc4[aaa]=0)//不变
点击按钮,宁愿不显示,都不显示杀手
当两个都替换成==or===显示正常
遇到问题:
怎么替换html中的图片(用改变样式的方法是无效的)
解决:直接在绑定html元素,的后面直接后缀src="需要的图片"即可
//------------------------------------------------------------------------------------------------
扩展:
HTML DOM (文档对象模型)
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找(绑定)html元素,我之前已经写过,共有8种,常用的3种
1.id名
2.标签名
3.类名
ps:
1.除了id名,查找(绑定)时getElement后面要加s(标签名和类名是这样的)
2.绑定标签名和类名时,需要用数组的方法精确查找,哪怕只有一个,也要标签名(类名)[0]这样写,
(因为id具有唯一性,所以不需要这样写)
----------------------------------------------------------------------------------
改变HTML内容
ex:
document.getElementById("p1")//这是查找(绑定)id为p1的标签
document.getElementById("p1").innerHTML="新文本!";
描述:向查找标签输入文本内容,如果原标签有文本内容,就被覆盖(改变了)
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
显示:新文本!
描述;改变了<p>元素的内容
另一种写法:
<h1 id="header">旧标题</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
<p>"旧标题" 被 "新标题" 取代。</p>
显示:新标题
描述:
1."旧标题" 被 "新标题" 取代。
2.声明一个变量,赋值为查找or获得or绑定元素,然后变量名.innerHTML="字符串"
(使用 HTML DOM 来获得 id="header" 的元素)JavaScript 更改此元素的内容 (innerHTML)
-----------------------------------------------------------------------------------------------------
改变 HTML 属性//与下方样式区别对待,不要搞混
语法:document.getElementById(id).attribute=新属性值//前面绑定一样,后面根据场景设置需要用的词
ex:
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
描述:原图片为 smiley.gif,脚本将图片修改为 landscape.jpg
------------------------------------------------------------------------------------
改变 HTML 样式
语法：document.getElementById(id).style.property=新样式
总结:就是换下inner改为其他的
ex:
<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>
显示:
描述:对p1,p2改变了字体的颜色,大小,字体类型
----------------------------------------------------------------------------------
使用事件
HTML DOM 允许通过触发事件来执行代码
ex:
事件：
元素被点击。
页面加载完成。
输入框被修改。
... ...
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>
显示:
描述:点击按钮(点击事件)执行代码,代码内容字体变成红色
对事件做出反应
ex:
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>//js代码直接写在html页面
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>//js代码直接写在html页面
效果等于
<script>//js代码(函数)写在script中,html绑定点击事件,点击运行函数,函数运行输出在函数绑定的html的id
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
描述:点击字符串"点击文本",文本内容变为"Ooops"
ps:js代码触发事件的对象,和函数运行作用的目标是两回事,(可以作用在不同的目标)
ps:js代码触发事件的对象,和函数运行作用的目标是两回事,(可以作用在不同的目标)
使用 HTML DOM 来分配事件
ex:
ex:
<button id="myBtn">点这里</button>//点击事件都写在js(script)中,直只有绑定id,在js中为这个绑定id添加事件等
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
显示:
描述:名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。按钮点击时Javascript函数将会被执行。
//---------------------------------------------------------------------------------------
解决问题:
问题1:会话储存显示null,本地储存正常
原因:会话储存关掉页面数据就会消失的,需要整个过程需要从上一个页面传递到下个页面,在设置好会话储存后,直接在(新页面)下个页面刷新是无效的,因为上面页面数据没有上传,这个页面自然提取为null.
而本地储存,是一直存储在浏览器中的,要手动删除,否则一直存在,所以这里设置好代码,直接在新页面刷新,数据是上传了的,可以直接提取
解决:所以会话储存,在上个页面刷新跳转下个页面(传递过程),才能把值传上去,在下个页面取出来
问题2:设置=后,点击事件始终是平民
原因:在js代码中=是赋值的意思,等于意义的是==和===
解决:把=改为==or===
问题3:点击事件,显示效果只有第一次生效
原因:把变量var aaa=0写在了函数里面,这样每点击一次函数,执行代码都会运行一次var aaa=0,相当于重置了aaa的值,显示出来就是只有一次效果
解决:把变量调到函数外部,变成全局变量,让函数运转不经过这个变量
遇到问题:
1.会话储存显示null,卡了我很久,结果原因是对概念的不了解
2.=和==/===的问题,没想起来,js中=代表赋值
3.函数显示效果,只能点击一次,因为把具有重置效果的标量var aaa=0设置在函数内部,每次运行都重置了值
4.替换图片,直接src,改变html属性,直接绑定后设置
收获:
1.DOM获取html元素,改变的详细过程
2.概念的认知,和灵活运用,再碰到类似问题知道怎么解决
明日计划:继续js2-4
返回列表
评论