Skip to content

P
Python-100-Days
Commit 02d31714 authored by jackfrued's avatar jackfrued
Browse files
Options

更新了部分代码和文档

parent 1b9aefee
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3389 additions and 0 deletions
Day21-30/code/new/web1901/css/style.css 0 → 100644
View file @ 02d31714
/* 通配符选择器 */
* {
margin: 0;
padding: 0;
}
/* 标签选择器 */
h1 {
width: 960px;
height: 40px;
margin: 5px auto;
}
/* 类选择器 */
.a {
background-color: red;
}
.b {
background-color: orange;
}
.c {
background-color: yellow;
}
.d {
background-color: green;
}
.e {
background-color: cyan;
}
.f {
background-color: blue;
}
.g {
background-color: purple;
}
.h {
color: blue;
text-align: center;
width: 100px;
height: 38px;
overflow: hidden;
}
.big {
font-size: 32px;
}
.normal {
font-size: 18px;
}
.small {
font-size: 12px;
}
/* ID选择器 */
#header, #footer {
width: 800px;
height: 120px;
border: 1px solid red;
margin: 10px auto;
}
\ No newline at end of file
Day21-30/code/new/web1901/css_practice_1.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<title>Boxes</title>
<style>
* {
/* border: 1px solid black; */
font-family: "Courier New";
margin: 0;
padding: 0;
}
body {
background-color: rgba(192, 192, 192, 0.3);
}
#page {
width: 880px;
border: 4px double black;
background-color: white;
margin: 10px auto;
padding: 20px 50px;
}
#logo {
width: 100%;
text-align: center;
}
#navigation {
width: 600px;
height: 60px;
margin: 10px auto;
border-top: 2px solid black;
border-bottom: 1px solid black;
}
#navigation>li {
float: left;
width: 120px;
height: 40px;
list-style-type:none;
text-align: center;
line-height: 40px;
padding-top: 10px;
}
#navigation>li>a {
text-decoration: none;
letter-spacing: 0.15em;
color: black;
}
#navigation>li:first-child>a{
color: red;
}
#navigation>li>a:hover {
color: red;
}
#navigation~p {
width: 600px;
margin: 20px auto;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
<div id="page">
<div id="logo">
<img src="images/logo.gif" alt="The Analog Specialists" />
</div>
<ul id="navigation">
<li><a href="#" class="on">Home</a></li>
<li><a href="#">For Sale</a></li>
<li><a href="#">Repairs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>
<img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
</p>
<p>
We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
</p>
</div>
</body>
</html>
\ No newline at end of file
Day21-30/code/new/web1901/css_practice_1.result.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<title>Boxes</title>
<style type="text/css">
body {
font-size: 80%;
font-family: "Courier New", Courier, monospace;
letter-spacing: 0.15em;
background-color: #efefef;
}
#page {
max-width: 940px;
min-width: 720px;
margin: 10px auto 10px auto;
padding: 20px;
border: 4px double #000;
background-color: #ffffff;
}
#logo {
width: 150px;
margin: 10px auto 25px auto;
}
ul {
width: 570px;
padding: 15px;
margin: 0px auto 0px auto;
border-top: 2px solid #000;
border-bottom: 1px solid #000;
text-align: center;
}
li {
display: inline;
margin: 0px 3px;
}
p {
text-align: center;
width: 600px;
margin: 20px auto 20px auto;
font-weight: normal;
}
a {
color: #000000;
text-transform: uppercase;
text-decoration: none;
padding: 6px 18px 5px 18px;
}
a:hover, a.on {
color: #cc3333;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="page">
<div id="logo">
<img src="images/logo.gif" alt="The Analog Specialists" />
</div>
<ul id="navigation">
<li><a href="#" class="on">Home</a></li>
<li><a href="#">For Sale</a></li>
<li><a href="#">Repairs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>
<img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
</p>
<p>
We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
</p>
</div>
</body>
</html>
\ No newline at end of file
Day21-30/code/new/web1901/css_practice_2.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<title>Lists, Tables and Forms</title>
<style>
.books>li {
list-style-image: url(images/icon-plus.png);
}
.schedule {
border-spacing: 0;
}
.header {
background-color: rgb(126, 164, 204);
}
.header>th:first-child {
border-top-left-radius: 5px;
}
.header>th:last-child {
border-top-right-radius: 5px;
}
.schedule td, .schedule th {
border: 1px solid lightgray;
}
.header th {
border-bottom: 2px solid rgb(68, 104, 142);
}
label {
display: inline-block;
width: 160px;
text-align: right;
}
</style>
</head>
<body>
<h1>Poetry Workshops</h1>
<p>We will be conducting a number of poetry workshops and symposiums throughout the year.</p>
<p>Please note that the following events are free to members:</p>
<ul class="books">
<li>A Poetic Perspective</li>
<li>Walt Whitman at War</li>
<li>Found Poems and Outsider Poetry</li>
</ul>
<table class="schedule">
<tr class="header">
<th></th>
<th>New York</th>
<th>Chicago</th>
<th>San Francisco</th>
</tr>
<tr class="odd">
<th>A Poetic Perspective</th>
<td>Sat, 4 Feb 2012<br />11am - 2pm</td>
<td>Sat, 3 Mar 2012<br />11am - 2pm</td>
<td>Sat, 17 Mar 2012<br />11am - 2pm</td>
</tr>
<tr class="even">
<th>Walt Whitman at War</th>
<td>Sat, 7 Apr 2012<br />11am - 1pm</td>
<td>Sat, 5 May 2012<br />11am - 1pm</td>
<td>Sat, 19 May 2012<br />11am - 1pm</td>
</tr>
<tr class="odd">
<th>Found Poems &amp; Outsider Poetry</th>
<td>Sat, 9 Jun 2012<br />11am - 2pm</td>
<td>Sat, 7 Jul 2012<br />11am - 2pm</td>
<td>Sat, 21 Jul 2012<br />11am - 2pm</td>
</tr>
<tr class="even">
<th>Natural Death: An Exploration</th>
<td>Sat, 4 Aug 2012<br />11am - 4pm</td>
<td>Sat, 8 Sep 2012<br />11am - 4pm</td>
<td>Sat, 15 Sep 2012<br />11am - 4pm</td>
</tr>
</table>
<form action="" method="post">
<fieldset>
<legend>Register your interest</legend>
<p>
<label for="name">Your name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Your email:</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="location">Your closest center:</label>
<select name="location" id="location">
<option value="ny">New York</option>
<option value="il">Chicago</option>
<option value="ca">San Francisco</option>
</select>
</p>
<label>Are you a member?</label>
<input type="radio" name="member" value="yes"> Yes
<input type="radio" name="member" value="no"> No
</fieldset>
<div>
<input type="submit" value="Register" />
</div>
</form>
</body>
</html>
Day21-30/code/new/web1901/css_practice_2.result.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<title>Lists, Tables and Forms</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
font-size: 90%;
color: #666;
background-color: #f8f8f8;
}
li {
list-style-image: url("images/icon-plus.png");
line-height: 1.6em;
}
table {
border-spacing: 0px;
}
th, td {
padding: 5px 30px 5px 10px;
border-spacing: 0px;
font-size: 90%;
margin: 0px;
}
th, td {
text-align: left;
background-color: #e0e9f0;
border-top: 1px solid #f1f8fe;
border-bottom: 1px solid #cbd2d8;
border-right: 1px solid #cbd2d8;
}
tr.head th {
color: #fff;
background-color: #90b4d6;
border-bottom: 2px solid #547ca0;
border-right: 1px solid #749abe;
border-top: 1px solid #90b4d6;
text-align: center;
text-shadow: -1px -1px 1px #666666;
letter-spacing: 0.15em;
}
td {
text-shadow: 1px 1px 1px #ffffff;
}
tr.even td, tr.even th {
background-color: #e8eff5;
}
tr.head th:first-child {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
tr.head th:last-child {
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
fieldset {
width: 310px;
margin-top: 20px;
border: 1px solid #d6d6d6;
background-color: #ffffff;
line-height: 1.6em;
}
legend {
font-style: italic;
color: #666666;
}
input[type="text"] {
width: 120px;
border: 1px solid #d6d6d6;
padding: 2px;
outline: none;
}
input[type="text"]:focus, input[type="text"]:hover {
background-color: #d0e2f0;
border: 1px solid #999999;
}
input[type="submit"] {
border: 1px solid #006633;
background-color: #009966;
color: #ffffff;
border-radius: 5px;
padding: 5px;
margin-top: 10px;
}
input[type="submit"]:hover {
border: 1px solid #006633;
background-color: #00CC33;
color: #ffffff;
cursor: pointer;
}
.title {
float: left;
width: 160px;
clear: left;
}
.submit {
width: 310px;
text-align: right;
}
</style>
</head>
<body>
<h1>Poetry Workshops</h1>
<p>We will be conducting a number of poetry workshops and symposiums throughout the year.</p>
<p>Please note that the following events are free to members:</p>
<ul>
<li>A Poetic Perspective</li>
<li>Walt Whitman at War</li>
<li>Found Poems and Outsider Poetry</li>
</ul>
<table>
<tr class="head">
<th></th>
<th>New York</th>
<th>Chicago</th>
<th>San Francisco</th>
</tr>
<tr>
<th>A Poetic Perspective</th>
<td>Sat, 4 Feb 2012<br />11am - 2pm</td>
<td>Sat, 3 Mar 2012<br />11am - 2pm</td>
<td>Sat, 17 Mar 2012<br />11am - 2pm</td>
</tr>
<tr class="even">
<th>Walt Whitman at War</th>
<td>Sat, 7 Apr 2012<br />11am - 1pm</td>
<td>Sat, 5 May 2012<br />11am - 1pm</td>
<td>Sat, 19 May 2012<br />11am - 1pm</td>
</tr>
<tr>
<th>Found Poems &amp; Outsider Poetry</th>
<td>Sat, 9 Jun 2012<br />11am - 2pm</td>
<td>Sat, 7 Jul 2012<br />11am - 2pm</td>
<td>Sat, 21 Jul 2012<br />11am - 2pm</td>
</tr>
<tr class="even">
<th>Natural Death: An Exploration</th>
<td>Sat, 4 Aug 2012<br />11am - 4pm</td>
<td>Sat, 8 Sep 2012<br />11am - 4pm</td>
<td>Sat, 15 Sep 2012<br />11am - 4pm</td>
</tr>
</table>
<form action="http://www.example.com/form.php" method="get">
<fieldset>
<legend>Register your interest</legend>
<p>
<label class="title" for="name">Your name:</label>
<input type="text" name="name" id="name"><br>
<label class="title" for="email">Your email:</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="location" class="title">Your closest center:</label>
<select name="location" id="location">
<option value="ny">New York</option>
<option value="il">Chicago</option>
<option value="ca">San Francisco</option>
</select>
</p>
<span class="title">Are you a member?</span>
<label>
<input type="radio" name="member" value="yes"> Yes
</label>
<label>
<input type="radio" name="member" value="no"> No
</label>
</fieldset>
<div class="submit">
<input type="submit" value="Register" />
</div>
</form>
</body>
</html>
Day21-30/code/new/web1901/css_practice_3.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Layout</title>
</head>
<body>
<div>
<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</header>
<section>
<article>
<figure>
<img src="images/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
<p>
A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle
dishes.
</p>
</article>
<article>
<figure>
<img src="images/teriyaki.jpg" alt="Teriyaki sauce">
<figcaption>Teriyaki Sauce</figcaption>
</figure>
<hgroup>
<h2>Sauces Masterclass</h2>
<h3>One day workshop</h3>
</hgroup>
<p>
An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese
cookery.
</p>
</article>
</section>
<aside>
<section>
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Tsukune (minced chicken patties)</a>
<a href="">Okonomiyaki (savory pancakes)</a>
<a href="">Mizutaki (chicken stew)</a>
</section>
<section>
<h2>Contact</h2>
<p>
Yoko's Kitchen<br>
27 Redchurch Street<br>
Shoreditch<br>
London E2 7DP
</p>
</section>
</aside>
<footer>
&copy; 2011 Yoko's Kitchen
</footer>
</div>
</body>
</html>
Day21-30/code/new/web1901/css_practice_3.result.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Layout</title>
<style type="text/css">
header,
section,
footer,
aside,
nav,
article,
figure,
figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("images/dark-wood.jpg");
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0px;
}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;
}
header {
height: 160px;
background-image: url(images/header.jpg);
}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;
}
nav,
footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 40px;
}
nav li a {
color: #ffffff;
}
nav li a:hover,
nav li a.current {
color: #000000;
}
section.courses {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}
article {
clear: both;
overflow: auto;
width: 100%;
}
hgroup {
margin-top: 40px;
}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
figcaption {
font-size: 90%;
text-align: left;
}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;
}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}
aside section a:hover {
color: #985d6a;
background-color: #efefef;
}
a {
color: #de6581;
text-decoration: none;
}
h1,
h2,
h3 {
font-weight: normal;
}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;
}
h3 {
margin: 0px 0px 10px 0px;
color: #de6581;
}
aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;
}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="images/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
<p>
A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle
dishes.
</p>
</article>
<article>
<figure>
<img src="images/teriyaki.jpg" alt="Teriyaki sauce">
<figcaption>Teriyaki Sauce</figcaption>
</figure>
<hgroup>
<h2>Sauces Masterclass</h2>
<h3>One day workshop</h3>
</hgroup>
<p>
An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese
cookery.
</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Tsukune (minced chicken patties)</a>
<a href="">Okonomiyaki (savory pancakes)</a>
<a href="">Mizutaki (chicken stew)</a>
</section>
<section class="contact-details">
<h2>Contact</h2>
<p>
Yoko's Kitchen<br>
27 Redchurch Street<br>
Shoreditch<br>
London E2 7DP
</p>
</section>
</aside>
<footer>
&copy; 2011 Yoko's Kitchen
</footer>
</div>
</body>
</html>
Day21-30/code/new/web1901/example_of_anchor.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/example_of_audio_video.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音视频</title>
</head>
<body>
<audio controls autoplay loop>
<source src="audio/test-audio.mp3"></source>
</audio>
<video width="400" controls>
<source src="video/puppy.mp4"></source>
</video>
</body>
</html>
Day21-30/code/new/web1901/example_of_bom_1.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM - 延迟跳转</title>
</head>
<body>
<h3><span id="countdown">5</span>秒钟以后自动跳转到百度</h3>
<button id="cancelBtn">取消跳转</button>
<button id="openBtn">打开百度</button>
<script>
// alert(localStorage.sport)
// alert(localStorage.fruit)
// localStorage.sport = '乒乓球'
// localStorage.fruit = '榴莲'
const openBtn = document.getElementById('openBtn')
openBtn.addEventListener('click', () => print())
const cancelBtn = document.getElementById('cancelBtn')
cancelBtn.addEventListener('click', () => clearInterval(timerId))
const span = document.getElementById('countdown')
var counter = 5
var timerId = setInterval(function () {
counter -= 1
if (counter == 0) {
// location对象代表了浏览器的地址栏
location.href = 'http://www.baidu.com'
} else {
span.textContent = counter
}
}, 1000)
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_bootstrap.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-3 column">
<img alt="140x140" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/140/140/default.jpg" />
</div>
<div class="col-md-9 column">
<h3>
h3. 这是一套可视化布局系统.
</h3>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<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-812781">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-812781">
</li>
<li data-slide-to="1" data-target="#carousel-812781">
</li>
<li data-slide-to="2" data-target="#carousel-812781">
</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-812781" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-812781" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
</body>
</html>
Day21-30/code/new/web1901/example_of_css_1.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS - 内部和外部样式表</title>
<!-- 外部样式表 -->
<link rel="stylesheet" href="css/style.css">
<!-- 内部样式表 -->
<style>
* {
border: 1px dashed black;
}
</style>
</head>
<body>
<!-- 内嵌样式表 -->
<div id="header" style="background-color: gray;"></div>
<h1 class="a"></h1>
<h1 class="b"></h1>
<h1 class="c"></h1>
<h1 class="d"></h1>
<h1 class="e"></h1>
<h1 class="f"></h1>
<h1 class="g"></h1>
<p class="c h big">静夜思 - 李白</p>
床前明月光
<div id="footer"></div>
</body>
</html>
\ No newline at end of file
Day21-30/code/new/web1901/example_of_css_2.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS - 优先级</title>
<!-- 一般情况下网站的首页会使用内部样式表 - 首页正常渲染 -->
<!-- 其他的页面可以共享一个或多个外部样式表 - 代码复用/减少对带宽和流量的使用 -->
<link rel="stylesheet" href="css/style.css">
<!-- 不冲突的样式会叠加，有冲突的样式遵循三条原则 -->
<!-- 1. 就近原则 -->
<!-- 2. 具体性原则（ID > 类 > 标签 > 通配符） -->
<!-- 3. 重要性原则 -->
<style>
#h1 { color: blue; }
.h1 { color: green !important; }
.h1 {
color: pink !important;
border: 5px dotted #FFA500;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
margin-top: 50px;
padding: 100px 100px;
}
h1 { color: red; }
</style>
</head>
<body>
<!-- 内嵌样式表 / 行内样式表 -->
<h1 class="a big" style="background-color: #ffff00; font-family: 'courier new'; text-align: center;">Hello, world!</h1>
<!-- Box Model（盒子模型）-->
<h1 class="h1" id="h1">Goodbye world!</h1>
</body>
</html>
Day21-30/code/new/web1901/example_of_css_3.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS - 盒子模型</title>
<style>
@font-face {
font-family: "FatDog";
src: url('fonts/chunkfive.ttf');
}
body {
width: 960px;
margin: 0 auto;
}
.ms {
letter-spacing: 10px;
width: 320px;
height: 100px;
border: 5px dotted gray;
line-height: 100px;
text-align: center;
margin: 10px auto;
text-decoration: underline;
text-shadow: 2px 2px gray;
font-size: 400%;
}
.one {
text-indent: 60px;
}
.two {
text-indent: 40px;
}
.three {
text-indent: 20px;
}
h3 {
/* block / inline-block / none */
/* display: none; */
visibility: hidden;
text-transform: uppercase;
font: italic bolder 2cm/60px "FatDog";
/* font-size: 2cm;
font-family: "FatDog";
font-stretch: condensed;
font-style: oblique; */
}
.box {
color: rgb(64, 128, 192);
height: 220px;
border: 4px double #00CC33;
border-left-color: blue;
border-right-color: red;
border-radius: 10px 20px 40px 80px;
width: 50%;
margin: 50px auto;
margin-top: 10px;
text-align: center;
background-color: #749ABE;
background-image: url(images/bird.gif);
/* background-repeat: no-repeat no-repeat;
background-position: -25px -50px; */
}
.box p {
background-color: white;
width: 200px;
height: 40px;
line-height: 40px;
margin: 10px auto;
}
#photo {
border: 10px solid gold;
border-radius: 60px 60px 60px 60px;
/* border-image: url("images/dots.gif") 10 10 10 10 round; */
}
#icon {
width: 100px;
height: 100px;
background: url(images/icons.jpg) no-repeat no-repeat -570px -280px;
background-color: #00FFFF;
/* background-image: url(images/icons.jpg);
background-repeat: no-repeat no-repeat;
background-position: -570px -280px; */
}
#python {
width: 290px;
height: 82px;
background-image: url(images/python-logo.png);
background-color: #009966;
}
/* body {
background-image: url(images/bird.gif);
} */
</style>
</head>
<body>
<div id="python"></div>
<div id="icon"></div>
<img id="photo" src="images/tim.png" width="100" height="100">
<h3>Hello, world!</h3>
<h1 class="ms">静夜思</h1>
<hr>
<div class="box">
<p class="one">床前明月光</p>
<p class="two">疑似地上霜</p>
<p class="three">举头望明月</p>
<p class="four">低头思故乡</p>
</div>
</body>
</html>
Day21-30/code/new/web1901/example_of_css_4.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS - 定位</title>
<style type="text/css">
.one {
background-color: red;
left: 50px;
top: 50px;
z-index: 100;
}
.two {
background-color: green;
left: 100px;
top: 100px;
z-index: 20;
}
.three {
background-color: blue;
left: 150px;
top: 150px;
z-index: 10;
}
.one, .two, .three {
position: absolute;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
Day21-30/code/new/web1901/example_of_css_5.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS - 动画效果</title>
<style>
#one, #two, #three {
position: fixed;
width: 200px;
height: 200px;
top: 100px;
}
#one {
background-color: purple;
left: 100px;
animation: foo 10s;
}
#two {
background-color: gold;
left: 400px;
animation: foo 2s infinite;
}
#three {
background-color: darkgreen;
left: 700px;
animation: foo 0.5s infinite;
}
@keyframes foo {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
Day21-30/code/new/web1901/example_of_form.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单的例子 - 注册</title>
<style>
/* 属性选择器 */
/* form input 后代选择器 */
/* form>input 儿子选择器 */
form input[type=text], form input[type=password] {
border: none;
outline: none;
border-bottom: 1px dotted darkgray;
}
/* form~input 兄弟选择器 */
/* form+input 相邻兄弟选择器 */
form~p>input[type=text] {
outline: none;
border: 1px solid lightgray;
}
form~p>input[type=text]:focus {
outline: none;
border: 1px solid #00FFFF;
}
.button {
display: inline-block;
color: white;
background-color: red;
border: none;
width: 120px;
height: 40px;
}
</style>
</head>
<body>
<figure>
<img src="images/bok-choi.jpg" alt="">
<figcaption>图1. 这是一个图片</figcaption>
</figure>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend>用户基本信息</legend>
<p>
用户名:
<input type="text" name="username" placeholder="用户名由6-20个字符构成" required>
</p>
<p>
密码：
<input type="password" name="password" required>
</p>
<p>
确认密码：
<input type="password" name="repassword" required>
</p>
<p>
性别：
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0">女
</p>
<p>
爱好：
<input type="checkbox" name="fav" value="阅读" checked>阅读
<input type="checkbox" name="fav" value="旅游">旅游
<input type="checkbox" name="fav" value="美食" checked>美食
<input type="checkbox" name="fav" value="运动">运动
</p>
<p>
省份：
<select name="province">
<option value="110000">北京</option>
<option value="120000">天津</option>
<option value="310000">上海</option>
<option value="500000">重庆</option>
<option value="510000" selected>四川省</option>
</select>
</p>
<p>
生日：
<input type="date" name="birthday">
</p>
</fieldset>
<fieldset id="">
<legend>用户附加信息</legend>
<p>
邮箱：
<input type="email" name="email" required>
</p>
<p>
头像：
<input type="file" name="photo">
</p>
<p>
自我介绍：
<textarea cols="30" rows="10" name="intro"></textarea>
</p>
<p>
<input class="button" type="submit" value="确认注册">
<input class="button" type="reset" value="重新填写">
</p>
</fieldset>
</form>
<p>
<input type="text">
</p>
</body>
</html>
Day21-30/code/new/web1901/example_of_iframe.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部窗口</title>
</head>
<body>
<!-- 行级标签（元素） / 块级标签（元素）-->
<!-- inline element / block element -->
<!-- 块级：h1-h6 / p / div / ul / ol / dl / table / form / hr -->
<!-- 行块级（内联块级元素）：可以像块级元素一样指定宽度和高度，但是不会独占整行 -->
<!-- 行级：a / img / iframe / button / span / input / textarea / select / br -->
<!-- internal frame（内部窗口）-->
<img title="商品图片" src="images/a1.jpg" alt="">
<img src="images/a2.jpg" alt="">
<iframe src="http://map.baidu.com" width="400" height="400" frameborder="0"></iframe>
<iframe src="http://www.jd.com" width="400" height="400" frameborder="0"></iframe>
<p>1</p>
<p>2</p>
<p>3</p>
<div>1</div>
<div>2</div>
<div>3</div>
<span>1</span>
<span>2</span>
<span>3</span>
<button>确定</button>
<button>取消</button>
<a href="">百度</a>&nbsp;&nbsp;<a href="">京东</a>
</body>
</html>
Day21-30/code/new/web1901/example_of_jquery_1.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#data {
border-collapse: collapse;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
margin: 10px 0;
}
</style>
</head>
<body>
<table id="data">
<caption>数据统计表</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
</tbody>
</table>
<div id="buttons">
<button id="pretty">隔行换色</button>
<button id="clear">清除数据</button>
<button id="remove">删除一行</button>
<button id="hide">表格淡出</button>
</div>
<!-- 引入jQuery -->
<script src="js/jquery.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
<script>
// $('选择器') --> jQuery对象 --> 封装了很多的方法
$('#pretty').on('click', () => {
$('#data>tbody>tr:odd').css('background-color', 'lightgray')
$('#data>tbody>tr:even').css('background-color', 'lightgreen')
})
$('#clear').on('click', () => {
$('#data>tbody>tr>td').empty()
})
$('#remove').on('click', () => {
$('#data>tbody>tr:last-child').remove()
})
$('#hide').on('click', () => {
let title = $('#hide').text()
if (title == '表格淡出') {
$('#data').fadeOut(1000, () => {
$('#hide').text('表格淡入')
})
} else {
$('#data').fadeIn(2000, () => {
$('#hide').text('表格淡出')
})
}
})
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_jquery_2.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#fruits {
width: 120px;
margin: 20px 20px;
}
#fruits>li {
list-style-type: none;
height: 40px;
color: white;
background-color: #009966;
line-height: 40px;
text-align: center;
margin-top: 2px;
}
#fruits>li>a {
float: right;
color: white;
text-decoration: none;
}
#fruits~input {
border: none;
outline: none;
text-align: center;
margin: 20px 15px;
}
input[type=text] {
border-bottom: 1px solid gray !important;
}
#ok {
width: 80px;
height: 30px;
background-color: #CC3333;
color: white;
}
</style>
</head>
<body>
<div id="container">
<ul id="fruits">
<li>苹果<a href="">×</a></li>
<li>香蕉<a href="">×</a></li>
<li>火龙果<a href="">×</a></li>
<li>西瓜<a href="">×</a></li>
</ul>
<input type="text" name="fruit">
<input id="ok" type="button" value="确定">
</div>
<script src="js/jquery.min.js"></script>
<script>
function removeListItem(evt) {
evt.preventDefault()
// $函数的参数是一个原生的JavaScript对象,返回与原生JavaScript对象对应的jQuery对象
$(evt.target).parent().remove()
}
// $函数的四种用法:
// $函数的参数是一个匿名函数或箭头函数,传入的函数是页面加载完成后要执行的回调函数
$(() => {
// $函数的参数是一个样式表选择器字符串,获取页面元素得到一个jQuery对象(伪数组 - 数组中装的是原生JavaScript对象)
$('#fruits>li>a').on('click', removeListItem)
$('#ok').on('click', (evt) => {
let input = $('#ok').prev();
let name = input.val().trim()
if (name) {
$('#fruits').append(
// $函数的参数是一个标签字符串,创建一个新的元素并获得对应的jQuery对象
$('<li>').text(name).append(
$('<a href="">').html('&times;').on('click', removeListItem)
)
)
}
input.val('').get(0).focus()
})
})
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_jquery_3.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax请求</title>
</head>
<body>
<button id="load">加载更多</button>
<div id="photos"></div>
<script>
(() => {
const photos = document.querySelector('#photos')
const loadBtn = document.querySelector('#load')
const url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&page='
var page = 0
loadBtn.addEventListener('click', (evt) => {
page += 1
// 创建异步请求对象
let xhr = new XMLHttpRequest()
// open方法的第一个参数是请求类型, 第二个参数是请求的URL, 第三个参数必须设置为true(异步请求)
xhr.open('get', url + page, true)
// 绑定事件回调函数,在收到服务器返回的数据后要对页面进行局部刷新
xhr.addEventListener('readystatechange', () => {
if (xhr.readyState == 4 && xhr.status == 200) {
// 将返回的JSON字符串解析成JavaScript的对象
let json = JSON.parse(xhr.responseText)
json.newslist.forEach((mm) => {
let img = document.createElement('img')
img.src = mm.picUrl
img.width = '300'
photos.insertBefore(img, photos.firstElementChild)
})
}
})
// 发送异步请求
xhr.send()
})
})()
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_jquery_4.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax请求</title>
</head>
<body>
<button id="load">加载更多</button>
<div id="photos"></div>
<script src="js/jquery.min.js"></script>
<script>
$(() => {
const url = 'http://api.tianapi.com/meinv/'
var page = 0
$('#load').on('click', (evt) => {
page += 1
let data = {"key": "772a81a51ae5c780251b1f98ea431b84", "page": page}
$.ajax({
"url": url, // 请求的地址(统一资源定位符)
"type": "get", // 请求的方法(get/post/delete/put)
"data": data, // 发送给服务器的数据
"dataType": "json", // 服务器返回的数据类型
"headers": {}, // 请求头
"success": (json) => { // 请求成功后要执行的回调函数
json.newslist.forEach((mm) => {
$('#photos').prepend($('<img width="300">').attr('src', mm.picUrl))
})
},
"error": (error) => { // 请求失败后要执行的回调函数
}
})
// $对象的getJSON方法可以执行异步请求(get请求)获得服务器返回的JSON格式的数据
// 第一个参数是请求的URL(统一资源定位符)
// 第二个参数是要发送给服务器的数据(JSON格式), 如果没有数据发给服务器可以省略不写
// 第三个参数是请求成功服务器返回数据之后要执行的回调函数, 其参数为服务器返回的内容处理后的JSON对象
// $.getJSON(url, data, (json) => {
// json.newslist.forEach((mm) => {
// $('#photos').prepend($('<img>').attr('src', mm.picUrl).attr('width', '300'))
// })
// })
})
})
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_jquery_5.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax请求</title>
<style>
#emp {
border-collapse: collapse;
}
#emp td, #emp th {
border-bottom: 1px solid black;
width: 120px;
text-align: center;
}
#page {
width: 720px;
text-align: center;
}
#page a {
text-decoration: none;
color: darkcyan;
}
</style>
</head>
<body>
<table id="emp">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>工资</th>
<th>补贴</th>
<th>所在部门</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="page">
<a id="prev" href="">上一页</a>&nbsp;&nbsp;
<a id="next" href="">下一页</a>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(() => {
function getEmpData(url) {
$.ajax({
url: url,
type: 'get',
data: {},
dataType: 'json',
headers: {
"token": "35ad60445cea11e99e1000163e02b646"
},
success: (json) => {
$('#emp>tbody').empty()
json.results.forEach((emp) => {
let tr = $('<tr>')
.append($('<td>').text(emp.no))
.append($('<td>').text(emp.name))
.append($('<td>').text(emp.job))
.append($('<td>').text(emp.sal))
.append($('<td>').text(emp.comm))
.append($('<td>').text(emp.dept.name))
$('#emp>tbody').append(tr)
})
$('#prev').attr('href', json.previous? json.previous : '')
$('#next').attr('href', json.next? json.next : '')
}
})
}
function changePage(evt) {
evt.preventDefault()
let href = $(evt.target).attr('href')
if (href) {
getEmpData(href)
}
}
getEmpData('http://120.77.222.217/api/emps/')
$('#prev').on('click', changePage)
$('#next').on('click', changePage)
})
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_js_1.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字</title>
</head>
<body>
<script>
var answer = parseInt(Math.random() * 100 + 1)
var counter = 0
var yourInput
do {
counter += 1
yourInput = prompt('请输入你猜的数字: ')
if (yourInput > answer) {
alert('小一点')
} else if (yourInput < answer) {
alert('大一点')
} else {
alert('恭喜你猜对了')
}
} while (answer != yourInput)
if (counter > 7) {
alert('智商余额不足')
}
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_js_2.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>判断闰年</title>
</head>
<body>
<script>
// var / let / const
// JavaScript中的比较运算符带有隐式的类型转换
// === / !== / && / || / !
// 分支结构 - if...else... / switch...case...default...
// 循环结构 - while / for / do...while
// JavaScript中的数据类型:
// - 简单数据类型: string / number / boolean / undefined / symbol / null
// - 复杂数据类型: object
// 检查变量或常量的数据类型可以使用typeof关键字
var yearStr = prompt('请输入年份: ')
var year = parseInt(yearStr)
// && - and - 短路与运算
// 一对花括号可以构成一个块级作用域 - let定义的变量就是块级作用域变量
if (year == yearStr && year > 0) {
// || - or - 短路或运算
// 逻辑运算(短路运算)会产生一个布尔值要么是true要么是false
let isLeap = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0
let yesOrNo = isLeap? '是' : '不是'
// ES6语法中的带占位符的字符串
alert(`${year}年${yesOrNo}闰年`)
} else {
alert('请输入有效的年份')
}
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_js_3.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双色球随机选号</title>
<style>
p {
width: 100px;
height: 100px;
color: white;
font: 60px/100px Arial;
border-radius: 50px;
text-align: center;
float: left;
margin-left: 10px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<!-- 浏览器中的JavaScript包含以下三样内容 -->
<!-- ECMAScript - ES6 - 核心语法 -->
<!-- BOM - 浏览器对象模型 - window -->
<!-- DOM - 文档对象模型 - document -->
<script>
function outputBall(num, color='red') {
document.write(`<p class="${color}">`)
if (num < 10) {
document.write('0')
}
document.write(num)
document.write('</p>')
}
var selectedBalls = []
while (selectedBalls.length < 6) {
let num = parseInt(Math.random() * 33 + 1)
if (selectedBalls.indexOf(num) == -1) {
selectedBalls.push(num)
}
}
// 给红色球排序 - 需要传入一个匿名函数给出比较元素的规则
// ES6开始支持使用箭头函数(Lambda函数 - 匿名函数)
selectedBalls.sort((x, y) => x - y)
// 代码有很多种坏味道 重复是最坏的一种 - Martin Fowler
selectedBalls.forEach(item => outputBall(item))
let num = parseInt(Math.random() * 16 + 1)
outputBall(num, 'blue')
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_js_4.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示时间日期</title>
<style>
#clock {
color: white;
text-align: center;
position: absolute;
right: 10px;
top: 10px;
width: 280px;
height: 40px;
background-color: blue;
font: 16px/40px "pt mono";
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
// JavaScript - 面向对象编程
// 定义类创建对象
const clockDiv = document.getElementById('clock')
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
function showClock() {
let now = new Date()
let year = now.getFullYear()
let mon = now.getMonth() + 1
mon = mon < 10 ? '0' + mon : '' + mon
let date = now.getDate()
date = date < 10 ? '0' + date : '' + date
let hour = now.getHours()
hour = hour < 10 ? '0' + hour : '' + hour
let min = now.getMinutes()
min = min < 10 ? '0' + min : '' + min
let sec = now.getSeconds()
sec = sec < 10 ? '0' + sec : '' + sec
let day = now.getDay()
let fullStr = `${year}年${mon}月${date}日
${hour}:${min}:${sec} 星期${weekdays[day]}`
clockDiv.textContent = fullStr
}
showClock()
setInterval(showClock, 1000)
// var timerId = setInterval(showClock, 1000)
// clearInterval(timerId)
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_js_5.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类和对象</title>
</head>
<body>
<script>
class Person {
constructor(name, age) {
this.name = name
this.age = age
}
eat(food) {
alert(`${this.name}正在吃${food}`)
}
watchAv() {
if (this.age < 18) {
alert(`${this.name}只能看《熊出没》`)
} else {
alert(`${this.name}正在观看岛国爱情动作片`)
}
}
}
let person = new Person('骆昊', 39)
person.eat('蛋炒饭')
let person2 = new Person('王大锤', 15)
person2.watchAv()
// 构造器函数
/*
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.eat = function(food) {
alert(this.name + '正在吃' + food)
}
Person.prototype.watchAv = function() {
if (this.age < 18) {
alert(this.name + '只能看《熊出没》')
} else {
alert(this.name + '正在观看岛国爱情动作片')
}
}
let person = new Person('骆昊', 39)
person.eat('蛋炒饭')
let person2 = new Person('王大锤', 15)
person2.watchAv()
*/
// JSON - JavaScript Object Notation
// JavaScript对象表达式 - 创建对象的字面量语法
/*
const person = {
name: '骆昊',
age: 39,
eat: function(food) {
alert(this.name + '正在吃' + food)
},
watchAv: function() {
if (this.age < 18) {
alert(this.name + '只能看《熊出没》')
} else {
alert(this.name + '正在观看岛国爱情动作片')
}
}
}
// person.age = 15
person.eat('蛋炒饭')
person.watchAv()
*/
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_js_6.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#fruits {
width: 120px;
margin: 20px 20px;
}
#fruits>li {
list-style-type: none;
height: 40px;
color: white;
background-color: #009966;
line-height: 40px;
text-align: center;
margin-top: 2px;
}
#fruits>li>a {
float: right;
color: white;
text-decoration: none;
}
#fruits~input {
border: none;
outline: none;
text-align: center;
margin: 20px 15px;
}
input[type=text] {
border-bottom: 1px solid gray !important;
}
#ok {
width: 80px;
height: 30px;
background-color: #CC3333;
color: white;
}
</style>
</head>
<body>
<div id="container">
<ul id="fruits">
<li>苹果<a href="">×</a></li>
<li>香蕉<a href="">×</a></li>
<li>火龙果<a href="">×</a></li>
<li>西瓜<a href="">×</a></li>
</ul>
<input type="text" name="fruit">
<input id="ok" type="button" value="确定">
</div>
<script>
function addListItem() {
let name = input.value.trim()
if (name) {
// 通过document对象的createElement方法创建新元素
let li = document.createElement('li')
// 可以用textContent或innerHTML属性来修改标签的内容
li.innerHTML = name
let a = document.createElement('a')
a.innerHTML = '&times;'
a.href = ''
a.addEventListener('click', removeListItem)
li.appendChild(a)
// 通过父元素的appendChild或insertBefore可以添加子元素
ul.appendChild(li)
input.value = ''
// 元素的focus和blur方法可以让元素获得或失去焦点
input.focus()
}
}
function removeListItem(evt) {
// evt.stopPropagation()
// 通过事件对象的preventDefault方法阻止事件的默认行为
evt.preventDefault()
// 通过元素获取父元素 - parentNode
// 通过元素获取子元素 - children / firstElementChild / lastElementChild
// 通过元素获取兄弟元素 - previousElementSibling / nextElementSibling
let li = evt.target.parentNode
// 通过父元素的removeChild方法可以删除指定的子元素
ul.removeChild(li)
}
const ul = document.querySelector('#fruits')
const input = ul.nextElementSibling
input.addEventListener('keypress', (evt) => {
let code = evt.keyCode || evt.which
if (code == 13) {
addListItem()
}
})
const ok = input.nextElementSibling
ok.addEventListener('click', addListItem)
let anchors = document.querySelectorAll('#fruits>li>a')
for (let i = 0; i < anchors.length; i += 1) {
// addEventListener方法有三个参数
// 第一个参数是事件的名称，例如: click / dbclick / mouseover / mouseout
// 第二个参数是事件发生时要执行的回调函数，函数的参数是事件对象:
// ~ 传入一个已有函数的名字
// ~ 写一个匿名函数 function(evt) {}
// ~ 写一个箭头函数 (evt) => {}
// 第三个参数表示使用事件捕获还是事件冒泡,如果不写表示事件冒泡(从里向外传播事件)
// ~ 如果设置为true表示事件捕获(从外向里传播事件)
// ~ 如果希望阻止事件的传播行为可以调用事件对象的stopPropagation方法
anchors[i].addEventListener('click', removeListItem)
}
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_js_7.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function add() {
alert(arguments.callee)
alert(arguments.callee.caller)
return arguments[0] + arguments[1]
}
alert(add(1, 2))
</script>
</body>
</html>
Day21-30/code/new/web1901/example_of_layout.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>经典布局</title>
<style>
#page {
width: 960px;
margin: 0 auto;
}
header, footer, #main {
margin: 10px 0;
}
header {
height: 150px;
background-color: lightgoldenrodyellow;
}
#main {
height: 600px;
background-color: lightpink;
}
footer {
height: 150px;
background-color: lightsalmon;
}
#logo {
height: 70%;
}
nav {
height: 30%;
background-color: lightgray;
}
#content {
float: left;
width: 74%;
height: 100%;
margin-right: 1%;
background-color: lightgreen;
}
article {
height: 33%;
border: 1px dashed black;
}
aside {
float: left;
width: 25%;
height: 100%;
background-color: lightcyan;
}
</style>
</head>
<body>
<div id="page">
<!-- 页眉（logo+导航） -->
<header>
<div id="logo">页眉</div>
<nav>导航菜单</nav>
</header>
<!-- 主体（可以分为多栏）-->
<div id="main">
<div id="content">
<article>文章1</article>
<article>文章2</article>
<article>文章3</article>
</div>
<aside>侧边栏</aside>
</div>
<!-- 页脚（友情链接+版权信息+ICP备案信息） -->
<footer>页脚</footer>
</div>
</body>
</html>
Day21-30/code/new/web1901/example_of_table.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style>
table {
border-spacing: 0;
}
td, th {
width: 150px;
height: 30px;
border-bottom: 1px solid black;
border-right: 1px solid black;
text-align: center;
empty-cells: hide;
}
.bottom>td {
border-bottom: none;
}
.right {
border-right: none;
}
thead>tr {
background-color: lightgoldenrodyellow;
}
.even {
background-color: lightgrey;
}
.odd {
background-color: lightblue;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
}
tr:last-child>td:first-child {
border-bottom-left-radius: 10px;
}
tr:last-child>td:last-child {
border-bottom-right-radius: 10px;
}
.number li {
/* list-style-type: none; */
list-style-position: inside;
list-style-image: url(images/add.gif);
width: 120px;
height: 30px;
background-color: #006633;
color: white;
text-align: center;
margin: 5px 5px;
float: left;
}
.number li:hover {
color: orange;
cursor: pointer;
}
</style>
</head>
<body>
<!-- table>tr*4>td*5 -->
<table>
<caption>学生考试成绩表</caption>
<thead>
<tr>
<th class="lt" width="120">姓名</th>
<th width="100">语文</th>
<th width="100">数学</th>
<th width="100">英语</th>
<th width="100" class="right">体育</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>王大锤</td>
<td>90</td>
<td>80</td>
<td></td>
<td class="right">60</td>
</tr>
<tr class="even">
<td>王大锤</td>
<td>90</td>
<td></td>
<td>70</td>
<td class="right">60</td>
</tr>
<tr class="bottom odd">
<td>王大锤</td>
<td>90</td>
<td>80</td>
<td>70</td>
<td class="right">60</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<ul class="number">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>
Day21-30/code/new/web1901/example_of_vue_element.html 0 → 100644
View file @ 02d31714
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<style>
/*
#emp {
border-collapse: collapse;
}
#emp td, #emp th {
border-bottom: 1px solid black;
width: 120px;
text-align: center;
}
*/
#page {
width: 100%;
text-align: center;
margin-top: 20px;
}
/*
#page a {
text-decoration: none;
color: #67C23A;
cursor: pointer;
margin: 20px 20px;
}
*/
h1 {
color:#909399;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<h1>员工信息表</h1>
<hr>
<el-table v-loading="loading" :data="emps" stripe style="width: 100%">
<el-table-column prop="no" label="编号" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="job" label="职位"></el-table-column>
<el-table-column prop="sal" label="工资"></el-table-column>
<el-table-column prop="comm" label="补贴"></el-table-column>
<el-table-column prop="dept.name" label="所在部门"></el-table-column>
</el-table>
<!--
<table id="emp">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>工资</th>
<th>补贴</th>
<th>所在部门</th>
</tr>
</thead>
<tbody>
<tr v-for="emp in emps">
<td>{{ emp.no }}</td>
<td>{{ emp.name }}</td>
<td>{{ emp.job }}</td>
<td>{{ emp.sal }}</td>
<td>{{ emp.comm }}</td>
<td>{{ emp.dept.name }}</td>
</tr>
</tbody>
</table>
-->
<div id="page">
<el-button type="primary" round @click="prevPage()">上一页</el-button>
<el-button type="primary" round @click="nextPage()">下一页</el-button>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
let pageSize = 5
const app = new Vue({
el: '#app',
data: {
emps: [],
currentPage: 1,
totalPage: 0,
loading: true
},
created() {
this.getEmpData()
},
methods: {
getEmpData() {
this.loading = true
const url = `http://120.77.222.217/api/emps/?page=${this.currentPage}`
fetch(url, {
headers: {
"token": "35ad60445cea11e99e1000163e02b646",
}
})
.then(resp => resp.json())
.then(json => {
setTimeout(() => {
this.emps = json.results
this.totalPage = parseInt((json.count - 1) / pageSize) + 1
this.loading = false
}, 1000)
})
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage -= 1
this.getEmpData()
}
},
nextPage() {
if (this.currentPage < this.totalPage) {
this.currentPage += 1
this.getEmpData()
}
}
}
})
</script>
</body>
</html>
Day21-30/code/new/web1901/index.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/js/hello.js 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/js_practice_1.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/js_practice_2.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/js_practice_3.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/js_practice_4.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/js_practice_5.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/js_practice_6.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/js_practice_7.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/problem_of_float.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/shopping_cart.html 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/video/puppy.flv 0 → 100755
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/video/puppy.mp4 0 → 100755
View file @ 02d31714
This diff is collapsed.
Day21-30/code/new/web1901/video/puppy.webm 0 → 100755
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/a1.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/a2.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/a3.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/picture-1.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/picture-2.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/picture-3.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/slide-1.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/slide-2.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/slide-3.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/slide-4.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/thumb-1.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/thumb-2.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/img/thumb-3.jpg 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day21-30/code/old/javascript/js/jquery.min.js 0 → 100644
View file @ 02d31714
This diff is collapsed.
Day31-35/玩转Linux操作系统.md
View file @ 02d31714
This diff is collapsed.
Day36-40/关系型数据库MySQL.md
View file @ 02d31714
This diff is collapsed.
Day91-100/项目部署上线指南.md
View file @ 02d31714
This diff is collapsed.
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