Skip to content

P
Python-100-Days
Commit 77ea3583 authored by jackfrued's avatar jackfrued
Browse files
Options

更新了Web前端的代码

parent ccf412d5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1809 additions and 9 deletions
Day21-30/code/demo02/css/jquery-ui.min.css 0 → 100644
View file @ 77ea3583
This diff is collapsed.
Day21-30/code/demo02/example01.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3><span id="counter">5</span>秒以后自动跳转到百度</h3>
<script>
var span = document.getElementById('counter');
var num = 5;
setTimeout(function() {
num -= 1;
if (num > 0) {
span.textContent = num;
setTimeout(arguments.callee, 1000);
} else {
location.href = 'http://www.baidu.com';
}
}, 1000);
</script>
</body>
</html>
Day21-30/code/demo02/example02.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
+function(n) {
for (var i = 0; i < n; i += 1) {
alert('OK');
}
}(3);
// n! = n * (n - 1)!
function f(n) {
if (n == 0 || n == 1)
return 1;
return n * arguments.callee(n - 1);
}
alert(f(5));
function foo() {
alert(arguments.callee);
alert(arguments.callee.caller);
return arguments[0] + arguments[1];
}
alert(foo(1, 2));
</script>
</body>
</html>
Day21-30/code/demo02/example03.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#timer {
float: right;
}
</style>
</head>
<body>
<div id="timer"></div>
<script>
var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
var div = document.getElementById('timer');
setInterval(function() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var weekday = weekdays[date.getDay()];
var fullStr = year + '年' +
(month < 10 ? '0' + month : month) + '月' +
(day < 10 ? '0' + day : day) + '日&nbsp;&nbsp;' +
(hour < 10 ? '0' + hour : hour) + ':' +
(minute < 10 ? '0' + minute : minute) + ':' +
(second < 10 ? '0' + second : second) + '&nbsp;&nbsp;' +
'星期' + weekday;
div.innerHTML = fullStr;
}, 1000);
</script>
</body>
</html>
Day21-30/code/demo02/example04.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 940px;
height: 430px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 绑定事件除了用标签属性之外还有哪些更好的做法 -->
<div id="container" onmouseover="stopChange()" onmouseout="resumeChange()">
<img id="adv" src="img/slide-1.jpg">
</div>
<script>
// 除了getElementById还有哪些获取元素的方法
// - getElementsByTagName()
// - getElementsByClassName()
// - querySelector()
// - querySelectorAll()
var img = document.getElementById('adv');
var currentIndex = 0;
var timerId = 0;
resumeChange();
function stopChange() {
window.clearInterval(timerId);
}
function resumeChange() {
timerId = setInterval(function() {
currentIndex += 1;
currentIndex %= 4;
img.src = 'img/slide-' + (currentIndex + 1) + '.jpg';
}, 3000);
}
</script>
</body>
</html>
Day21-30/code/demo02/example05.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="foo()">确定</button>
<script>
function foo() {
alert('Hello, world!');
}
</script>
</body>
</html>
Day21-30/code/demo02/example06.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="message">Hello, world!</h1>
<button id="btn">0</button>
<script>
var counter = 0;
var btn = document.getElementById('btn');
var h1 = document.getElementById('message');
function f1() {
alert('按钮被点击了!');
if (btn.removeEventListener) {
btn.removeEventListener('click', f1);
} else {
btn.detachEvent('onclick', f1);
}
}
function f2() {
counter += 1;
btn.textContent = counter;
}
function f3() {
h1.textContent = 'Goodbye, world!';
}
if (btn.addEventListener) {
btn.addEventListener('click', f1);
btn.addEventListener('click', f2);
btn.addEventListener('click', f3);
} else {
// 低版本IE浏览器
btn.attachEvent('onclick', f1);
btn.attachEvent('onclick', f2);
btn.attachEvent('onclick', f3);
}
</script>
</body>
</html>
Day21-30/code/demo02/example07.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#one {
width: 400px;
height: 400px;
background-color: red;
}
#two {
width: 300px;
height: 300px;
background-color: green;
}
#three {
width: 200px;
height: 200px;
background-color: blue;
}
#two, #three {
position: relative;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
<script>
(function() {
function f1(evt) {
alert('I am one');
}
function f2() {
alert('I am two');
}
function f3(evt) {
alert('I am three');
evt = evt || window.event;
// 阻止事件传播行为(冒泡或捕获)
if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
// 要么是全局作用域 要么是函数级作用域
// 事件捕获 - 从外层向内层传递事件的过程
// 事件冒泡 - 从内层向外层传递事件的过程(默认)
// 内嵌的元素在响应事件之后会继续将事件传递到它的父元素
var fs = [f1, f2, f3];
var ids = ['one', 'two', 'three'];
for (var i = 0; i < ids.length; i += 1) {
var div = document.getElementById(ids[i]);
if (div.addEventListener) {
// 如果需要使用事件捕获可以传入第三个参数并赋值为true
div.addEventListener('click', fs[i]);
} else {
div.attachEvent('onclick', fs[i]);
}
}
})();
</script>
</body>
</html>
Day21-30/code/demo02/example08.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="foo" href="http://www.baidu.com">百度一下</a>
<script>
var aList = document.getElementsByName('foo');
aList[0].addEventListener('click', function(evt) {
evt = evt || window.event;
if (!confirm('真的要去百度吗?')) {
// 阻止事件的默认行为
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
});
</script>
</body>
</html>
Day21-30/code/demo02/example09.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em>&nbsp;<em>figs</em></li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<script src="js/list.js"></script>
</div>
<script>
var elems = document.querySelectorAll('#page .hot');
for (var i = 0; i < elems.length; i += 1) {
alert(elems[i].textContent);
}
var em = document.querySelector('#one>em');
alert(em.textContent);
</script>
</body>
</html>
Day21-30/code/demo02/example10.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label>你的爱好:&nbsp;</label>
<input type="checkbox" name="fav">旅游
<input type="checkbox" name="fav">游戏
<input type="checkbox" name="fav">美食
<input type="checkbox" name="fav">阅读
<input type="checkbox" name="fav">睡觉
<input type="checkbox" name="fav">其他
<a href="javascript:void(0);">全选</a>
<a href="javascript:void(0);">取消</a>
<a href="javascript:void(0);">反选</a>
</form>
<script>
(function() {
var allAnchors = document.querySelectorAll('form a');
var favList = document.querySelectorAll('input[name=fav]');
allAnchors[0].addEventListener('click', function() {
for (var i = 0; i < favList.length; i += 1) {
// favList[i].setAttribute('checked', '');
favList[i].checked = true;
}
});
allAnchors[1].addEventListener('click', function() {
for (var i = 0; i < favList.length; i += 1) {
// favList[i].removeAttribute('checked');
favList[i].checked = false;
}
});
allAnchors[2].addEventListener('click', function() {
for (var i = 0; i < favList.length; i += 1) {
favList[i].checked = !favList[i].checked;
}
});
})();
</script>
</body>
</html>
Day21-30/code/demo02/example11.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
width: 450px;
margin: 0 auto;
}
#num {
text-align: center;
display: inline-block;
width: 180px;
height: 30px;
border: none;
border-bottom: 1px solid darkgray;
font-size: 18px;
outline: none;
}
#ok, #reset {
background-color: red;
color: white;
width: 120px;
height: 30px;
font-size: 18px;
border: none;
cursor: pointer;
outline: none;
}
#hint {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<input id="num" type="text" placeholder="请输入你猜的数字">
<button id="ok">确定</button>
<button id="reset">重新开始</button>
<div id="hint"></div>
</div>
<script src="js/mylib.js"></script>
<script>
(function() {
function guess() {
total += 1;
var numStr = $('num').value;
var num = parseInt(numStr);
if (num == numStr) {
var hint = '你猜的是' + num + ', ';
if (num < answer) {
hint += '大一点!';
} else if (num > answer) {
hint += '小一点!';
} else {
hint += '恭喜你猜对了!';
$('ok').disabled = true;
$('num').disabled = true;
if (total > 7) {
hint += '<br>智商捉急!!!';
}
}
$('hint').innerHTML += '<p>' + hint + '</p>';
} else {
alert('输入错误, 请重新输入!');
}
$('num').value = '';
$('num').focus();
}
var answer = parseInt(Math.random() * 100 + 1);
var total = 0;
bind($('num'), 'keypress', function(evt) {
evt = evt || window.event;
if (evt.keyCode == 13) {
guess();
} else if (evt.keyCode < 48 || evt.keyCode > 57) {
preventDefault(evt);
}
});
bind($('ok'), 'click', guess);
bind($('reset'), 'click', function() {
answer = parseInt(Math.random() * 100 + 1);
total = 0;
$('hint').innerHTML = '';
$('num').disabled = false;
$('ok').disabled = false;
});
})();
</script>
</body>
</html>
Day21-30/code/demo02/example12.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#fruits li {
width: 150px;
height: 30px;
background-color: darkolivegreen;
color: white;
list-style: none;
border-bottom: 1px solid lightgray;
text-align: center;
font: 18px/30px "微软雅黑";
}
#fruits li a {
text-decoration: none;
margin-left: 30px;
}
#fruits li a:link, #fruits li a:visited {
color: white;
}
</style>
</head>
<body>
<h1>水果列表</h1>
<hr>
<ul id="fruits">
<li>苹果<a href="javascript:void(0);">x</a></li>
<li>香蕉<a href="javascript:void(0);">x</a></li>
<li>草莓<a href="javascript:void(0);">x</a></li>
</ul>
<input id="fruit" type="text">
<button id="ok">确定</button>
<script src="js/mylib.js"></script>
<script>
function removeItem(evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
$('fruits').removeChild(target.parentNode);
}
+function() {
var aList = document.querySelectorAll('#fruits li a');
for (var i = 0; i < aList.length; i += 1) {
bind(aList[i], 'click', removeItem);
}
bind($('ok'), 'click', function() {
var fruit = $('fruit').value;
if (fruit.trim().length > 0) {
var li = document.createElement('li');
li.textContent = fruit;
var a = document.createElement('a');
a.href = 'javascript:void(0);';
a.textContent = 'x';
bind(a, 'click', removeItem);
li.appendChild(a);
li.style.backgroundColor = 'coral';
li.style.fontFamily = '楷体';
$('fruits').insertBefore(li, $('fruits').firstChild);
$('fruit').value = '';
}
});
}();
</script>
</body>
</html>
Day21-30/code/demo02/example13.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- Ajax (Asynchronous JavaScript and XML) -->
<!-- JSON (JavaScript Object Notation) -->
<script>
var stu = {
"name": "骆昊",
"age": 15,
"study": function(courseName) {
alert(this.name + "正在学习" + courseName);
},
"watchAV": function() {
if (this.age < 18) {
alert(this.name + '只能观看《熊出没》.');
} else {
alert(this.name + '可以观看岛国片.');
}
}
};
stu.study('Python');
stu.watchAV();
</script>
</body>
</html>
Day21-30/code/demo02/example14.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="loadBtn">加载</button>
<script src="js/mylib.js"></script>
<script>
+function() {
bind($('loadBtn'), 'click', function() {
// 创建异步请求对象
var xhr = new XMLHttpRequest();
if (xhr) {
var url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&num=10';
// 第一个参数 - 请求的方式get或post
// 第二个参数 - 请求的资源对应的URL(统一资源定位符)
// 第三个参数 - true表示异步请求(不中断用户体验的非阻塞式请求)
xhr.open('get', url, true);
// 绑定事件回调函数(服务器响应完成并成功后要对页面进行局部刷新)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 将服务器返回的数据解析成JSON
var json = JSON.parse(xhr.responseText);
var mmList = json.newslist;
for (var i = 0; i < mmList.length; i += 1) {
var mm = mmList[i];
// 动态创建<img>标签并绑定src属性
var img = document.createElement('img');
img.src = mm.picUrl;
img.width = 300;
document.body.insertBefore(img, $('loadBtn'));
}
}
};
xhr.send();
} else {
alert('你的浏览器是一坨屎!');
}
});
}();
</script>
</body>
</html>
Day21-30/code/demo02/example15.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<p class="foo">疑似地上霜</p>
<p>举头望明月</p>
<p class="foo">低头思故乡</p>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
// $('.foo').hide();
// console.log($('p:contains("故乡")').text())
for (var i = 0; i < 5; i += 1) {
$(document.body).prepend($('p:first').clone());
}
});
</script>
</body>
</html>
Day21-30/code/demo02/example16.html 0 → 100644
View file @ 77ea3583
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQueryUI选项卡效果</title>
<link rel="stylesheet" href="css/jquery-ui.min.css">
</head>
<body>
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">Nunc tincidunt</a>
</li>
<li>
<a href="#tabs-2">Proin dolor</a>
</li>
<li>
<a href="#tabs-3">Aenean lacinia</a>
</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function() {
$('#tabs').tabs();
});
</script>
</body>
</html>
\ No newline at end of file
Day21-30/code/demo02/example17.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="login" action="" method="post">
<p>
<input type="text" name="username" placeholder="请输入用户名">
<span style="color: red; font-size: 12px"></span>
</p>
<p>
<input type="password" name="password" placeholder="请输入口令">
</p>
<p>
<input type="submit" value="登录">
</p>
</form>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('input:first').val(localStorage.uid);
$('#login').on('submit', function(evt) {
evt.preventDefault();
var username = $('input:first').val();
if (/^[a-zA-Z][a-zA-Z0-9_]{5,19}$/.test(username)) {
localStorage.uid = username;
evt.target.submit();
} else {
$('input:first').next().text('请输入有效的用户名');
}
});
});
</script>
</body>
</html>
Day21-30/code/demo02/example18.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-2 column">
<img alt="140x140" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/140/140/default.jpg" />
</div>
<div class="col-md-10 column">
<h3>
h3. 这是一套可视化布局系统.
</h3>
<ul class="nav nav-tabs">
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">简介</a>
</li>
<li class="disabled">
<a href="#">信息</a>
</li>
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">操作</a>
</li>
<li>
<a href="#">设置栏目</a>
</li>
<li>
<a href="#">更多设置</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">分割线</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="carousel slide" id="carousel-830515">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-830515">
</li>
<li data-slide-to="1" data-target="#carousel-830515">
</li>
<li data-slide-to="2" data-target="#carousel-830515">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
<div class="carousel-caption">
<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
<div class="carousel-caption">
<h4>
Second Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
<div class="carousel-caption">
<h4>
Third Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-830515" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-830515" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong> 编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>Ruby</small> 社区中。
</p>
<table class="table">
<thead>
<tr>
<th>
编号
</th>
<th>
产品
</th>
<th>
交付时间
</th>
<th>
状态
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li>
<a href="#">Prev</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>
</div>
<div class="col-md-4 column">
<ul>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ul>
<ol>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ol>
</div>
</div>
<div class="row clearfix">
<div class="col-md-4 column">
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong> 编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>Ruby</small> 社区中。
</p>
</div>
<div class="col-md-4 column">
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong> 编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>Ruby</small> 社区中。
</p>
</div>
<div class="col-md-4 column">
<p>
<em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong> 编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>Ruby</small> 社区中。
</p>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
</body>
</html>
\ No newline at end of file
Day21-30/code/demo02/homework01.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#tel {
width: 500px;
height: 100px;
text-align: center;
font: bolder 72px/100px Arial;
margin: 50px auto;
background-color: blue;
color: yellow;
}
#buttons {
width: 500px;
margin: 0 auto;
text-align: center;
}
#buttons > button {
width: 120px;
height: 40px;
background-color: red;
color: white;
font: 28px/40px "微软雅黑";
border: none;
margin: 0 10px;
}
</style>
</head>
<body>
<!-- 高内聚 低耦合 (high cohesion low coupling)-->
<div id="tel">13012345678</div>
<div id="buttons">
<button id="startButton">开始</button>
<button id="stopButton">停止</button>
</div>
<script>
// window - BOM
// - setTimeout / clearTimeout
// - setInterval / clearInterval
// - alert / prompt / confirm
// - document / location / history / screen / navigator
var tels = [];
for (var i = 0; i < 100; i += 1) {
tel = '13';
for (var j = 0; j < 9; j += 1) {
tel += parseInt(Math.random() * 10);
}
tels[i] = tel;
}
var startButton = document.getElementById('startButton');
var stopButton = document.getElementById('stopButton');
// 给标签绑定事件回调(callback)函数
// 我们知识事件发生时要做什么但我们不知道事件什么时候发生
// 在这种场景我们就需要提供一个回调函数(不是自己调用而是留给他人调用)
var timerId = 0;
var luckyTel = '';
startButton.onclick = function() {
duration = parseInt(Math.random() * 950 + 50);
timerId = setTimeout(function() {
var index = parseInt(Math.random() * tels.length);
luckyTel = tels[index];
displayTel = luckyTel.substring(0, 3) + '****' +
luckyTel.substring(7, 11)
document.getElementById('tel').textContent = displayTel;
duration = parseInt(Math.random() * 950 + 50);
timerId = setTimeout(arguments.callee, duration);
}, duration);
};
stopButton.onclick = function() {
clearInterval(timerId);
alert('被抽中的幸运号码是: ' + luckyTel);
};
</script>
</body>
</html>
Day21-30/code/demo02/homework02.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#adv {
width: 200px;
height: 200px;
background-color: blue;
color: yellow;
position: fixed;
right: 50px;
top: 50px;
}
#adv button {
float: right;
}
</style>
</head>
<body>
<div id="adv">
<button>关闭</button>
</div>
<script src="js/mylib.js"></script>
<script>
+function() {
var urls = ['https://www.baidu.com', 'https://www.360.cn/'];
var btn = document.querySelector('#adv button');
var numberOfHits = 0;
bind(btn, 'click', function() {
if (numberOfHits < 2) {
window.open(urls[numberOfHits]);
// $('adv').style.backgroundColor = 'rgba(120, 50, 80, 0.5)';
} else {
$('adv').style.visibility = 'hidden';
}
numberOfHits += 1;
});
}();
</script>
</body>
</html>
Day21-30/code/demo02/homework03.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
width: 800px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
#panel {
width: 800px;
margin: 10px auto;
text-align: center;
}
.piece {
width: 80px;
height: 80px;
float: left;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel">
<button id="addBtn">添加</button>
<button id="flaBtn">闪烁</button>
</div>
<script src="js/mylib.js"></script>
<script>
function randomColor() {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b +')';
}
(function() {
var counter = 0;
bind($('addBtn'), 'click', function() {
if (counter < 50) {
counter += 1;
var div = document.createElement('div');
div.className = 'piece';
div.style.backgroundColor = randomColor();
$('container').appendChild(div);
}
});
var timer = 0;
bind($('flaBtn'), 'click', function() {
if (!timer) {
timer = setInterval(function() {
var allPieces = $('container').children;
for (var i = 0; i < allPieces.length; i += 1) {
allPieces[i].style.backgroundColor = randomColor();
}
}, 200);
}
});
}());
</script>
</body>
</html>
Day21-30/code/demo02/index.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="">
<style></style>
</head>
<body>
<!-- BOM(浏览器对象模型) -->
<script>
var name = window.prompt('请输入你的名字: ');
var msg = name != 'null' && name.trim() != '' ?
'你好, ' + name + '!' : '大家好!';
window.alert(msg);
if (window.confirm('确定要退出吗?')) {
window.close();
} else {
// window.open('http://www.baidu.com', '百度一下')
// window.moveTo(500, 500);
window.print();
}
</script>
</body>
</html>
Day21-30/code/demo02/jd_cart.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 20px auto;
}
#cart {
margin: 0 auto;
width: 850px;
}
#cart-header {
height: 40px;
background-color: lightgray;
margin-bottom: 20px;
}
#cart-header div {
line-height: 40px;
}
.left {
float: left;
}
.right {
float: right;
}
.w110 {
width: 100px;
}
.ml10 {
margin-left: 10px;
}
.w120 {
width: 120px;
}
.w250 {
width: 250px;
}
.center {
text-align: center;
}
.w20 {
width: 20px;
}
.w90 {
width: 90px;
}
.clear {
clear: both;
}
#cart-items>div {
height: 100px;
}
#cart-items>div>div {
line-height: 100px;
}
.w250 span {
display: inline-block;
font-size: 12px;
line-height: 16px !important;
}
.single-item {
border-bottom: 1px solid gray;
}
.small-button {
display: inline-block;
width: 20px;
height: 20px;
border: none;
}
.big-button {
color: white;
background-color: red;
display: inline-block;
width: 120px;
height: 40px;
border: none;
font-size: 22px;
}
#totalCount, #totalPrice {
color: red;
}
#totalPrice {
font: bolder 20px Arial;
display: inline-block;
width: 150px;
}
#cart a {
text-decoration: none;
}
#cart a:link, #cart a:visited, #cart a:active {
color: gray;
}
</style>
</head>
<body>
<div id="cart">
<div id="cart-header">
<div class="left w110 ml10">
<input id="selectAll" type="checkbox">
<label for="selectAll">全选</label>
</div>
<div class="left w250">商品</div>
<div class="left w120 center">单价</div>
<div class="left w120 center">数量</div>
<div class="left w120 center">小计</div>
<div class="left w120 center">操作</div>
</div>
<div id="cart-items">
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a1.jpg">
</a>
</div>
<div class="left w250">
<span>
海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
</span>
</div>
<div class="left w120 center">￥<span class="price">138.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" readonly type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">￥<span>138.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a2.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
</span>
</div>
<div class="left w120 center">￥<span class="price">128.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" readonly type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">￥<span>128.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a3.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
</span>
</div>
<div class="left w120 center">￥<span class="price">99.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" readonly type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">￥<span>99.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
</div>
<div id="cart-footer">
<div class="clear left">
<a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
</div>
<div class="right">
<span>总共选中了<span id="totalCount">0</span>件商品</span>
<span>总计: <span id="totalPrice">￥0.00</span></span>
<button id="pay" class="big-button">去结算</button>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
function calcTotal() {
var amountsInput = $('.single-item input[type=text]');
var pricesSpan = $('.single-item .price');
var checkboxes = $('.single-item input[type=checkbox]');
var totalAmount = 0;
var totalPrice = 0;
amountsInput.each(function(index) {
if (checkboxes[index].checked) {
var amount = parseInt($(this).val());
totalAmount += amount;
var price = parseFloat($(pricesSpan[index]).text());
var currentPrice = (price * amount).toFixed(2);
$(this).parent().next().find('span').text(currentPrice);
totalPrice += parseFloat(currentPrice);
}
});
$('#totalCount').text(totalAmount);
$('#totalPrice').text('￥' + totalPrice.toFixed(2));
}
$('#selectAll').on('click', function(evt) {
$('.single-item input[type=checkbox]').prop('checked', evt.target.checked);
calcTotal();
});
$('.single-item button').on('click', function(evt) {
var op = $(evt.target).text();
if (op == '-') {
var numInput = $(evt.target).next();
var num = parseInt(numInput.val());
if (num > 1) {
numInput.val(num - 1);
}
} else {
var numInput = $(evt.target).prev();
var num = parseInt(numInput.val());
if (num < 200) {
numInput.val(num + 1);
}
}
$(evt.target).parent().parent().find('input[type=checkbox]').prop('checked', true);
calcTotal();
});
$('.single-item input[type=checkbox]').on('click', function() {
calcTotal();
});
$('.single-item a').on('click', function(evt) {
if (confirm('确定要删除该商品吗?')) {
$(evt.target).parent().parent().remove();
calcTotal();
}
});
$('#clearSelected').on('click', function() {
if (confirm('确定要删除选中的商品吗?')) {
$('.single-item').each(function() {
if ($(this).find('input:checkbox').prop('checked')) {
$(this).remove();
}
});
calcTotal();
}
});
});
</script>
</body>
</html>
Day21-30/code/demo02/jquery01.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#page ul li {
list-style: none;
width: 240px;
height: 40px;
text-align: center;
border-bottom: 1px solid darkgray;
background-color: darkcyan;
color: white;
font: 18px/40px Arial;
}
#data {
border-collapse: collapse;
}
#data td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em>&nbsp;<em>figs</em></li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot"><span>honey</span></li>
<li id="four">balsamic vinegar</li>
</ul>
<table id="data">
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
</table>
<button id="clearBtn">清空表格</button>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('#page li:gt(0)').on('click', function(evt) {
$(evt.target).remove();
});
$('#page li:even').css({
'background-color': 'coral',
'font-size': '36px'
});
$('#page li:odd').css('background-color', 'pink');
$('#clearBtn').on('click', function() {
$('#data').empty();
});
});
</script>
</body>
</html>
Day21-30/code/demo02/jquery02.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
width: 350px;
height: 70px;
margin: 0 auto;
margin-top: 10px;
background-color: black;
color: white;
font: 36px/70px Arial;
}
#fruits {
width: 350px;
margin: 0 auto;
}
#fruits li {
width: 350px;
height: 75px;
background-color: darkolivegreen;
color: white;
list-style: none;
border-bottom: 1px solid lightgray;
text-align: center;
font: 32px/75px "微软雅黑";
}
#fruits li img {
float: right;
}
#fruits li a:link, #fruits li a:visited {
color: white;
}
#fruits li button {
float: right;
width: 75px;
height: 75px;
border: none;
outline: none;
background-color: coral;
color: white;
}
#fruits li input {
width: 240px;
height: 30px;
text-align: center;
font-size: 22px;
line-height: 30px;
}
#fruits li span {
color: lightgoldenrodyellow;
font-size: 14px;
}
</style>
</head>
<body>
<h1>水果列表</h1>
<ul id="fruits">
<li id="fruit1">苹果<img src="img/icon-trash.png"></li>
<li id="fruit2">香蕉<img src="img/icon-trash.png"></li>
<li id="fruit3">草莓<img src="img/icon-trash.png"></li>
<li>
<input type="text" placeholder="输入水果名称">
<button id="ok">添加</button>
</li>
</ul>
<script src="js/jquery.min.js"></script>
<script>
// jQuery的$函数的用法:
// 1. 如果$函数的参数是一个函数那么这个函数是文档加载完成之后要执行的回调函数
// 2. 如果$函数的参数是选择器字符串那么$函数会返回代表对应的标签的jQuery对象
// 3. 如果$函数的参数是一个原生JavaScript对象那么$函数会返回与之对应的jQuery对象
// 4. 如果$函数的参数一个标签字符串那么$函数会创建对应的元素而且返回jQuery对象
// 原生的JS对象和jQuery对象如何实现转换?
// $(原生JS对象) ---> jQuery对象
// jQuery对象.get(index) / jQuery对象[index] ---> JS对象
// 注: jQuery对象的本质是一个数组
$(function() {
function removeItem(evt) {
$(evt.target).parent()
.css('position', 'relative')
.animate(
{'left': '-350px', 'height': '0'},
360,
'linear',
function() {
$(this).remove();
}
);
}
$('#fruits li').hide().each(function(index) {
$(this).delay(600 * index).fadeIn(600);
});
$('#fruits li img').on('click', removeItem);
$('#fruits li:lt(3)').one('click', function(evt) {
var target = $(evt.target);
target.append($('<span>').text(target.attr('id')));
})
var index = 4;
$('#ok').on('click', function() {
var fruit = $('#fruits li input').val().trim();
if (fruit.length > 0) {
$('<li>').text(fruit).attr('id', 'fruit' + index)
.append(
$('<img>').attr('src', 'img/icon-trash.png')
.on('click', removeItem)
)
.one('click', function(evt) {
var target = $(evt.target);
target.append('<span>' + target.attr('id') + '</span>');
})
.insertBefore($('#fruits li:last'))
.hide().fadeIn(600);
$('#fruits li input').val('').focus();
index += 1;
}
});
});
</script>
</body>
</html>
Day21-30/code/demo02/jquery03.html 0 → 100644
View file @ 77ea3583
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="loadBtn">加载</button>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#loadBtn').on('click', function() {
$.ajax({
type: 'get',
url: 'http://api.tianapi.com/meinv/',
data: {
key: '772a81a51ae5c780251b1f98ea431b84',
num: 10
},
dataType: 'json',
success: function(json) {
for (var i = 0; i < json.newslist.length; i += 1) {
var mm = json.newslist[i];
// $('<img>').attr('src', mm.picUrl).attr('width', 300)
// .insertBefore($('#loadBtn'));
$('<p>').append($('<a>')
.attr('href', mm.picUrl)
.attr('target', '_blank')
.text(mm.title)
).insertBefore($('#loadBtn'));
}
},
error: function() {}
});
// $.getJSON(url, function(json) {
// for (var i = 0; i < json.newslist.length; i += 1) {
// var mm = json.newslist[i];
// $('<img>').attr('src', mm.picUrl).attr('width', 300)
// .insertBefore($('#loadBtn'));
// }
// });
});
});
</script>
</body>
</html>
Day21-30/code/demo02/js/jquery-ui.min.js 0 → 100644
View file @ 77ea3583
This source diff could not be displayed because it is too large. You can view the blob instead.
Day21-30/code/demo02/js/jquery.min.js 0 → 100644
View file @ 77ea3583
This diff is collapsed.
Day21-30/code/demo02/js/mylib.js 0 → 100644
View file @ 77ea3583
function $(id) {
return document.getElementById(id);
}
function bind(elem, en, fn) {
if (elem.addEventListener) {
elem.addEventListener(en, fn);
} else {
elem.attachEvent('on' + en, fn);
}
}
function unbind(elem, en, fn) {
if (elem.removeEventListener) {
elem.removeEventListener(en, fn);
} else {
elem.detachEvent('on' + en, fn);
}
}
function preventDefault(evt) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
README.md
View file @ 77ea3583
......@@ -139,7 +139,7 @@ by 骆昊
- 使用正则表达式 - re模块 \ compile函数 \ group和groups方法 \ match方法 \ search方法 \ findall和finditer方法 \ sub和subn方法 \ split方法
- 应用案例 - 使用正则表达式验证输入的字符串
#### Day13 - [进程和线程](./Day01-15/Day13/进程和线程入门.md)
#### Day13 - [进程和线程](./Day01-15/Day13/进程和线程.md)
- 进程和线程的概念 - 什么是进程 / 什么是线程 / 多线程的应用场景
- 使用进程 - fork函数 / multiprocessing模块 / 进程池 / 进程间通信
......@@ -160,9 +160,17 @@ by 骆昊
### Day16~Day20 - [Python语言进阶 ](./Day16-20)
#### Day16 - 数据结构和算法
#### Day17 - 函数的高级知识
### Day21~30 - [Web前端](./Day21-30)
#### Day18 - 面向对象高级知识
#### Day19 - 元编程
#### Day20 - 协程和异步I/O
### Day21~30 - [Web前端](./Day21-30/Web前端概述.md)
- 用HTML标签承载页面内容
- 用CSS渲染页面
......@@ -170,7 +178,7 @@ by 骆昊
- jQuery入门和提高
- Bootstrap在Web项目中的应用
### Day31~35 - [Linux操作系统](./Day31-35)
### Day31~35 - [Linux操作系统](./Day31-35/玩转Linux操作系统.md)
- 操作系统发展史和Linux概述
- Linux基础命令
......@@ -262,11 +270,11 @@ by 骆昊
#### Day71 - [表单交互和验证码处理](./Day66-75/06.表单交互和验证码处理.md)
#### Day72 - [Scrapy爬虫框架入门](./Day66-75/Scrapy爬虫框架入门.md)
#### Day72 - [Scrapy爬虫框架入门](./Day66-75/爬虫框架Scrapy入门.md)
#### Day73 - [Scrapy爬虫框架高级应用](./Day66-75/Scrapy爬虫框架高级应用.md)
#### Day73 - [Scrapy爬虫框架高级应用](./Day66-75/爬虫框架Scrapy高级应用.md)
#### Day74 - [Scrapy爬虫框架分布式实现](./Day66-75/Scrapy爬虫框架分布式实现.md)
#### Day74 - [Scrapy爬虫框架分布式实现](./Day66-75/爬虫框架Scrapy分布式实现.md)
### Day76~90 - [数据处理和机器学习](./Day76-90)
......
关于测试.md
View file @ 77ea3583
......@@ -63,6 +63,3 @@ Selenium是实现Web应用程序的功能测试以及集成测试自动化的浏
5. 新建测试用的Jenkins任务并进行配置，配置的内容包括：浏览器、起始URL、测试套件和测试结果输出文件。
配置完成后，就可以执行Jenkins的“立即构建”了。
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment