python自动华 （十六）
Python自动化 【第十六篇】：JavaScript作用域和Dom收尾
本节内容：
- javascript作用域
- DOM收尾
JavaScript作用域
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点，对于JavaScript的作用域主要记住几句话，走遍天下都不怕...
一、JavaScript中无块级作用域
在Java或C#中存在块级作用域，即：大括号也是一个作用域。
1 public static void main ()
2 {
3 if(1==1){
4 String name = "seven";
5 }
6 System.out.println(name);
7 }
8 // 报错
java
1 public static void Main()
2 {
3 if(1==1){
4 string name = "seven";
5 }
6 Console.WriteLine(name);
7 }
8 // 报错
C#
在JavaScript语言中无块级作用域
1 function Main(){
2 if(1==1){
3 var name = 'seven';
4 }
5 console.log(name);
6 }
7 // 输出： seven
补充：标题之所以添加双引号是因为JavaScript6中新引入了 let 关键字，用于指定变量属于块级作用域。
二、JavaScript采用函数作用域
在JavaScript中每个函数作为一个作用域，在外部无法访问内部作用域中的变量。
1 function Main(){
2 var innerValue = 'seven';
3 }
4
5 Main();
6
7 console.log(innerValue);
8
9 // 报错：Uncaught ReferenceError: innerValue is not defined
三、JavaScript的作用域链
由于JavaScript中的每个函数作为一个作用域，如果出现函数嵌套函数，则就会出现作用域链。
1 xo = 'alex';
2
3 function Func(){
4 var xo = "seven";
5 function inner(){
6 var xo = 'alvin';
7 console.log(xo);
8 }
9 inner();
10 }
11 Func();
如上述代码则出现三个作用域组成的作用域链，如果出现作用域链后，那么寻找变量时候就会出现顺序，对于上述实例：
当执行console.log(xo)时，其寻找顺序为根据作用域链从内到外的优先级寻找，如果内层没有就逐步向上找，直到没找到抛出异常。
四、JavaScript的作用域链执行前已创建
JavaScript的作用域在被执行之前已经创建，日后再去执行时只需要按照作用域链去寻找即可。
示例一：
1 xo = 'alex';
2
3 function Func(){
4 var xo = "seven";
5 function inner(){
6
7 console.log(xo);
8 }
9 return inner;
10 }
11
12 var ret = Func();
13 ret();
14 // 输出结果： seven
上述代码，在函数被调用之前作用域链已经存在：
- 全局作用域 -> Func函数作用域 -> inner函数作用域
当执行【ret();】时，由于其代指的是inner函数，此函数的作用域链在执行之前已经被定义为：全局作用域 -> Func函数作用域 -> inner函数作用域，所以，在执行【ret();】时，会根据已经存在的作用域链去寻找变量。
示例二：
1 xo = 'alex';
2
3 function Func(){
4 var xo = "eirc";
5 function inner(){
6
7 console.log(xo);
8 }
9 xo = 'seven';
10 return inner;
11 }
12
13 var ret = Func();
14 ret();
15 // 输出结果： seven
上述代码和示例一的目的相同，也是强调在函数被调用之前作用域链已经存在：
- 全局作用域 -> Func函数作用域 -> inner函数作用域
不同的时，在执行【var ret = Func();】时，Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”，所以之后再执行【ret();】时，就只能找到“seven”。
示例三：
1 xo = 'alex';<br>
2 function Bar(){
3 console.log(xo);
4 }
5
6 function Func(){
7 var xo = "seven";
8
9 return Bar;
10 }
11
12 var ret = Func();
13 ret();
14 // 输出结果： alex
上述代码，在函数被执行之前已经创建了两条作用域链：
- 全局作用域 -> Bar函数作用域
- 全局作用域 -> Func函数作用域
当执行【ret();】时，ret代指的Bar函数，而Bar函数的作用域链已经存在：全局作用域 -> Bar函数作用域，所以，执行时会根据已经存在的作用域链去寻找。
五、声明提前
在JavaScript中如果不创建变量，直接去使用，则报错：
console.log(xxoo);
// 报错：Uncaught ReferenceError: xxoo is not defined
JavaScript中如果创建值而不赋值，则该值为 undefined，如：
1 var xxoo;
2 console.log(xxoo);
3 // 输出：undefined
在函数内如果这么写：
1 function Foo(){
2 console.log(xo);
3 var xo = 'seven';
4 }
5
6 Foo();
7 // 输出：undefined
上述代码，不报错而是输出 undefined，其原因是：JavaScript的函数在被执行之前，会将其中的变量全部声明，而不赋值。所以，相当于上述实例中，函数在“预编译”时，已经执行了var xo；所以上述代码中输出的是undefined。
DOM
二、操作（接第十五篇）
5、样式操作
1 var obj = document.getElementById('i1')
2
3 obj.style.fontSize = "32px";
4 obj.style.backgroundColor = "red";
1 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
2
3 <script>
4 function Focus(ths){
5 ths.style.color = "black";
6 if(ths.value == '请输入关键字' || ths.value.trim() == ""){
7
8 ths.value = "";
9 }
10 }
11
12 function Blur(ths){
13 if(ths.value.trim() == ""){
14 ths.value = '请输入关键字';
15 ths.style.color = 'gray';
16 }else{
17 ths.style.color = "black";
18 }
19 }
20 </script>
demo
6、位置操作
1 总文档高度
2 document.documentElement.offsetHeight
3
4 当前文档占屏幕高度
5 document.documentElement.clientHeight
6
7 自身高度
8 tag.offsetHeight
9
10 距离上级定位高度
11 tag.offsetTop
12
13 父定位标签
14 tag.offsetParent
15
16 滚动高度
17 tag.scrollTop
18
19 /*
20 clientHeight -> 可见区域：height + padding
21 clientTop -> border高度
22 offsetHeight -> 可见区域：height + padding + border
23 offsetTop -> 上级定位标签的高度
24 scrollHeight -> 全文高：height + padding
25 scrollTop -> 滚动高度
26 特别的：
27 document.documentElement代指文档根节点
28 */
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body style="margin: 0;">
8 <div style="height: 900px;">
9
10 </div>
11 <div style="padding: 10px;">
12 <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;">
13 <p>asdf</p>
14 <p>asdf</p>
15 <p>asdf</p>
16 <p>asdf</p>
17 <p>asdf</p>
18 </div>
19 </div>
20
21 <script>
22 var i1 = document.getElementById('i1');
23
24 console.log(i1.clientHeight); // 可见区域：height + padding
25 console.log(i1.clientTop); // border高度
26 console.log('=====');
27 console.log(i1.offsetHeight); // 可见区域：height + padding + border
28 console.log(i1.offsetTop); // 上级定位标签的高度
29 console.log('=====');
30 console.log(i1.scrollHeight); //全文高：height + padding
31 console.log(i1.scrollTop); // 滚动高度
32 console.log('=====');
33
34 </script>
35 </body>
36 </html>
37
38 test
test
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <style>
8
9 body{
10 margin: 0px;
11 }
12 img {
13 border: 0;
14 }
15 ul{
16 padding: 0;
17 margin: 0;
18 list-style: none;
19 }
20 .clearfix:after {
21 content: ".";
22 display: block;
23 height: 0;
24 clear: both;
25 visibility: hidden;
26 }
27
28 .wrap{
29 width: 980px;
30 margin: 0 auto;
31 }
32
33 .pg-header{
34 background-color: #303a40;
35 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
36 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
37 box-shadow: 0 2px 5px rgba(0,0,0,.2);
38 }
39 .pg-header .logo{
40 float: left;
41 padding:5px 10px 5px 0px;
42 }
43 .pg-header .logo img{
44 vertical-align: middle;
45 width: 110px;
46 height: 40px;
47
48 }
49 .pg-header .nav{
50 line-height: 50px;
51 }
52 .pg-header .nav ul li{
53 float: left;
54 }
55 .pg-header .nav ul li a{
56 display: block;
57 color: #ccc;
58 padding: 0 20px;
59 text-decoration: none;
60 font-size: 14px;
61 }
62 .pg-header .nav ul li a:hover{
63 color: #fff;
64 background-color: #425a66;
65 }
66 .pg-body{
67
68 }
69 .pg-body .catalog{
70 position: absolute;
71 top:60px;
72 width: 200px;
73 background-color: #fafafa;
74 bottom: 0px;
75 }
76 .pg-body .catalog.fixed{
77 position: fixed;
78 top:10px;
79 }
80
81 .pg-body .catalog .catalog-item.active{
82 color: #fff;
83 background-color: #425a66;
84 }
85
86 .pg-body .content{
87 position: absolute;
88 top:60px;
89 width: 700px;
90 margin-left: 210px;
91 background-color: #fafafa;
92 overflow: auto;
93 }
94 .pg-body .content .section{
95 height: 500px;
96 }
97 </style>
98 <body onscroll="ScrollEvent();">
99 <div class="pg-header">
100 <div class="wrap clearfix">
101 <div class="logo">
102 <a href="#">
103 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
104 </a>
105 </div>
106 <div class="nav">
107 <ul>
108 <li>
109 <a href="#">首页</a>
110 </li>
111 <li>
112 <a href="#">功能一</a>
113 </li>
114 <li>
115 <a href="#">功能二</a>
116 </li>
117 </ul>
118 </div>
119
120 </div>
121 </div>
122 <div class="pg-body">
123 <div class="wrap">
124 <div class="catalog">
125 <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
126 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
127 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
128 </div>
129 <div class="content">
130 <div menu="function1" class="section">
131 <h1>第一章</h1>
132 </div>
133 <div menu="function2" class="section">
134 <h1>第二章</h1>
135 </div>
136 <div menu="function3" class="section">
137 <h1>第三章</h1>
138 </div>
139 </div>
140 </div>
141
142 </div>
143 <script>
144 function ScrollEvent(){
145 var bodyScrollTop = document.body.scrollTop;
146 if(bodyScrollTop>50){
147 document.getElementsByClassName('catalog')[0].classList.add('fixed');
148 }else{
149 document.getElementsByClassName('catalog')[0].classList.remove('fixed');
150 }
151
152 }
153 </script>
154 </body>
155 </html>
demo-滚动固定
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <style>
8
9 body{
10 margin: 0px;
11 }
12 img {
13 border: 0;
14 }
15 ul{
16 padding: 0;
17 margin: 0;
18 list-style: none;
19 }
20 h1{
21 padding: 0;
22 margin: 0;
23 }
24 .clearfix:after {
25 content: ".";
26 display: block;
27 height: 0;
28 clear: both;
29 visibility: hidden;
30 }
31
32 .wrap{
33 width: 980px;
34 margin: 0 auto;
35 }
36
37 .pg-header{
38 background-color: #303a40;
39 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
40 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
41 box-shadow: 0 2px 5px rgba(0,0,0,.2);
42 }
43 .pg-header .logo{
44 float: left;
45 padding:5px 10px 5px 0px;
46 }
47 .pg-header .logo img{
48 vertical-align: middle;
49 width: 110px;
50 height: 40px;
51
52 }
53 .pg-header .nav{
54 line-height: 50px;
55 }
56 .pg-header .nav ul li{
57 float: left;
58 }
59 .pg-header .nav ul li a{
60 display: block;
61 color: #ccc;
62 padding: 0 20px;
63 text-decoration: none;
64 font-size: 14px;
65 }
66 .pg-header .nav ul li a:hover{
67 color: #fff;
68 background-color: #425a66;
69 }
70 .pg-body{
71
72 }
73 .pg-body .catalog{
74 position: absolute;
75 top:60px;
76 width: 200px;
77 background-color: #fafafa;
78 bottom: 0px;
79 }
80 .pg-body .catalog.fixed{
81 position: fixed;
82 top:10px;
83 }
84
85 .pg-body .catalog .catalog-item.active{
86 color: #fff;
87 background-color: #425a66;
88 }
89
90 .pg-body .content{
91 position: absolute;
92 top:60px;
93 width: 700px;
94 margin-left: 210px;
95 background-color: #fafafa;
96 overflow: auto;
97 }
98 .pg-body .content .section{
99 height: 500px;
100 border: 1px solid red;
101 }
102 </style>
103 <body onscroll="ScrollEvent();">
104 <div class="pg-header">
105 <div class="wrap clearfix">
106 <div class="logo">
107 <a href="#">
108 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
109 </a>
110 </div>
111 <div class="nav">
112 <ul>
113 <li>
114 <a href="#">首页</a>
115 </li>
116 <li>
117 <a href="#">功能一</a>
118 </li>
119 <li>
120 <a href="#">功能二</a>
121 </li>
122 </ul>
123 </div>
124
125 </div>
126 </div>
127 <div class="pg-body">
128 <div class="wrap">
129 <div class="catalog" id="catalog">
130 <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
131 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
132 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
133 </div>
134 <div class="content" id="content">
135 <div menu="function1" class="section">
136 <h1>第一章</h1>
137 </div>
138 <div menu="function2" class="section">
139 <h1>第二章</h1>
140 </div>
141 <div menu="function3" class="section">
142 <h1>第三章</h1>
143 </div>
144 </div>
145 </div>
146
147 </div>
148 <script>
149 function ScrollEvent(){
150 var bodyScrollTop = document.body.scrollTop;
151 if(bodyScrollTop>50){
152 document.getElementsByClassName('catalog')[0].classList.add('fixed');
153 }else{
154 document.getElementsByClassName('catalog')[0].classList.remove('fixed');
155 }
156
157 var content = document.getElementById('content');
158 var sections = content.children;
159 for(var i=0;i<sections.length;i++){
160 var current_section = sections[i];
161
162 // 当前标签距离顶部绝对高度
163 var scOffTop = current_section.offsetTop + 60;
164
165 // 当前标签距离顶部，相对高度
166 var offTop = scOffTop - bodyScrollTop;
167
168 // 当前标签高度
169 var height = current_section.scrollHeight;
170
171 if(offTop<0 && -offTop < height){
172 // 当前标签添加active
173 // 其他移除 active
174 var menus = document.getElementById('catalog').children;
175 var current_menu = menus[i];
176 current_menu.classList.add('active');
177 for(var j=0;j<menus.length;j++){
178 if(menus[j] == current_menu){
179
180 }else{
181 menus[j].classList.remove('active');
182 }
183 }
184 break;
185 }
186
187 }
188
189
190 }
191 </script>
192 </body>
193 </html>
demo-滚动菜单
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <style>
8
9 body{
10 margin: 0px;
11 }
12 img {
13 border: 0;
14 }
15 ul{
16 padding: 0;
17 margin: 0;
18 list-style: none;
19 }
20 h1{
21 padding: 0;
22 margin: 0;
23 }
24 .clearfix:after {
25 content: ".";
26 display: block;
27 height: 0;
28 clear: both;
29 visibility: hidden;
30 }
31
32 .wrap{
33 width: 980px;
34 margin: 0 auto;
35 }
36
37 .pg-header{
38 background-color: #303a40;
39 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
40 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
41 box-shadow: 0 2px 5px rgba(0,0,0,.2);
42 }
43 .pg-header .logo{
44 float: left;
45 padding:5px 10px 5px 0px;
46 }
47 .pg-header .logo img{
48 vertical-align: middle;
49 width: 110px;
50 height: 40px;
51
52 }
53 .pg-header .nav{
54 line-height: 50px;
55 }
56 .pg-header .nav ul li{
57 float: left;
58 }
59 .pg-header .nav ul li a{
60 display: block;
61 color: #ccc;
62 padding: 0 20px;
63 text-decoration: none;
64 font-size: 14px;
65 }
66 .pg-header .nav ul li a:hover{
67 color: #fff;
68 background-color: #425a66;
69 }
70 .pg-body{
71
72 }
73 .pg-body .catalog{
74 position: absolute;
75 top:60px;
76 width: 200px;
77 background-color: #fafafa;
78 bottom: 0px;
79 }
80 .pg-body .catalog.fixed{
81 position: fixed;
82 top:10px;
83 }
84
85 .pg-body .catalog .catalog-item.active{
86 color: #fff;
87 background-color: #425a66;
88 }
89
90 .pg-body .content{
91 position: absolute;
92 top:60px;
93 width: 700px;
94 margin-left: 210px;
95 background-color: #fafafa;
96 overflow: auto;
97 }
98 .pg-body .content .section{
99 height: 500px;
100 border: 1px solid red;
101 }
102 </style>
103 <body onscroll="ScrollEvent();">
104 <div class="pg-header">
105 <div class="wrap clearfix">
106 <div class="logo">
107 <a href="#">
108 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
109 </a>
110 </div>
111 <div class="nav">
112 <ul>
113 <li>
114 <a href="#">首页</a>
115 </li>
116 <li>
117 <a href="#">功能一</a>
118 </li>
119 <li>
120 <a href="#">功能二</a>
121 </li>
122 </ul>
123 </div>
124
125 </div>
126 </div>
127 <div class="pg-body">
128 <div class="wrap">
129 <div class="catalog" id="catalog">
130 <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
131 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
132 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
133 </div>
134 <div class="content" id="content">
135 <div menu="function1" class="section">
136 <h1>第一章</h1>
137 </div>
138 <div menu="function2" class="section">
139 <h1>第二章</h1>
140 </div>
141 <div menu="function3" class="section" style="height: 200px;">
142 <h1>第三章</h1>
143 </div>
144 </div>
145 </div>
146
147 </div>
148 <script>
149 function ScrollEvent(){
150 var bodyScrollTop = document.body.scrollTop;
151 if(bodyScrollTop>50){
152 document.getElementsByClassName('catalog')[0].classList.add('fixed');
153 }else{
154 document.getElementsByClassName('catalog')[0].classList.remove('fixed');
155 }
156
157 var content = document.getElementById('content');
158 var sections = content.children;
159 for(var i=0;i<sections.length;i++){
160 var current_section = sections[i];
161
162 // 当前标签距离顶部绝对高度
163 var scOffTop = current_section.offsetTop + 60;
164
165 // 当前标签距离顶部，相对高度
166 var offTop = scOffTop - bodyScrollTop;
167
168 // 当前标签高度
169 var height = current_section.scrollHeight;
170
171 if(offTop<0 && -offTop < height){
172 // 当前标签添加active
173 // 其他移除 active
174
175 // 如果已经到底部，现实第三个菜单
176 // 文档高度 ＝ 滚动高度 + 视口高度
177
178 var a = document.getElementsByClassName('content')[0].offsetHeight + 60;
179 var b = bodyScrollTop + document.documentElement.clientHeight;
180 console.log(a+60,b);
181 if(a == b){
182 var menus = document.getElementById('catalog').children;
183 var current_menu = document.getElementById('catalog').lastElementChild;
184 current_menu.classList.add('active');
185 for(var j=0;j<menus.length;j++){
186 if(menus[j] == current_menu){
187
188 }else{
189 menus[j].classList.remove('active');
190 }
191 }
192 }else{
193 var menus = document.getElementById('catalog').children;
194 var current_menu = menus[i];
195 current_menu.classList.add('active');
196 for(var j=0;j<menus.length;j++){
197 if(menus[j] == current_menu){
198
199 }else{
200 menus[j].classList.remove('active');
201 }
202 }
203 }
204
205
206
207
208 break;
209 }
210
211 }
212
213
214 }
215 </script>
216 </body>
217 </html>
demo-滚动高度
7、提交表单
document.geElementById('form').submit()
8、其他操作
1 console.log 输出框
2 alert 弹出框
3 confirm 确认框
4
5 // URL和刷新
6 location.href 获取URL
7 location.href = "url" 重定向
8 location.reload() 重新加载
9
10 // 定时器
11 setInterval 多次定时器
12 clearInterval 清除多次定时器
13 setTimeout 单次定时器
14 clearTimeout 清除单次定时器
三、事件
对于事件需要注意的要点：
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签，event封装了当前事件的内容
python自动华 （十六）的更多相关文章
- python自动华 （六）
Python自动化 [第六篇]:Python基础-面向对象 目录: 面向过程VS面向对象 面向对象编程介绍 为什么要用面向对象进行开发 面向对象的特性:封装.继承.多态 面向过程 VS 面向对象 ...
- 进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- python 教程 第十六章、 正则表达式
第十六章. 正则表达式 1) 匹配多个表达式 记号 re1|re2 说明 匹配正则表达式re1或re2 举例 foo|bar 匹配 foo, bar 记号 {N} 说明 匹配前面出 ...
- python自动华 （十八）
Python自动化 [第十八篇]:JavaScript 正则表达式及Django初识 本节内容 JavaScript 正则表达式 Django初识 正则表达式 1.定义正则表达式 /.../ 用于定 ...
- python自动华 （十五）
Python自动化 [第十五篇]:CSS.JavaScript 和 Dom介绍 本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 rel ...
- python自动华 （十二）
Python自动化 [第十二篇]:Python进阶-MySQL和ORM 本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增 ...
- python自动华 （十）
Python自动化 [第十篇]:Python进阶-多进程/协程/事件驱动与Select\Poll\Epoll异步IO 本节内容: 多进程 协程 事件驱动与Select\Poll\Epoll异步IO ...
- python自动华 （十四）
Python自动化 [第十四篇]:HTML介绍 本节内容: Html 概述 HTML文档 常用标签 2. CSS 概述 CSS选择器 CSS常用属性 1.HTML 1.1概述 HTML是英文Hyper ...
- Python 学习 第十六篇：networkx
networkx是Python的一个包,用于构建和操作复杂的图结构,提供分析图的算法.图是由顶点.边和可选的属性构成的数据结构,顶点表示数据,边是由两个顶点唯一确定的,表示两个顶点之间的关系.顶点和边 ...
随机推荐
- Win7 JavaEE 安装
新建四个目录 D:\ApacheServer\eclipse 存放eclipse D:\ApacheServer\jdk jdk安装目录 D:\ApacheServer\apache-tomcat 存 ...
- C++:链表(有头链表)
介绍 把链表分为无头链表和有头链表. 无头链表:所有的节点都包含了有效数据,上一篇文章中演示代码使用的就是无头链表. 有头链表:用一个固定的头节点来指代整个链表,所有的对象都挂在这个头节点下面,而头节 ...
- 笔记-4：mysql数据查询
1.创建查询表 1.1 创建班级表 含义 字段名 数据类型 宽度 班级编号 classNo 字符型 6 班级名称 className 字符型 20 所属院系 department 字符型 30 年级 ...
- js 颜色随机切换
生成随机颜色 方法1:RGB模式 function randomColor1() { var r=Math.floor(Math.random()*256); var g=Math.floor(Mat ...
- WUSTOJ 1208: 计算整数四则运算表达式的结果（Java）
1208: 计算整数四则运算表达式的结果 参考资料 数据结构(C语言版)严蔚敏 吴伟民 编著----表达式求值 题目 简单四则运算.更多内容点击标题. 保证表达式合法. 运算符只包含:加(+),减 ...
- 涛哥：Qt安卓-5.12环境搭建
简介 Qt for android 环境搭建,以Windows平台 Qt5.12为基准. 因为有不少人问相关问题,所以写篇文章汇总一下. 安装Qt 需要先安装Android版的Qt. 一般在Qt的安装 ...
- Golang语言编程规范
Golang语言编程规范 一.说明 编程规范好,可避免语言陷阱,可有利团队协作,有利项目维护. 正常的Go编程规范有两种:编译器强制的(必须的),gofmt格式化非强制的(非必须). Go宣告支持驼峰 ...
- （二十九）JSP之国际化
导入 <%@ taglib url="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 创建三个语 ...
- form表单提交后结果乱码的解决方法
1.产生乱码原因:表单提交使用的method="get",get方式数据都是通过地址栏传输,数据会以iso-8859-1方式传输,因此产生乱码 2.概念:URI: Uniform ...
- vue兄弟组件的传值eventbus
注:当在a.vue组件上触发点击事件时,就会触发bus上监听的事件,而bus事件监听在b.vue里面,这个时候就会触发b.vue 上的事件监听,而通过回调函数,就可以拿到a.vue组件传过来的数据,从 ...