前端代码1

发表于 | 更新于 | 分类于 | 评论数：

一

点名器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机点名器</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .random-box {
            position:relative;
            overflow:hidden;
            margin:30px auto;
            width:550px;
            height:523px;
            background:url(data:image/png;base64,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) no-repeat;
        }
        #random-text {
            font-family:'美术四班何婷婷','Microsoft YaHei',sans-serif;
            margin-top:280px;
            text-align: center;
            font-size: 76px;
            color:white;
        }
        #random-btn {
            position:absolute;
            left:55px;
            bottom:21px;
            width:82px;
            line-height: 24px;
            transform: rotate(-3deg);
            cursor:pointer;
            border:none;
            background-color:transparent;
            color:white;
            font-size:12px;
            outline:none;
        }
    </style>
</head>
<body>

    <div class="random-box">
        <div id="random-text">随机点名器</div>
        <button id="random-btn">开 始</button>
    </div>

    <script>
        (function(){
             var nameList = [
                '王程龙',
				'周鑫鑫',
				'夏亮',
				'王程',
				'王亚南',
				'章杰',
				'何桂',
				'胡春辉',
				'王浩坤',
				'卓慧枫',
				'李深建',
				'徐金金',
				'彭伟',
				'张明岩',
				'刘锦',
				'冯学军',
				'谢金涛',
				'田振辉',
				'李江洋',
				'付小翠',
				'林磊',
				'宋一平',
				'随海亮',
				'王苗鲁',
				'张言',
				'陈有德',
				'谢典',
				'杨孝平',
				'严大鹏',
				'徐大伟',
				'瞿勤朝',
				'韩博文',
				'杨智综',
				'杨帆',
				'徐海波',
				'朱佳明',
				'朱春雨',
				'陈振',
				'王思文',
				'徐佳宇',
				'李宗军',
				'赵政凯',
				'郭琦',
				'吴恒',
				'姜健俊',
				'王乐',
				'周乐',
				'马波',
				'刘龙',
				'易懋懋'
            ];


            //随机取出姓名
            function getRandName(){
                var index = Math.floor(Math.random() * nameList.length);
                return nameList[index];
            }

            randTimer = null;
            //点击时间
            document.getElementById('random-btn').onclick = function(){
                if (randTimer === null) {
                    //开始定时
                    randTimer = setInterval(function(){
                        document.getElementById('random-text').innerHTML = getRandName()
                    }, 100);
                    //修改按钮值
                    this.innerHTML = '暂 停'
                } else {
                    //停止定时
                    clearInterval(randTimer);
                    randTimer = null;
                    //修改按钮值
                    this.innerHTML = '开始'
                }
            }
        })()



    </script>
</body>
</html>

锚点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>锚点练习</title>

</head>
<body>
	<h1>锚点</h1>
	<!-- 个人觉得根据id作为锚点比较好 -->
	<a href ="#frist">锚点1</a><br>
	<a href ="#second">锚点2</a><br>
	<a href="#maodian3">锚点3</a><br>
	<a href="#maodian4">锚点4</a><br>
	<div style = 'height: 700px'>
		<a name="frist"></a>
		<h2>锚点一</h2>
	</div>
	<div style = 'height: 700px'>
		<a name="second"></a>
		<h2>锚点er</h2>
	</div>
	<div style="height: 700px" id = 'maodian3'>
		<h2>锚点三</h2>
	</div>
	<div style='height: 700px'id ='maodian4'>
		<h2>锚点4</h2>
	</div>
	<a href="#">返回顶部</a>




</body>
</html>

<!-- 锚点是用来找自己内部位置 -->
<!-- 标记锚点可以用name 和 id 标记 -->
<!-- 寻找锚点的时候千万用# -->

navbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>作业</title>
	<style type="text/css">
		body {
			padding:0;
			margin:0;
		}
		.section {
			text-align: center;
			padding: 20px;
			height:700px;
			color: #fff;
		}
		#nav {
			position: fixed;
			bottom:20px;
			right:10px;
			width:120px;
			height: 521px;
		}
	</style>
</head>
<body>

	<div class="section" id="section01" style="background:#369;">
		<h2>五折抄底</h2>
	</div>

	<div class="section" id="section02" style="background:#f90;">
		<h2>疯狂秒杀</h2>
	</div>

	<div class="section" id="section03" style="background:#f90;">
		<h2>电视家影</h2>
	</div>

	<div class="section" id="section02" style="background:#f90;">
		<h2>冰箱.洗衣机</h2>
	</div>
	<div class="section" id="section02" style="background:#f90;">
		<h2>空调</h2>
	</div>
	
	<div class="section" id="section02" style="background:#f90;">
		<h2>厨房电器</h2>
	</div>

	<div class="section" id="section02" style="background:#f90;">
		<h2>返回顶部</h2>
	</div>

	<div id="nav">
		<img src="../../dist/images_two/navbar.png" usemap="#mymap">
		<map name="mymap" id="mymap">
			<area shape="rect" coords="0,50,120,82" href="#section01">
			<area shape="rect" coords="
			0,90,120,125" href="#section02">
			<area shape="rect" coords="
			0,130,120,166" href="#section03">


			<area shape="circle" coords="57,493,35" href="#">

			
		</map>
	</div>




</body>
</html>

精灵图(小图标)

1553699102218

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>精灵图组练习</title>
	<style type="text/css">
		a {
			display:inline-block;
			width: 100px;
			height: 50px;
			background-color:#ccc;
			background: 
		}

		.huawei {
			display: inline-block;
			width:20px;
			height: 20px;
			background: url('./loginv4.png')
				no-repeat -6px -30px;

		}
		.weixin {
			display:inline-block;
			width: 20px;
			height: 20px;
			background: url('./loginv4.png')
				no-repeat -30px -30px;
		}
		.weibo{
			display: inline-block;
			width: 20px;
			height: 20px;
			background: url('./loginv4.png')
				no-repeat -55px -30px;
		}
		.qq {
			display: inline-block;
			width: 20px;
			height: 20px;
			background: url('./loginv4.png')
				no-repeat -6px -53px;
		}


	</style>
</head>
<body>
	<a class = 'huawei' href="https://www.huawei.com/cn/"
	target="_blank"></a>
	<br>
	<a class="weixin" 
	href="https://wx.qq.com/"
	target="_blank"></a>
	<br>
	<a class="weibo" href="
	https://weibo.com/"
	target="_blank"></a>
	<br>
	<a class='qq' target="_blank"
	href="https://v.qq.com/"></a>
</body>
</html>

图片映射

che

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片映射</title>
	<style type="text/css">
		.my-img{

		}
		area{

	}
	</style>
	
</head>
<body>
	<img src="../../img/che.png" class ="my-img"
	alt="图片走丢了" usemap="#my-map">

	<map name="my-map" id="my-map">
		<!-- coords里面放着左上角的x,y 有下角的x,y -->
		<area shape="rect" coords="205,71,379,116"
		title="车窗" target="_blank" href="https://baike.baidu.com/item/%E8%BD%A6%E7%AA%97/2329031?fr=aladdin">

		<!-- 圆形 圆心 -->
		<area shape="circle" coords="556,255,50" 
		title='轮胎' target="_blank" href="https://baike.baidu.com/item/%E8%BD%AE%E8%83%8E/70718?fr=aladdin">

		<!-- 逆时针顺时针都可以 -->
		<area shape="poly" coords="687,153,634,177,709,177" 
		title="车灯" 
		target="_blank" 
		href="https://baike.baidu.com/item/%E8%BD%A6%E7%81%AF/11016102">
	</map>

</body>
</html>

<!-- 图片默认会撑满合理区域 -->
<!-- 所以映射应该是找图片的位置 按照左正下正 			 找到选定区域点-->


<!-- 背景图 精灵图-->
<!-- 精灵图是移动图片 								 找的是左上角度在左正下正坐标体系中的(x,y) -->

<!-- 先造出来个图片 usemap='#my-map'-->
<!-- <map name="" id =''> -->
	<!-- <area shape coords title href target -->
	<!--        1    2       3    4      5-->

简历表格

10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title></title>
	<style>
        table {
            /*1给宽度*/
            width:600px;
            /*2固定平均列换*/
            table-layout: fixed;
            /*3合并单元格边框线*/
            border-collapse: collapse;
        }
        td,th{
            /*1单元格边框*/
            border:1px solid #999;
            /*2内边距*/
            padding:5px;
            /*3居中对齐*/
            text-align: center;
        }
        table tr{
            /*每行的宽度*/
            height: 40px;
        }
        img{
            width: 110px;
        }

    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <td></td>
            <th>性别</th>
            <td></td>
            <td rowspan="3"><img class = 'my-img'
                                 src="../front-end/dist/images_one/10.jpg"
                                alt="图片走丢了" title="画中仙"></td>
        </tr>

        <tr>
            <th>出生年月</th>
            <td></td>
            <th>籍贯</th>
            <td></td>
        </tr>

        <tr>
            <th>政治面貌</th>
            <td></td>
            <th>民族</th>
            <td></td>
        </tr>

        <tr>
            <th>联系电话</th>
            <td></td>
            <th>E-mail</th>
            <td colspan="2"></td>
        </tr>

        <tr>
            <th>家庭住址</th>
            <td></td>
            <th>毕业院校</th>
            <td colspan="2"></td>
        </tr>

        <tr>
            <th>学历</th>
            <td></td>
            <th>专业</th>
            <td colspan="2"></td>
        </tr>

         <tr>
            <th>求职意向</th>
            <td colspan="4"></td>
        </tr>

        <tr>
            <th rowspan="5">学习工作经历</th>
            <th>起止时间</th>
            <th>工作单位</th>
            <th>职务</th>
            <th>岗位职责及业绩成绩</th>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <th rowspan="2">个人能力</th>
            <td colspan="4" rowspan="2"></td>
        </tr>

         <tr>
             <!--这行的位置 被别人占走了  我们要写一个 tr
             标识这行存在 只是被人占走了  -->

             <!--反过来想   底下这行不存在 我去占谁啊-->
            <!--<td colspan="4"></td>-->
        </tr>

        <tr>
            <th rowspan="2">兴趣爱好</th>
            <td colspan="4" rowspan="2"></td>
        </tr>

         <tr>
            <!--<td colspan="4"></td>-->
        </tr>

        <tr>
            <th rowspan="2">个人评价</th>
            <td colspan="4" rowspan="2"></td>
        </tr>

         <tr>
            <!--<td colspan="4"></td>-->
        </tr>





    </table>

</body>
</html>

日历备忘录

日历备忘录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>日历备忘录</title>
	<style>
		table {
			width: 700px;
			table-layout: fixed;
			border-collapse: collapse;
			font-size:12px;
		}
		th,td {
			border: 1px dotted #999;
		}
		.album-header {
			height:30px;
			background: #add;
		}
		.album-content {
			height: 100px;
			vertical-align: top;
		}
	</style>
</head>
<body>
	<table>
		<tr class="album-header">
			<th>周日</th>
			<th>周一</th>
			<th>周二</th>
			<th>周三</th>
			<th>周四</th>
			<th>周五</th>
			<th>周六</th>
		</tr>

		<tr class="album-content">
			<td>27</td>
			<td>28</td>
			<td>29</td>
			<td>30</td>
			<td>31</td>
			<td>1</td>
			<td>2</td>
		</tr>

		<tr class="album-content">
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8
				<ul>
					<li>吃饭</li>
					<li>钓鱼</li>
					<li>约会</li>
				</ul>
			</td>
			<td>9</td>
		</tr>

		<tr class="album-content">
			<td>10</td>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
			<td>15</td>
			<td>16</td>
		</tr>

		<tr class="album-content">
			<td>17</td>
			<td>18</td>
			<td>19</td>
			<td>20</td>
			<td>21</td>
			<td>22</td>
			<td>23</td>
		</tr>

		<tr class="album-content">
			<td>24</td>
			<td>25</td>
			<td>26</td>
			<td>27</td>
			<td>28</td>
			<td>29</td>
			<td>30</td>
		</tr>
	</table>
</body>
</html>

盒子居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型关系</title>
	<style>
		#box {
			width:200px;
			height:200px;
			background: #ccc;
			/*border: 1px solid red;*/
			overflow: hidden;
		}

		#inner {
			margin-left:50px;
			margin-top: 50px;
			width: 100px;
			height: 100px;
			background: orange;
		}
	</style>
</head>
<body>
	<h1>盒子模型关系</h1>
	<hr>

	<div id="box">
		<div id="inner"></div>
	</div>

</body>
</html>

1553685521684

内联居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本属性-同志交友</title>
	<style>
		#box {
			width:400px;
			height: 200px;
			border: 1px dashed pink;
			background:#ccc;

			text-align: center;
			line-height: 200px;
		}

		#box p {
			width: 200px;
			border:1px solid orange;
			padding:10px;
		}

		#box a{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div id="box">
		<!--块-->
		<!-- <p>Lorem ipsum dolor sit amet.</p> -->

		<!--内联-->
		<a href="#">超链接</a>
	</div>
</body>
</html>

布局实例

1553691548172

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局实例</title>
	<style>
		body {
			margin: 0px;
		}
		/*容器*/
		.container {
			margin: 0 auto;
			width: 1000px;
		}

		/*页头*/
		.page-header {
			overflow: hidden;
			background: #999;
			color: #fff;
		}
		
		/*页面主体*/
		.page-main {

		}
		
		/*页面侧边栏*/
		.aside {
			float: left;
			width:300px;
			height: 400px;
			border-right: 1px solid #999;
		}
		
		/*页面内容*/
		.content {
			float: right;
			width:680px;
			height:400px;
		}
		
		/*页脚*/
		.page-footer {
			/*border:1px solid red;*/
			clear: both;
			overflow: hidden;
			color: #fff;
			background:#999;
		}
	</style>
</head>
<body>
<!--body自带一个margin-->
	<div class="container">
		<div class="page-header">
			<h1>老男孩牛逼</h1>
		</div>
		<div class="page-main">

			<div class="aside">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut obcaecati a illum optio soluta expedita aperiam numquam, laudantium illo impedit natus dolore ducimus pariatur nostrum necessitatibus itaque nihil eligendi. Officiis.
				</p>
			</div>
			<div class="content">
				<h2>牛逼高端上档次</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum doloremque non, perspiciatis modi sunt illo eveniet! Culpa quibusdam voluptatem laborum vel, nemo quidem ducimus impedit ad, perferendis rerum ab nostrum.
				</p>
			</div>
		</div>
		<div class="page-footer">
			<h2>牛逼的老男孩</h2>
		</div>
	</div>
</body>
</html>

布局实例2

1553691646667

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局实例</title>
	<style>
		/*通用的设置*/
		* {
			margin: 0;
			padding: 0;
		}
		body {
			font:12px 'Microsoft YaHei',sans-serif;
			text-align: center;
		}

		.container {
			width: 1000px;
			margin: 0 auto;
		}

		.left {
			float: left;
		}
		.right {
			float: right;
		}
		.bg {
			background: #ccc;
		}
		.clearfix {
			height: 10px;
			clear: both;
		}
		.border {
			border: 1px solid #ccc;
		}

		/*end 通用设置*/

		/*page-header 页头*/
		.logo {
			width: 200px;
			height: 100px;
			margin-right: 10px;
		}
		.banner1 {
			width: 580px;
			height: 100px;
			margin-right: 10px;
		}
		.banner2 {
			width: 200px;
			height: 100px;
		}

		/*end page-header*/

		/*page-nav 导航*/
		.page-nav {
			height: 40px;
		}
		/*end page-nav*/

		/*page-main*/
			/*page-content*/
		.page-content {
			width: 790px;
		}
		.page-aside {
			width: 200px;
		}
		.item01 {
			width: 388px;
			height: 198px;
		}
		.item02 {
			width:188px;
			height: 198px;
			margin-right:10px;
		}
		.item02-last {
			margin-right: 0px;
		}
			/*endpage-content*/
			
			/*page-aside 侧边栏*/
		.item03 {
			height:128px;
		}
			/*endpage-aside*/
		


		/*end page-main*/

			
		/*page-footer 页脚*/
		.page-footer {
			height: 60px;
		}
		/*end page-footer*/


	</style>
</head>
<body>
	
	<div class="container">
		<!--页头-->
		<div class="page-header">
			<div class="left bg logo">LOGO</div>
			<div class="left bg banner1">BANNER01</div>	
			<div class="left bg banner2">BANNER02</div>	
		</div>
		<!--end 页头-->
			
		<div class="clearfix"></div>
		
		<!--页面导航-->
		<div class="bg page-nav">
			导航	
		</div>
		<!--end 页面导航-->

		<div class="clearfix"></div>
		
		<!--页面主体，里面分为 左边的主要内容和右边的侧边栏-->
		<div class="page-main">
			<!--主要内容-->
			<div class="left page-content">
				<div class="row">
					<div class="left border item01">
						栏目一</div>
					<div class="right border item01">栏目二</div>
				</div>

				<div class="clearfix"></div>

				<div class="row">
					<div class="left border item02">栏目三</div>	
					<div class="left border item02">栏目四</div>	
					<div class="left border item02">栏目五</div>	
					<div class="left border item02 item02-last">栏目六</div>	
				</div>

			</div>

			侧边栏
			<div class="right page-aside">
				<div class="border item03">栏目七</div>
				<div class="clearfix"></div>
				<div class="border item03">栏目八</div>
				<div class="clearfix"></div>
				<div class="border item03">栏目就</div>
			</div>
		</div>
		<!--end 页面主体结束-->

		<div class="clearfix"></div>
			
		<!--页脚-->
		<div class="bg page-footer">页脚</div>
		<!--end 页脚-->
	</div>
</body>
</html>

登陆

1553691967413

需要

input_icons

pass_login_icons

smsSwitchPhone

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			font:12px "Microsoft YaHei", sans-serif;
			color:#6a6a6a;
			background:#ccc;
		}
		a{
			text-decoration:none;
		}
		.login-box{
			margin:40px;
			width:400px;
			background:#fff;
			position:relative;
		}
		.login-title{
			height:48px;
			line-height: 48px;
			padding:0 20px;
			background:#f5f5f5;
		}
		.login-title h3{
			font-size:16px;
			float:left;
		}
		.login-title span{
			float:right;
			width:16px;
			height:16px;
			margin-top:16px;
			background:url('../zuoye_images/pass_login_icons.png') no-repeat -72px -48px;
		}
		.login-body{
			clear:both;
			padding:24px 20px 50px;
			overflow: hidden;
		}
		.smswrapper{
			overflow:hidden;
			margin-bottom:10px;
		}
		.smswrapper a{
			float:right;
			background:url('../zuoye_images/smsSwitchPhone.png') no-repeat;
			padding-left:12px;
			line-height: 14px;
			height:14px;
		}
		.usernamewrapper{
			clear:both;
			margin-bottom:15px;
		}

		.usernamewrapper input{
			height:42px;
			line-height:42px;
			width:334px;
			color:#ccc;
			border:1px solid #ccc;
			background:url('../zuoye_images/input_icons.png') no-repeat 0px -61px;
			padding-left:24px;
		}
		
		.passwordwrapper{
			margin-bottom:15px;
		}
		.passwordwrapper input{
			height:42px;
			width:334px;
			line-height:42px;
			color:#ccc;
			border:1px solid #ccc;
			background:url('../zuoye_images/input_icons.png') no-repeat 0px -140px;
			padding-left:24px;
		}

		.remberwrapper{
			margin-bottom:15px;
			overflow: hidden;
		}
		.remberwrapper span{
			float:left;
		}
		.remberwrapper span input{
			vertical-align: middle;
		}
		.remberwrapper a{
			float:right;
		}

		.submitwrapper{
			clear:both;
			margin-bottom:15px;
		}
		.submitwrapper button{
			background: #3A87EF;height: 48px;
		    font-size: 16px;
		    font-weight: bold;
		    cursor: pointer;
		    color: #fff;
		    background: #3f89ec;
		    border:none;
		    width:100%;
		}
		
		.regwrapper a{
			float:right;
		}


		.login-footer{
			clear:both;
			padding:15px 0px 15px 20px;
			overflow:hidden;
		}
		.qq{
			float:left;
			width:24px;
			height:24px;
			background:url('../zuoye_images/pass_login_icons.png') no-repeat -90px 0px;
			margin:15px 15px 0px 0px;
		}
		.weibo{
			float:left;
			width:24px;
			height:24px;
			background:url('../zuoye_images/pass_login_icons.png') no-repeat -60px 0px;
			margin:15px 15px 0px 0px;
		}
		.code{
			position:absolute;
			width:45px;
			height:45px;
			right:0px;
			bottom:0px;
			background:url('../zuoye_images/pass_login_icons.png') no-repeat -45px -85px;
			cursor:pointer;
		}
	</style>
</head>
<body>
	<div class="login-box">
		<div class="login-title">
			<h3>登录XDL</h3>
			<span class="close"></span>
		</div>
		<div class="login-body">
			<p class="smswrapper">
				<a href="">短信快捷登录</a>
			</p>
			<p class="usernamewrapper">
				<label for=""></label>
				<input type="text" value="手机/邮箱/用户名">
			</p>
			<p class="passwordwrapper">
				<label for=""></label>
				<input type="text" value="密码">
			</p>

			<p class="remberwrapper">
				<span>
					<input type="checkbox" checked name="" id="">
					<label for="">下次自动登录</label>
				</span>
				<a href="">登录遇到问题</a>
			</p>

			<p class="submitwrapper">
				<button>登录</button>
			</p>

			<p class="regwrapper">
				<a href="">立即注册</a>
			</p>
		</div>
		<div class="login-footer">
			<p class="elselogin">可以使用以下方式登录</p>
			<p class="login_list">
				<a href="#" class="qq"></a>
				<a href="#" class="weibo"></a>
			</p>
		</div>

		<div class="code"></div>
	</div>
</body>
</html>

cursor小手页面

1553699082849

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cursor属性</title>
	<style>
		.cursor-item{
			width:240px;
			height:40px;
			padding:20px;
			font-size:30px;
			font-family: "Microsoft YaHei";
			background-color:#eee;
			margin-top:10px;
			border:1px solid #ccc;
			text-align:center;
			line-height:40px;
			font-weight: bolder;
			float:left;
			margin-right:10px;
			box-shadow:2px 2px 5px #ddd;
			color:#777;
		}
	</style>
</head>
<body>
		<div class="cursor-item" style="cursor:auto"> auto</div>
		<div class="cursor-item" style="cursor:default">default </div>  
		<div class="cursor-item" style="cursor:none "> none</div>
		<div class="cursor-item" style="cursor:context-menu">context-menu </div> 
		<div class="cursor-item" style="cursor:help "> help</div>
		<div class="cursor-item" style="cursor:pointer">pointer</div> 
		<div class="cursor-item" style="cursor:progress "> progress</div>
		<div class="cursor-item" style="cursor:wait "> wait</div>
		<div class="cursor-item" style="cursor:cell "> cell</div>
		<div class="cursor-item" style="cursor:crosshair">crosshair </div> 
		<div class="cursor-item" style="cursor:text "> text</div>
		<div class="cursor-item" style="cursor:vertical-text">vertical-text </div> 
		<div class="cursor-item" style="cursor:alias ">alias </div>
		<div class="cursor-item" style="cursor:copy "> copy</div>
		<div class="cursor-item" style="cursor:move ">move </div> 
		<div class="cursor-item" style="cursor:no-drop ">no-drop </div>
		<div class="cursor-item" style="cursor:not-allowed">not-allowed </div> 
		<div class="cursor-item" style="cursor:e-resize ">e-resize </div>
		<div class="cursor-item" style="cursor:n-resize ">n-resize  </div>
		<div class="cursor-item" style="cursor:ne-resize ">ne-resize </div>
		<div class="cursor-item" style="cursor:nw-resize ">nw-resize </div>
		<div class="cursor-item" style="cursor:s-resize "> s-resize</div>
		<div class="cursor-item" style="cursor:se-resize ">se-resize </div>
		<div class="cursor-item" style="cursor:sw-resize ">sw-resize </div>
		<div class="cursor-item" style="cursor:w-resize ">w-resize </div>
		<div class="cursor-item" style="cursor:ew-resize ">ew-resize </div>
		<div class="cursor-item" style="cursor:ns-resize "> ns-resize</div>
		<div class="cursor-item" style="cursor:nesw-resize "> nesw-resize</div>
		<div class="cursor-item" style="cursor:nwse-resize ">nwse-resize</div>
		<div class="cursor-item" style="cursor:col-resize "> col-resize </div>
		<div class="cursor-item" style="cursor:row-resize ">row-resize </div>
		<div class="cursor-item" style="cursor:all-scroll">all-scroll </div>
</body>
</html>

16进制转rgb

1553699035902

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>16进制转rgb</title>
	<style>
		
	</style>
</head>
<body>
	<h1>16进制转rgb</h1>
	<hr>
	<table cellpadding=5>
		<tr>
			<td align='right'><label for="">请输入16进制颜色值:</label></td>
			<td>#<input type="text" id="color"></td>
			<td><button  id="btn1">转换</button></td>
		</tr>
		<tr>
			<td align='right'><span class="colorName" style="color:#f00">Red:</span></td>
			<td><span class="colorValue" id="redValue"></span></td>
			<td></td>
		</tr>

		<tr> 
			<td align='right'><span class="colorName" style="color:#0f0">Green:</span></td>
			<td><span class="colorValue" id="greenValue"></span></td>
			<td></td>
		</tr>

		<tr>
			<td align='right'><span class="colorName" style="color:#00f">Blue:</span></td>
			<td><span class="colorValue" id="blueValue"></span></td>
			<td></td>
		</tr>

		<tr>
			<td align='right'><span class="colorName" style="color:#369">ColorString:</span></td>
			<td><span class="colorValue" id="colorString"></span></td>
			<td></td>
		</tr>

	</table>
	

	

	
	<script>

		//获取按钮1对象
		var btn1 = document.getElementById('btn1');
		//获取input输入框
		var colorObj = document.getElementById('color');

		//绑定单击事件
		btn1.onclick = function(){

			//获取input框中值
			var colorValue = colorObj.value;

			//判断输入的只能是6位或3位
			if(colorValue.length != 3 && colorValue.length != 6){
				alert('请输入合法的16进制');
				colorObj.value = "";
				return;
			}

			//如果是3位 进行转换
			if(colorValue.length == 3){
				var colorValue = colorValue[0]+colorValue[0]+colorValue[1]+colorValue[1]+colorValue[2]+colorValue[2];

			}

			//转换成数值型
			var number = Number('0x'+colorValue);

			//如果无法转换成数值型 结束程序
			if(isNaN(number)){
				alert('请输入合法的16进制');
				colorObj.value = "";
				return;
			}

			//获取b的数值
			var b = number & 0x0000ff;

			//获取g的数值
			var g = (number >> 8) & 0x00ff;

			//获取r的数值
			var r = number >> 16;
			//拼装rgb字符串
			var colorString = 'rgb('+r+','+g+','+b+')';

			//赋值
			document.getElementById('redValue').innerHTML = r;
			document.getElementById('greenValue').innerHTML = g;
			document.getElementById('blueValue').innerHTML = b;
			document.getElementById('colorString').innerHTML = colorString;

			
		}




		
		

	</script>


	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>

	<h1>rgb转16进制</h1>
	<hr>
	<table>
		<tr>
			<td align="right">请输入rgb的值:</td>
			<td> r: <input type="text" id="red" size='3'  maxlength='3'></td>
			<td> g: <input type="text" id="green" size='3'  maxlength='3'></td>
			<td> b: <input type="text" id="blue" size='3'  maxlength='3'></td>
			<td><button id="btn2">转换</button></td>
		</tr>
		<tr>
			<td align='right'> 16进制:</td>
			<td id="xstring" colspan='4'></td>
		</tr>
	</table>	
	<script>
		//获取按钮
		var btn2 = document.getElementById('btn2');
		//绑定单击事件
		btn2.onclick = function(){
			//获取rgb的值
			var red = Number(document.getElementById('red').value);
			var green = Number(document.getElementById('green').value);
			var blue = Number(document.getElementById('blue').value);

			//判断三个值
			if(isNaN(red) || red < 0 || red > 255){
				alert('请输入正确数值！');
				return;
			}
			if(isNaN(green) || green < 0 || green > 255){
				alert('请输入正确数值！');
				return;
			}
			if(isNaN(blue) || blue < 0 || blue > 255){
				alert('请输入正确数值！');
				return;
			}
			//转换成 16进制
			var r = red.toString(16);
			var g = green.toString(16);
			var b = blue.toString(16);

			

			if(r.length < 2){
				r = '0'+r;
			}
			if(g.length < 2){
				g = '0'+g;
			}
			if(b.length < 2){
				b = '0'+b;
			}

			var xstring = '#'+r+g+b;

			document.getElementById('xstring').innerHTML = xstring;
		}
	</script>
</body>
</html>

导航

1553699064504

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航条</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			font:16px "Microsoft YaHei", sans-serif;
		}
		ul{
			list-style:none;
		}
		.nav{
			background:#333;
			height:40px;
			line-height: 40px;
		}
		
		.container{
			margin:0 auto;
			width:1000px;
		}
		.nav li{
			float:left;
		}


		.nav li a{
			color:#fff;
			text-decoration: none;
			float:left;
			width:100px;
			text-align:center;
		}

		 .nav li.active{
			background: red;
		} 
		
		.nav li:hover{
			background:red;

		}

		.banner img{
			width:100%;
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="container">
			<ul>
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">商城</a></li>
				<li><a href="#">论坛</a></li>
				<li><a href="#">博客</a></li>
				<li><a href="#">关于我们</a></li>
			</ul>
		</div>
	</div>

	<div class="banner">
		<img src="../zuoye_images/O909.jpg" alt="">
	</div>
</body>
</html>

下拉菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>纯CSS实现下拉菜单</title>
	<style>
		/*1.全部设为0*/
		* {
			padding: 0;
			margin: 0;
		}
		/*2设置所有字体*/
		body {
			font:14px "Microsoft YaHei",sans-serif;
		}
		/*3.干掉ul*/
		ul {
			list-style: none;
		}
		/*4设置内容宽度*/
		.container {
			margin: 0 auto;
			width: 1000px;
		}
		/*5.文字宽度和背景*/
		.nav {
			/*margin-top: 60px;*/
			width: 100%;
			height: 40px;
			line-height: 40px;
			background: #333;
		}
		
		/*一级菜单*/ /*该选择器会选择 所有li*/
		/*6.设置所有的文字左边浮动*/
		.nav li {
			float: left;
			position: relative;
		}

		/*一级菜单*/
		/*7.设置li下面的所有文字颜色变成白色*/
		.nav li a {
			display: block;
			width: 100px;
			text-align: center;
			color: #fff;
			text-decoration: none;
		}

		/*二级菜单*/
		/*8.二级菜单下的文字变成黑色*/
		.nav li ul li a {
			color: #333;
		}
		/*9.设置a下面的不浮动*/
		.nav li ul li {
			/*覆盖前面设置  */
			float: none;
		}
		/*10.设置隐藏*/
		.nav li ul {
			/*border: 1px solid #ccc;
			border-top: none;*/
			background: #fff;
			/*二级菜单先隐藏*/
			display: none;

			/*绝对定位*/
			position: absolute;
			left:0;
			top:;
		}

		
		/*!*11.划过那个li 哪个li就变红*!*/
		.nav li:hover {
			background: red;
		}
		/*12.打开隐藏*/
		.nav li:hover ul{
			display: block;
		}

		/*!*设置banner*!*/
		/*13.图片100%*/
		.banner img {
			width: 100%;
		}
	</style>
</head>
<body>
	
	<div class="nav">
		<div class="container">
			<ul>
				<li><a href="#">首页</a></li>
				<li>
					<a href="#">博客</a>
					<!--下面的不浮动-->
					<ul>
						<li><a href="#">同志博客</a></li>
						<li><a href="#">小同志博客</a></li>
						<li><a href="#">老同志博客</a></li>
						<li><a href="#">大同志博客</a></li>
					</ul>
				</li>
				<li>
					<a href="#">论坛</a>
					<ul>
						<li><a href="#">同志论坛</a></li>
						<li><a href="#">红色论坛</a></li>
						<li><a href="#">黄色论坛</a></li>
						<li><a href="#">绿色论坛</a></li>
					</ul>
				</li>
				<li><a href="#">关于我们</a></li>
				<li>
					<a href="#">举报我们</a>
					<ul>
						<li><a href="#">涉黄</a></li>
						<li><a href="#">涉黑</a></li>
						<li><a href="#">涉赌</a></li>
						<li><a href="#">涉毒</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>


	<div class="banner">
		<img src="../../dist/images_one/meinv02.jpg" alt="">
	</div>
</body>
</html>

增加过渡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>纯CSS实现下拉菜单</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		body {
			font:14px "Microsoft YaHei",sans-serif;
		}
		ul {
			list-style: none;
		}
		.container {
			margin: 0 auto;
			width: 1000px;
		}

		.nav {
			/*margin-top: 60px;*/
			width: 100%;
			height: 40px;
			line-height: 40px;
			background: #333;
		}
		
		/*一级菜单*/ /*该选择器会选择 所有li*/
		.nav li {
			float: left;
			position: relative;
		}

		/*一级菜单*/
		.nav li a {
			display: block;
			width: 100px;
			text-align: center;
			color: #fff;
			text-decoration: none;
		}

		/*二级菜单*/
		.nav li ul li a {
			color: #333;
		}
		.nav li ul li {
			/*覆盖前面设置  */
			float: none;
		}
		.nav li ul {
			/*border: 1px solid #ccc;
			border-top: none;*/
			background: #fff;
			/*二级菜单先隐藏*/
			/*display: none;
*/
			/*绝对定位*/
			position: absolute;
			left:0;
			top:;
			
			overflow: hidden;
			height: 0px;

			/*过渡*/
			transition: height .5s;
		}

		
		/*划过那个li 哪个li就变红*/
		.nav li:hover {
			background: red;
		}
		.nav li:hover ul{
		/*	display: block;*/
			height: 160px;
		}

		/*设置banner*/
		.banner img {
			width: 100%;
		}
	</style>
</head>
<body>
	
	<div class="nav">
		<div class="container">
			<ul>
				<li><a href="#">首页</a></li>
				<li>
					<a href="#">博客</a>
					<ul>
						<li><a href="#">同志博客</a></li>
						<li><a href="#">小同志博客</a></li>
						<li><a href="#">老同志博客</a></li>
						<li><a href="#">大同志博客</a></li>
					</ul>
				</li>
				<li>
					<a href="#">论坛</a>
					<ul>
						<li><a href="#">同志论坛</a></li>
						<li><a href="#">红色论坛</a></li>
						<li><a href="#">黄色论坛</a></li>
						<li><a href="#">绿色论坛</a></li>
					</ul>
				</li>
				<li><a href="#">关于我们</a></li>
				<li>
					<a href="#">举报我们</a>
					<ul>
						<li><a href="#">涉黄</a></li>
						<li><a href="#">涉黑</a></li>
						<li><a href="#">涉赌</a></li>
						<li><a href="#">涉毒</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>


	<div class="banner">
		<img src="../../dist/images_one/meinv02.jpg" alt="">
	</div>
</body>
</html>

css动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3动画</title>
	<style>
		
		/*关键帧的语法*/
		@keyframes myanimate{
			from {
				background: red;
				width:200px;
			}

			50% {
				width:400px;
			}

			to {
				background: green;
				width:600px;
			}
		}

		.box {
			width: 200px;
			height: 200px;
			border: 2px dashed orange;

			animation-name: myanimate;
			animation-duration: 1s; /*动画持续时间*/
			animation-timing-function: linear;
			animation-delay: 0s;
			animation-iteration-count: infinite; /*无限循环*/
			animation-direction: alternate; /*多次循环的时候，一次正向动画，一次反向动画*/

			animation-play-state: paused;

			animation: myanimate 2s linear 2 alternate;
		}

		.box:hover {
			animation-play-state: running;
		}
	</style>
</head>
<body>
	
	<div class="box"></div>


</body>
</html>

过渡实例

1553699367316

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡实例</title>
	<style>
		.item {
			display: inline-block;
			width: 100px;
			height: 100px;
			border: 1px solid #ccc;
			text-align: center;
			line-height: 100px;
			border-radius: 50px;
			font-size:30px;
			cursor:pointer;

			/*过渡*/
			transition: transform 1s;
		}

		.item:hover {
			transform: rotate(360deg)
		}
	</style>
</head>
<body>
	<h1>同志</h1>
	<hr>

	<div class="list">
		<div class="item">张</div>
		<div class="item">李</div>
		<div class="item">王</div>
		<div class="item">孙</div>
		<div class="item">刘</div>
		<div class="item">杨</div>
		<div class="item">朱</div>
		<div class="item">牛</div>
	</div>
</body>
</html>

二

简易计算器(加法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简易计算器</title>
	<style>
		input {
			width: 300px;
			font-size: 16px;
			line-height: 18px;
			padding:10px;
			border: 1px solid #ccc;
		}
		
		button {
			padding: 10px 20px;
			border: 1px solid #ccc;
			background: #f5f5f5;
		}
		.res {
			width: 300px;
			height: 100px;
			padding: 10px;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<h1>计算器</h1>
	<hr>
	
	<table>
		<tr>
			<td>加数1：</td>
			<td>
				<input type="text" id="num1">
			</td>
		</tr>

		<tr>
			<td>加数2：</td>
			<td>
				<input type="number" id="num2">
			</td>
		</tr>

		<tr>
			<td></td>
			<td>
				<button onclick="add()">+</button>
			</td>
		</tr>

		<tr>
			<td></td>
			<td>
				<div class="res" id="box"></div>
			</td>
		</tr>
	</table>

	<script>
		
		//定义函数
		function add() {
			// 获取 用户在 input 中输入的内容
			// 获取元素对象 返回对象 对象描述 id是num1的元素 
			var inputEle1 = document.getElementById('num1');
			var inputEle2 = document.getElementById('num2');

			//获取用户在input中输入的值
			var v1 = inputEle1.value;
			var v2 = inputEle2.value;

			//判断用户输入是否是纯数字
			if (isNaN(v1)) {
				alert('加数1必须是纯数字');
				return; 
			}
			if (isNaN(v2)) {
				alert('加数2必须是纯数字');
				return;
			}

			//把字符串转换为数字
			v1 = Number(v1);
			v2 = Number(v2);

			//两个数相加
			var sum = v1 + v2;

			//获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容
			var boxEle = document.getElementById('box');
			boxEle.innerHTML = sum;

		}
	</script>
	
</body>
</html>

简易计算器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简易计算器</title>
	<style>
		input {
			width: 300px;
			font-size: 16px;
			line-height: 18px;
			padding:10px;
			border: 1px solid #ccc;
		}
		
		button {
			padding: 10px 20px;
			border: 1px solid #ccc;
			background: #f5f5f5;
			cursor: pointer;
		}
		.res {
			width: 300px;
			height: 100px;
			padding: 10px;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<h1>计算器</h1>
	<hr>
	
	<table>
		<tr>
			<td>加数1：</td>
			<td>
				<input type="text" id="num1">
			</td>
		</tr>

		<tr>
			<td>加数2：</td>
			<td>
				<input type="number" id="num2">
			</td>
		</tr>

		<tr>
			<td></td>
			<td>
				<button onclick="add(1)">+</button>
				<button onclick="add(2)">-</button>
				<button onclick="add(3)">x</button>
				<button onclick="add(4)">÷</button>
				<button onclick="add(5)">AC</button>
			</td>
		</tr>

		<tr>
			<td></td>
			<td>
				<div class="res" id="box"></div>
			</td>
		</tr>
	</table>

	<script>
		
		//定义函数
		function add(mode) {
			// 获取 用户在 input 中输入的内容
			// 获取元素对象 返回对象 对象描述 id是num1的元素 
			var inputEle1 = document.getElementById('num1');
			var inputEle2 = document.getElementById('num2');
		

			//获取用户在input中输入的值
			var v1 = inputEle1.value;
			var v2 = inputEle2.value;

			//判断用户输入是否是纯数字
			if (isNaN(v1)) {
				alert('加数1必须是纯数字');
				return; 
			}
			if (isNaN(v2)) {
				alert('加数2必须是纯数字');
				return;
			}

			//把字符串转换为数字
			v1 = Number(v1);
			v2 = Number(v2);

			//两个数操作
			switch (mode) {
				case 1:
					var sum = v1 + v2; 
					break; //相加
				case 2:
					var sum = v1 - v2; 
					break; //相减
				case 3:
					var sum = v1 * v2; 
					break; //相乘
				case 4:
					var sum = v1 / v2; 
					break; //相除
				case 5: 
					inputEle1.value = '';
					inputEle2.value = '';
					var sum = '';
					break;
			}
			

			//获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容
			var boxEle = document.getElementById('box');
			boxEle.innerHTML = sum;

		}
	</script>
	
</body>
</html>

九九乘法表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>九九乘法表</title>
	<style>
		body {
			color: #333;
		}
		table {
			width: 900px;
			table-layout: fixed;
			border-collapse: collapse;
		}
		td {
			border: 1px solid #ccc;
			padding: 10px;
		}
	</style>
</head>
<body>
	<h1>九九乘法表</h1>
	<hr>


	<script>
		//JavaScript生成九九乘法表
		document.write('<table>');

		//循环 输出tr 行
		for (var i = 1; i <= 9; i ++) {
			document.write('<tr>');

			//输出 td 单元格
			for (var j = 1; j <= i; j ++) {
				document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
			}
			
			document.write('</tr>');
		}

		document.write('</table>');

	</script>


</body>
</html>

文字变色(1秒)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器</title>
</head>
<body>
	<h1>同志交友</h1>
	<script>
		

		//创建定时器  单次定时
		setTimeout(function(){
			document.body.style.background = '#f5f5f5';
		}, 2000);


		//多次定时
		setInterval(function(){
			//console.log('OK');
			var h1Ele = document.querySelector('h1');

			//随机颜色
			var r = Math.floor(Math.random() * 256); //0到255之间的随机数
			var g = Math.floor(Math.random() * 256); //0到255之间的随机数
			var b = Math.floor(Math.random() * 256); //0到255之间的随机数

			h1Ele.style.color = `rgb(${r}, ${g}, ${b})`;

		}, 1000);
	</script>
</body>
</html>

倒数(10秒)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时案例</title>
	<style>
		h1 {
			margin-top:100px;
			text-align: center;
			font-size: 300px;
		}

	</style>
</head>
<body>
	<h1>10</h1>

	<script>
		var h1 = document.querySelector('h1');
		var m = 10;

		var time = setInterval(function(){
			h1.innerHTML = --m;

			//当m <= 0的时候
			if (m <= 0) {
				clearInterval(time); //清除定时
				h1.innerHTML = '你死定了'
			}
		}, 1000)




	</script>
</body>
</html>

世界末日

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body>
    <div class="daojishi"></div>
    <script>
        var daojishi=document.querySelector(".daojishi")
        daojishi.fontSize="80px";
        var minute=10;
        var day=10;
        var hour=10;
        var second=10;


        setInterval(function () {
             if (second===0){
                 second=60;
                 minute--
             }
             if (minute===0){
                 minute=60;
                 hour--
             }
             if (hour===0){
                 hour=24;
                 day--
             }
             str="距离世界末日还有"+String(day)+"天"+String(hour)+"小时"+String(minute)+"分"+String(second)+"秒";
             second--
            daojishi.innerHTML=str

        },1000);



    </script>
</body>
</html>

进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条效果</title>
    <style>
        body{
            background: #d6d9de;
        }
        .waiyinying{
            float: left;
            margin: 0;
            background:#bdc0c5 ;
            width: 750px;
            height: 100px;
            border-radius:100px ;
            text-align: center;
            display:table;
        }

        .waik{
            margin: 0;
            /*盒子阴影*/
            box-shadow: 3px 3px 5px #5f5750;
            /*background: ;*/
            display: inline-block;

            /*给里面的div居中*/
            text-align: center;
        }
        span{
            margin: 0;
            /*color: #6a6a6a;*/

            display: table-cell;
            vertical-align: middle;
        }

        .innerBack{
            width:650px;
            height: 20px;
            background: #bdc0c5;
            border-radius: 10px;
            /*box-shadow: 3px 3px 5px #818496;*/
            /*为了居中*/
            display: inline-block;
            box-shadow:3px 3px 5px #818496 ;
            vertical-align: middle;
        }
        .waik span{
            /*为了辅助居中*/
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }


          .gundong{

            margin: 0;
            width: 1px;
            height:19px ;
            background: #0c80dc;
            border-radius: 10px;
            box-shadow:2px 2px 3px #818496 ;

        }

        .persent{
            float: left;

        }
        .persent{
            font-size: 80px;
        }



    </style>

</head>
<body>
    <div class="waiyinying">
        <span><div class="waikuang waik">

            <div class="innerBack">
                <div class="gundong"></div>

            </div>
            <span></span>

        </div></span>
    </div>

    <div class="persent"><span>0%</span></div>
    <script>
        var outerb= document.querySelector(".waikuang")
        outerb.style.border="1px solid  #6a6a6a"
        outerb.style.width="700px"
        outerb.style.height="60px"
        outerb.style.borderRadius="100px"
        outerb.style.background="#e9eaee"
        var num=1
        var timer = setInterval(function () {
            var gun =document.querySelector(".gundong")
            var pers=document.querySelector(".persent span")

                var r=Math.floor(Math.random()*100)
                num+=r
                // gun.style.width=nu
                if(num>650){
                    num=650
                }
                //添加%分比例
                handru=Math.floor(num/650*100)
                ha=String(handru)+"%"
                pers.innerHTML=ha
                //更改宽度
                nu=String(num)+"px"
                console.log(nu)
                gun.style.width=nu


                if (num===650){
                    clearInterval(timer)

                }

        },200)



    </script>

</body>
</html>

数组去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组去重复</title>
</head>
<body>
    <script>
        var aa=[1,1,4,4,1,2,4,4,1,23,455,6]
    //   我们可以利用一个函数将他去重  并把返回值  直接付给aa
        function unique(aa) {
            var bb=[];
            //便利一边  aa  然后我们根据  bb中是否有这个值
            //来去 为bb添加值
            aa.forEach(function (val, index) {
                if (bb.indexOf(val)===-1){
                    bb.push(val)
                }
            })
            return bb

        }

        aa= unique(aa)
        console.log(aa)

    //    总结  这种题  是  去重 如果需要创建新的列表
    //    我们就需要 把他转化为  一个列表的值根据另一个列表来判断
    //    所以  原始的列表  一定要写在外面
    //    终归是一个谁来映射谁的问题





    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
</head>
<body>

    <script>
        arr=[1,1,1,4,3,2,2,4]
        // console.log(arr)
        //首先我们做一个函数
        // 并且把这个函数的返回值
        // 给做成不重复的列表
        function uniqueArray(arr) {
            //定义上一个空列表
            var newArr =[];
            //用foreach  拿到 value 和 index  foreach 里面有value和 index
            //我们  就往另一个添加就好了  indexof 可以判断是否有这个值
            //而我们只要没有的那种情况
            arr.forEach(function (val, index) {
                //如果 判断 一个数组中是否有  这个值
                //如果没有回返回-1
                //没有的情况  我们就添加上  就会避免 重复的现象
                if(newArr.indexOf(val)===-1){
                    newArr.push(val)
                }

            })
            return newArr;

        }
        arr =  uniqueArray(arr)
        console.log(arr)
    </script>


</body>
</html>

三

纯DOM操作-todolist

1553700437437

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todoList</title>
	<style>	
		#todoList {
			list-style: none;
			margin:10px 0px;
			padding:0;
			width:600px;
		}
		#todoList li {
			margin-bottom:5px;
			padding: 10px;
			border: 1px solid #ccc;
			background:#f5f5f5;
			position: relative;
		}
		input {
			padding:10px;
			font-size:16px;
			border:1px solid #ccc;
		}
		button {
			padding:10px 20px;
			border:1px solid #ccc;
			background: #f5f5f5;
			outline: none;
			cursor: pointer;
		}
		#todoList span {
			position: absolute;
			right: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<input type="text" id="content"> 
	<button id="btn">添加</button>
	<ul id="todoList">
		<li>取钓鱼 <span>&times;</span></li>
		<li>取洗澡 <span>&times;</span></li>
		<li>取吃饭 <span>&times;</span></li>
		<li>去睡觉 <span>&times;</span></li>
	</ul>


	<script>	
		var input = document.querySelector('#content');
		var btn = document.querySelector('#btn');
		var todoList= document.querySelector('#todoList');
		var spans = document.querySelectorAll('#todoList span');


		btn.onclick = function(){
			//获取 input的内置
			var text = input.value;

			//创建li元素 并给li元素添加包裹 内容
			var li = document.createElement('li');
			li.innerText = text;
			var span = document.createElement('span');
			span.innerHTML = '&times;';
			li.appendChild(span);

			//把li元素添加到ul中
			todoList.appendChild(li);
		}


		/*spans.forEach(function(span){
			span.onclick = function(){
				todoList.removeChild(this.parentNode)
			}
		})*/

		//委派方式绑定event.target元素标签
		// nodeName标签名parentNode父元素
		todoList.onclick = function(event) {
			if (event.target.nodeName === 'SPAN') {
				this.removeChild(event.target.parentNode);
			}
		}
	</script>
</body>
</html>

菜单实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>菜单实例</title>
	<style>
		ul {
			padding:0;
			margin:0;
			list-style: none;
		}
		.nav {
			width: 120px;
		}
		.nav h2 {
			margin:0;
			font-size: 16px;
			font-weight: normal;
			padding: 0px 20px;
			height: 40px;
			line-height: 40px;
			border:1px solid #999;
			border-bottom:none;
			background: #369;
			cursor: pointer;
		}
		.nav ul {
			border:1px solid #999;
			display: none;
		}
		.nav li a{
			color:#333;
			font-size: 14px;
			text-align: center;
			text-decoration: none;
			display: block;
			padding: 0px 20px;
			height: 30px;
			line-height: 30px;
			border-bottom:1px solid #999;
		}
		.nav li:last-child a {
			border-bottom:none;
		}
	</style>
</head>
<body>
	<h1>后台管理</h1>
	<hr>
	<div class="nav">
		<h2>用户管理</h2>
		<ul>
			<li><a href="#">用户列表</a></li>
			<li><a href="#">用户添加</a></li>
			<li><a href="#">用户删除</a></li>
			<li><a href="#">用户修改</a></li>
		</ul>
		<h2>订单管理</h2>
		<ul>
			<li><a href="#">订单列表</a></li>
			<li><a href="#">订单添加</a></li>
			<li><a href="#">订单删除</a></li>
			<li><a href="#">订单修改</a></li>
		</ul>
		<h2>商品管理</h2>
		<ul>
			<li><a href="#">用户列表</a></li>
			<li><a href="#">用户添加</a></li>
			<li><a href="#">用户删除</a></li>
			<li><a href="#">用户修改</a></li>
		</ul>
		<h2>评论管理</h2>
		<ul>
			<li><a href="#">用户列表</a></li>
			<li><a href="#">用户添加</a></li>
			<li><a href="#">用户删除</a></li>
			<li><a href="#">用户修改</a></li>
		</ul>
	</div>
	<script src="../jquery-3.3.1.js"></script>
	<script>
		$(function(){
				//找到具体的触发  jquery元素. on('事件',function(){})
			$('.nav h2').on('click', function(){
				//$(this).next('ul').toggle();
				//当前元素的下一个兄弟元素  然后调用隐藏显示的方法
				$(this).next('ul').slideToggle();
			})
		})
	</script>
</body>
</html>

菜单实例-CSS

1
2


菜单实例-手风琴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>菜单实例</title>
	<style>
		ul {
			padding:0;
			margin:0;
			list-style: none;
		}
		.nav {
			width: 120px;
		}
		.nav h2 {
			margin:0;
			font-size: 16px;
			font-weight: normal;
			padding: 0px 20px;
			height: 40px;
			line-height: 40px;
			border:1px solid #999;
			border-bottom:none;
			background: #369;
			cursor: pointer;
		}
		.nav ul {
			border:1px solid #999;
			display: none;
		}
		.nav li a{
			color:#333;
			font-size: 14px;
			text-align: center;
			text-decoration: none;
			display: block;
			padding: 0px 20px;
			height: 30px;
			line-height: 30px;
			border-bottom:1px solid #999;
		}
		.nav li:last-child a {
			border-bottom:none;
		}
	</style>
</head>
<body>
	<h1>后台管理</h1>
	<hr>
	<div class="nav">
		<h2>用户管理</h2>
		<ul>
			<li><a href="#">用户列表</a></li>
			<li><a href="#">用户添加</a></li>
			<li><a href="#">用户删除</a></li>
			<li><a href="#">用户修改</a></li>
		</ul>
		<h2>订单管理</h2>
		<ul>
			<li><a href="#">订单列表</a></li>
			<li><a href="#">订单添加</a></li>
			<li><a href="#">订单删除</a></li>
			<li><a href="#">订单修改</a></li>
		</ul>
		<h2>商品管理</h2>
		<ul>
			<li><a href="#">用户列表</a></li>
			<li><a href="#">用户添加</a></li>
			<li><a href="#">用户删除</a></li>
			<li><a href="#">用户修改</a></li>
		</ul>
		<h2>评论管理</h2>
		<ul>
			<li><a href="#">用户列表</a></li>
			<li><a href="#">用户添加</a></li>
			<li><a href="#">用户删除</a></li>
			<li><a href="#">用户修改</a></li>
		</ul>
	</div>
	<script src="../jquery-3.3.1.js"></script>
	<script>
		$(function(){
			$('.nav ul:first').show();
			$('.nav h2').on('click', function(){
				$(this).next('ul').slideDown().siblings('ul').slideUp();
			})
		})
	</script>
</body>
</html>

小米轮播图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图效果</title>
	<style>
		.play {
			margin: 100px auto;
			width: 1226px;
			height: 460px;
			border: 1px solid #999;
			position: relative;
		}
		ul {
			list-style: none;
			margin:0;
			padding:0;
		}
		.play img {
			display: block;
			width: 1226px;
			height:460px;
		}
		.imglist li {
			position: absolute;
			left:0;
			top:0;
			opacity: 0;
			transition: opacity 1s;
		}
		.imglist li.current {
			
			opacity: 1;
		}
		.control-list {
			position: absolute;
			bottom:20px;
			right:20px;
		}
		.control-list span {
			font-size:0px;
			float:left;
			margin-right:5px;
			width:12px;
			height:12px;
			border:1px solid #999;
			border-radius: 7px;
			background: #999;
			cursor: pointer;
		}
		.control-list span.current {
			background: #fff;
		}
		.slide {
			position: absolute;
			top:50%;
			transform: translate(0, -50%);
			width:40px;
			height:80px;
			background:rgba(0,0,0,.6);
			color:#fff;
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			line-height: 80px;
			cursor: pointer;
			opacity: .5;
			transition: .3s;
		}
		.slide:hover {
			opacity: 1;
		}
		.slide-left{
			left:0;
		}
		.slide-right {
			right:0;
		}
	</style>
</head>
<body>
	<div id="play" class="play">
		
		<ul class="imglist">
			<li class="current">
				<a href="#">
					<img src="./images/play01.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./images/play02.jpg" alt="">
				</a>
			</li>
			
			<li>
				<a href="#">
					<img src="./images/play03.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./images/play04.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./images/play05.jpg" alt="">
				</a>
			</li>
		</ul>
		<div class="control-list">
			<span class="current">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
		</div>
		<div class="slide-list">
			<span class="slide slide-left"><</span>
			<span class="slide slide-right">></span>
		</div>
	</div>
	<script src="../jquery-3.3.1.js"></script>
	<script>
		//轮播图效果
		$(function(){
			var m = 0; 			//循环变量
			var delay = 3000; 	//轮播的时间间隔
			var length = 5; 	//轮播的数量
			//1.设置定时
			var runTime = setInterval(runPlay, delay);
			//鼠标悬浮 定时停止4
			$('#play').on('mouseenter', function(){
				clearInterval(runTime);
			}).on('mouseleave', function(){
				runTime = setInterval(runPlay, delay)
			});
			//给控制按钮 绑定 单击事件
			$('.control-list span').on('click', function(){
				//console.log($(this).index())
				// 刷新m
				m = $(this).index();
				controlImage(m);
			});
			//向右
			$('.slide-right').on('click', function(){
				m ++;
				if (m >= length) {
					m = 0;
				}
				controlImage(m)
			});
			//向左 上一个
			$('.slide-left').on('click', function(){
				m --;
				if (m < 0) {
					m = length-1
				}
				controlImage(m)
			})
			//定时函数2
			function runPlay() {
				//循环变量累加
				m ++;
				//判断
				if (m >= length) {
					m = 0;
				}
				//调用函数 控制图片
				controlImage(m)
			}
			//控制图片的变化3
			// n表示 要第几个显示
			function controlImage(n) {
				$('.imglist li').removeClass('current').eq(n).addClass('current');
				$('.control-list span').removeClass('current').eq(n).addClass('current');
			}
		//	插入:
		//	内联元素可以同设置块状去掉空格 image是内联元素
		//	font-size也能去掉空格
		//	让他们在一起的策略是  定位加  改变透明度
		})
	</script>
</body>
</html>

aaa

图灵python大海老师 wechat
python分享公众号
坚持原创技术分享，您的支持将鼓励我继续创作！