发表于： 2019-03-09 20:50:21
1 681
今天完成的事情：
1、今天整理了一下思路，继续写了js任务二，感觉有些地方还不是很懂，还是需要继续学习，
2、今天看了很多师兄师姐们之前写的代码，学习到了师兄师姐对人数分配判断的方法，学到了很多之前不会的东西。
2，今天在师哥指导下学习了jquery，刚开始接触比较陌生，还需要更加深入的去了解并运用。
以下是今天所写的HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<title>身份页面</title>
<link rel="stylesheet" type="text/css" href="../css/js2.3.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/public.css">
</head>
<body>
<header>
<i class="i-1"></i>
<p class="tc title">查看身份</p>
<i class="i-2"></i>
</header>
<div class="main">
<div class="main-1">
<div class="number">
<p id="num">8</p>
</div>
<img src="images/js2-3_03.png" class="hidden1">
<img src="images/js2-3_04.png" class="hidden2">
<div class="role" >
<p class="role hidden2">角色：幽灵</p>
</div>
</div>
<button class="appearance" id="search">查看3号身份</button>
</div>
<script type="text/javascript" src="../js/js2.3.js"></script>
</body>
</html>
以下是css代码：
* {
max-width: 720px;
margin: 0 auto; }
header {
background-color: #29bde0;
position: relative;
padding: 1rem;
border-bottom: 1px solid white; }
header i {
display: inline-block;
transform: scale(0.6, 0.6);
width: 70px;
height: 70px;
position: absolute; }
header .i-1 {
background-image: url(../images/js2-3_1.png);
left: .5rem;
top: -.2rem; }
header .i-2 {
background-image: url(../images/js2-3_2.png);
right: .5rem;
top: -.3rem; }
header p {
font-size: 1.6rem;
color: white; }
.main {
background-color: #29bde0;
padding: 2rem; }
.main .main-1 {
background-color: #ffedc5;
width: 70%;
border: 4px solid white;
position: relative;
margin: 1rem auto 3rem auto;
height: 500px; }
.main .main-1 img {
display: block;
text-align: center;
padding: 6rem 1rem; }
.main .main-1 .number {
position: absolute;
z-index: 1;
background-color: white;
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: 44%;
top: -1.6rem; }
.main .main-1 .number p {
text-align: center;
font-size: 2rem;
color: #f56b81;
padding-top: .1rem; }
.main .main-1 .role {
text-align: center;
font-size: 2rem;
color: #29bde0;
margin-bottom: 2rem; }
button {
text-align: center;
display: block;
width: 71%;
font-size: 1.7rem;
height: 3rem;
color: white;
background-color: #fbb435;
border: none; }
/*# sourceMappingURL=js2-3.css.map */
以下是js代码：
var arr = sessionStorage.players;
players = JSON.parse(arr);
console.log(players);
//取序号
var para=document.getElementById('num');
var search=document.getElementById("search");//按钮键
var btnNum=0;//
var hid1=document.getElementsByClassName('hidden1');
var hid2=document.getElementsByClassName('hidden2');
var num=0;//身份号
var roles=0;//身份
//页面初始化
function reset(){
for (var i = 0; i < hid2.length; i++) {
hid2[i].style.display="none";
}
num+=1
para.textContent=num;
search.textContent="查看"+num+"号身份";
};
//点击按钮进入不同页面
window.onload=reset;
document.getElementById("search").onclick=function btnClick(){
//！！！！！！判断人数到达设定值！！！！！
if(btnNum==2*players.length-1){
document.getElementById("search").onclick=location.href="js2-4.html";
alert("法官查看")
//！！！！！！判断为偶数时！！！！！！
}else if(btnNum%2==0){
//显示角色图片
for (var i = 0; i < hid2.length; i++) {
hid2[i].style.display="block";
}
//隐藏翻牌图片
hid1[0].style.display="none";
//修改角色内容
hid2[1].textContent="角色:"+players[roles];
roles++
//修改身份号
para.textContent=num;
num++
//修改按钮内容
search.textContent="隐藏并传递给"+num+"号";
console.log(btnNum)
btnNum+=1;
if(btnNum==2*players.length-1){
search.textContent="法官查看";
}
//！！！！！判断为奇数时！！！！！！！！
}else{
//隐藏角色图片
for (var i = 0; i < hid2.length; i++) {
hid2[i].style.display="none";
}
//显示翻牌图片
hid1[0].style.display="block";
//修改身份号
para.textContent=num;
//修改按钮内容
search.textContent="查看"+num+"号身份";
btnNum+=1;
}
}
此处为当人数判断为偶数时所需执行的命令：
此处为当人数判断为奇数时所执行的分配方法：
具体思路就是平民和杀手以3:1分配，而当人数不足以分配均匀时，剩下的人数自动成为平民。
明天计划的事情：
1、明天的主要计划继续做js任务二，争取早日完成任务。
2、明天重点要学习jquery的相关知识，以及jquery的用法。
遇到的问题：
1、今天没有遇到太难解决的问题，在人数分配上通过师兄的讲解思路还是比较清晰的，不过在写代码的时候卡了一段时间，之后在看过师兄师姐们之前所写的代码后，理解并学会了该如何写。
收获：
1、今天重点学习了jquery的相关知识，知道了jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。
并且jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
同时也尝试了jquery的各种实例操作，其中包括jquery选择器、jquery事件、jquery滑动、jquery动画等等...
2、
jquery与js的区别是什么？js与jquery的用法区别介绍
在学习js的时候我们肯定能够接触到jquery，那么，js与jquery之间有什么区别呢？本篇文章将给大家来分享关于jquery与js之间的区别比较，有需要的小伙伴可以参考一下，希望能够帮助到你们。
我们来简单看一下jquery与js的概念。
js是一种脚本语言，常用于网页客户端编程，使网页在客户端浏览器中，实现更多地动态功能，表现出更加丰富的视觉效果。
jquery是一个快速、简洁的JavaScript框架，极大的简化了javascript编程。
看完了对jquery与js的介绍，我们就来继续看js与jquery的用法区别。
1、jquery与js最直观的区别就是外观上jQuery对象比js对象多了"$()"。
2、jquery与js操作内容的区别
非表单元素（如果是文本就用text方法，如果是html代码就用html方法）
例：
div.text();无参数的情况下是取值div.text("aaaa");有参数的情况下是赋值div.html();无参数的情况下是取值div.html("aaaa");有参数的情况下是赋值
表单元素
JS：
div.value;取值；
div.value = xxx;赋值
JUQERY：
div.val();无参数是取值，有参数是赋值。
3、jquery与js操作属性的区别
JS里面用来操作属性的方法是
div.setAttribute("","");——设置属性、修改属性
div.removeAttribute("");——移除属性，引号里面写一个属性名
div.getAttribute();——获取属性
JQUERY里面用来操作属性的方法
添加属性：div.attr("test","aa");——给这个attr方法加入参数，属性名叫做test，属性的值是aa。
移除属性：div.removeAttr("test");——移除test这条属性。
获取属性：div.attr("test");——在attr方法里面直接写入一个属性的名就可以了。
4、jquery与js操作样式的区别
JS里面操作样式的关键字是style。
例：
div.style.backgroundColor= "red";
把这个div的背景色设置成为了红色。
JQUERY里面操作样式的关键字是css。
例：
div.css("background-color","yellow");
把这个div的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化。
注意：
JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的。
JQUERY操作样式的方法可以是内联的也可以是内嵌的。
返回列表
评论