一、接上周
1.文字搬运
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字搬运</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width:830px;
height:300px;
margin:50px auto 0;
}
#box .left,
#box .right,
#box .middle {
border:1px solid #ccc;
}
#box .left,#box .right {
width:278px;
height:278px;
margin:10px;
padding:10px;
color: #ffa8a3;
float:left;
font-size:16px;
}
#box .middle {
float:left;
width:160px;
height:298px;
margin:10px;
border:1px solid #ccc;
}
#box .middle .btn {
display:block;
width:130px;
height:40px;
border:none;
outline:none;
margin:20px auto 0;
background:#ff8080;
color:#fff;
}
#box .middle .btn:hover {
background:#ff0000;
cursor:pointer;
}
#box .middle .progress {
display:none;
width:100%;
margin:50px 0 0;
text-align:center;
}
#box .middle .progress progress {
display:block;
width:120px;
height:20px;
margin:5px auto 0
}
#box .middle .progress span {
font-size:16px;
}
#box .middle .progress_quotes {
display:none;
width:100px;
margin:20px auto 0;
}
#box .middle .progress_quotes span {
display:inline-block;
width:12px;
height:32px;
border:1px solid #ccc;
}
#box .middle .progress_quotes span.on {
background: #ff2924;
}
#box .middle .count {
display:none;
width:50px;
height:20px;
margin:0 auto;
text-align:center;
line-height:20px;
font-size:16px;
}
</style>
</head>
<body>
<div id="box">
<div class="left">
点花蕊，散清香。 入，甚为清香。 伤心花不败，不落，我静待。 清铃合欢，随风摇曳，不止休，心依。 戴珠簪，于发间。 你嫣然一笑，我心醉。 丝发于指尖，宛若一丝香，香残余。 花开花落不休，溪水长流不止。 这一生，有你，已足够。
</div>
<div class="middle">
<button class="btn">搬运</button>
<div class="progress">
<progress value="0" max="100"></progress>
<span></span>
</div>
<div class="progress_quotes">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="count"></div>
</div>
<div class="right"></div>
</div>
<script>
window.onload = function () {
var oBox = document.getElementById("box");
var oL = oBox.children[0];
var oMid = oBox.children[1];
var oR = oBox.children[2];
var oBtn = oMid.children[0];
var oPro = oMid.children[1].children[0]; //进度条
var oPer= oMid.children[1].children[1]; //进度条百分比
var oSpan = oMid.children[2].children; //那五个span
var oCount = oMid.children[3]; //搬运的数字
var str = oL.innerHTML;
var length = str.length,
flag=false;
oBtn.addEventListener("click",fn,flag);
function fn () {
if (!flag) {
this.style.background = "#d70d19";
this.innerHTML = "搬运中...";
oMid.children[1].style.display = "block";
oMid.children[2].style.display = "block";
oCount.style.display = "block";
}
var i=0,
t=null;
function conveystr () {
i++;
oL.innerHTML = str.slice(i);
oR.innerHTML = str.slice(0, i);
oCount.innerHTML = i + "/" + length;
oPro.value = (i / length * 100);
oPer.innerHTML = ((i / length) * 100).toFixed(0) + "%";
t = setTimeout(conveystr, 100);
if (i === length) {
clearTimeout(t);
flag = true;
}
}
setTimeout(conveystr, 200);
function pqamination() {
var index = 0,
t1 = null,
j = 0;
function amination() {
oSpan[index].className = "";
oSpan[j].className = "on";
index = j;
j = (j === oSpan.length - 1) ? 0 : j + 1;
t1 = setTimeout(amination, 1000);
if (flag === true) {
oMid.children[1].style.display = "none";
oMid.children[2].style.display = "none";
oCount.style.display = "none";
oBtn.innerHTML = "搬运完成啦";
oBtn.style.background = "#ff8080";
clearTimeout(t1);
}
}
amination();
}
pqamination();
}
}
</script>
</body>
</html>
2.jq操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery操作表单全选、全不选的切换</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<form id="test-form" action="test">
<legend>请选择想要学习的编程语言：</legend>
<fieldset>
<p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
<p><label><input type="checkbox" name="language" value="javascript"> JavaScript</label></p>
<p><label><input type="checkbox" name="language" value="python"> Python</label></p>
<p><label><input type="checkbox" name="language" value="ruby"> Ruby</label></p>
<p><label><input type="checkbox" name="language" value="haskell"> Haskell</label></p>
<p><label><input type="checkbox" name="language" value="scheme"> Scheme</label></p>
<p><button type="submit">Submit</button></p>
</fieldset>
</form>
<script>
'use strict';
var form = $("#test-form"),
langs = form.find("[name = language]"),
selectAll = form.find("label.selectAll:checked"),
selectSpan = form.find("label.selectAll span.selectAll"),
deselectAll = form.find("label.selectAll span.deselectAll"),
invertSelect = form.find("a.invertSelect");
// 重置初始化状态:
form.find("*").show().off();
form.find(":checkbox").prop("checked",false).off();
deselectAll.hide();
form.off().submit(function (e) {
e.preventDefault();
alert(form.serialize());
//serialize()通过表单值创建URL编码文本字符串，在提交时，alert选中的语言
});
//当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
selectSpan.click(function(){
langs.prop("checked",true);
selectSpan.hide();
deselectAll.show();
});
//当用户去掉“全不选”时，自动不选中所有语言；
deselectAll.click(function(){
langs.prop("checked",false);
deselectAll.hide();
selectSpan.show();
});
//当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
invertSelect.click(function(){
langs.map(function () {
$(this).prop("checked",!$(this).prop("checked"));
});
});
langs.map(function(){
$(this).change(function(){//当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
if($('[name=language]:checked').length===5){
selectAll.prop("checked",true);
selectSpan.hide();
deselectAll.show();
}else{//当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
selectAll.prop("checked",false);
selectSpan.show();
deselectAll.hide();
}
});
});
</script>
</body>
3.jquery实现滚动导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物网</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
line-height: 1.7;
}
li {
list-style: none;
}
#content {
width: 800px;
padding: 20px;
margin: 0 auto;
}
#content h1 {
color: #0088bb;
}
#content .item {
margin-bottom: 20px;
padding: 20px;
border: 1px dotted #0088bb;
}
#content .item h2 {
font-size: 16px;
font-weight: bold;
border-bottom: 2px solid #0088bb;
margin-bottom: 10px;
}
#content .item li {
display: inline;
margin-right: 10px;
}
#content .item a img {
border: none;
width: 230px;
height: 230px;
}
#menu {
position: fixed;
top: 100px;
left: 50%;
margin-left: 400px;
width: 50px;
}
#menu ul li a {
display: block;
margin: 5px 0;
font-size: 14px;
font-weight: bold;
color: #333;
width: 80px;
height: 50px;
line-height: 50px;
text-decoration: none;
text-align: center;
}
#menu ul li a:hover,
#menu ul li a.current {
color: #fff;
background: #0088bb;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var items = $("#content").find(".item");
var menu = $("#menu");
var top = $(document).scrollTop();
//当前所在楼层（item） #id
var currentId = "";
items.each(function () {
var m = $(this);
//jQuery的offset()方法会返回一个对象，包含top和left属性。代表每一个item的顶部位置
var itemTop = m.offset().top;
//如果不减一个值，它只有上边到了，右边导航条的焦点才改变
if (top > itemTop - 200) {
currentId = "#" + m.attr("id");
} else {
return false;
}
});
//给相应楼层的a 设置current，取消其它楼层的current
var currentLink = menu.find(".current");
if(currentId && currentLink.attr("href") !== currentId){
currentLink.removeClass("current");
menu.find("[href=" + currentId + "]").addClass("current");
//用锚链实现
}
//console.log(top);
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#item1" class="current" >男装</a></li>
<li><a href="#item2" >女装</a></li>
<li><a href="#item3" >美妆</a></li>
<li><a href="#item4" >日用</a></li>
</ul>
</div>
<div id="content">
<h1>购物网</h1>
<div id="item1" class="item">
<h2>图一</h2>
<ul>
<li><a href="#" class="current"><img src="" alt="" /></a></li>
<li><a href="#"><img src="pic1.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic1.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic1.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic1.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic1.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic1.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic1.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic1.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic1.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>图二</h2>
<ul>
<li><a href="#"><img src="pic2.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic2.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic2.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic2.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic2.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic2.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic2.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic2.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic2.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>图三</h2>
<ul>
<li><a href="#"><img src="pic3.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic3.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic3.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic3.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic3.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic3.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic3.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic3.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic3.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>图四</h2>
<ul>
<li><a href="#"><img src="pic4.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic4.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic4.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic4.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic4.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic4.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic4.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic4.jpg" alt="" /></a></li>
<li><a href="#"><img src="pic4.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</body>
</html>
4.用原生js实现上述功能
.js
function haveClass ( obj,cls ) {
//正则表达式，验证是否包含class
return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
}
function removeClass ( obj,cls ) {
if( haveClass ( obj,cls )) {
//正则表达式替换
var reg = new RegExp(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
obj.className = obj.className.replace(reg,"")
//删了class
}
}
function addClass ( obj,cls ) {
if( !haveClass( obj,cls )) {
obj.className += " "+cls;
}
}
window.onload = function () {
window.onscroll = function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
var menu = document.getElementById("menu").getElementsByTagName("a");
// var item = document.getElementById("content").getElementsByClassName("item");
var item = document.getElementById("content","item");
var currentId = "";
for(var i=0;i<items.length;i++) {
var _item = items[i];
var _itemTop = _item.offsetTop;
if(top>_itemTop-200) {
current = "_item.id";
}
}
if(currentId) {
//给正确的menu下的a元素class赋值
for(var j=0;j<menus.length;j++) {
var _menu = menus[j];
//js获取的attr href属性是以http开头这样的，spilt（）拆分
var _href = _menu.href.split("#");
//再获取最后一个元素
if(_href[_href.length - 1] !== currentId){
removeClass(_menu,"current"); //调用函数
} else {
addClass(_menu,"current");
}
}
}
}
}
滚动时右侧导航的聚焦没实现
二、Ajax
又看了遍XHR创建对象、XHR请求、XHR响应、服务器响应、事件和几个实例，脱离在线编辑器，请求的时候在url上出了点问题
还看了点node.js
这周大家都期中考嘛，多用了些时间复习，下周还有两门QAQ
网友评论