forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2018-05-18-C组-js8.html
301 lines (257 loc) · 14.9 KB
/
2018-05-18-C组-js8.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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<style>
.float {
float: left;
}
</style>
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<img src="./葡萄藤PPT_files/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal default center" role="application" data-transition-speed="slow" data-background-transition="fade">
<div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.756);">
<section class="past" style="top: 158px; display: none;" hidden="" aria-hidden="true">
<h3>【JS-task8】angular中如何使用时间插件？</h3>
<p>分享人：冯亚超</p>
</section>
<section class="past" style="top: 3px; display: block;" hidden="" aria-hidden="true">
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>1.背景介绍</h3>
</section>
<section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>日历在网页中的应用有很多，比如说后台的搜索功能，备忘录功能等等。要实现日历功能，有很多插件可以实现， 利用angular实现相关的日历功能的插件也就只有几个，比如说ui-jquery,angular-datepicker,ui-bootstrap等等， 这些都可以实现部分功能的日历插件；但是说到好用的话，我个人觉得还是angular-datepicker要好用一些， 因为这个插件的demo简单易懂，很多种情况都考虑到了，比如说时区、设定日历的最大最小值，日期格式， 起始时间和终止时间，都有相对应的demo，这样就更加直观，清晰易懂。</p>
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>2.知识剖析</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>在这个日历插件中，有以下相关属性:</h4>
<p>1.时区：一般都是用date-picker timezone属性来表示；timezone有以下值'Europe/London'，'Asia/Hong_Kong'，'America/Vancouver'</p>
<p>2.日期格式date-time format属性,格式可以自行设定，插件属性值有 "MMMM YYYY", "DD MMM YYYY", "ddd MMM DD YYYY", "D MMM YYYY HH:mm", "lll"</p>
<p>3.date-time min-date,max-date属性：用于表示最大日期和最小日期；</p>
<p>4.view:日期/时间的默认选择级别；属性值有year、month、date、hours、minutes</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>3.常见问题</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>如何实现设置开始日期和结束日期</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>4.解决方案</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>首先新建2个div标签，然后分别在两个标签内的ng-model绑定dates.minDate和dates.maxDate、 分别在max-date和min-date属性设置maxDate和minDate(目的是为了保证日历在开始日期在结束日期前面),对两个标签都添加 date-change属性，然后在通过date-change属性中的方法来对ng-model为dates.minDate和dates.maxDate进行更新</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>5.编码实战</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>6.扩展思考</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>如何修改日历的样式，比如说把英文（默认）修改为中文日历？</p>
<p>这时候就需要使用webstorm的全局查找功能了（不要使用cdn加载js文件，否则会出现找不到的情况，也就无法修改样式）， 通过全局查找找到相关单词之后，然后修改成中文就行了</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>7.参考文献</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>https://github.com/g00fy-/angular-datepicker</p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>8 更多讨论</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p></p>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h4>鸣谢</h4>
<p>感谢大家观看</p>
</section>
</div>
<div class="backgrounds"><div class="slide-background past" data-loaded="true" style="display: none;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background stack present" data-loaded="true" style="display: block;"><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background present" data-loaded="true" style="display: block;"></div></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="progress" style="display: block;"><span style="width: 260.19px;"></span></div><aside class="controls" style="display: block;"><button class="navigate-left enabled" aria-label="previous slide"></button><button class="navigate-right enabled" aria-label="next slide"></button><button class="navigate-up enabled" aria-label="above slide"></button><button class="navigate-down" aria-label="below slide"></button></aside><div class="slide-number" style="display: none;"></div><div class="speaker-notes" data-prevent-swipe=""></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">
语法：
return[()[expression][]];
可选项 expression 参数是要从函数返回的值。如果省略，则该函数不返回值。
用 return 语句来终止一个函数的执行，并返回 expression 的值。如果 expression 被省略，
或在函数内没有 return 语句被执行，则把值 undefined 赋给调用当前函数的表达式。
</div></div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
// history: true,
transition: 'default',
transitionSpeed: 'slow',
dependencies: [
{src: '../plugin/markdown/marked.js'},
{src: '../plugin/markdown/markdown.js'},
{src: '../plugin/notes/notes.js', async: true},
{
src: '../plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
// 原始类型对象直接赋值不会相互影响
// var a = 1;
//
// var b = a;
// b = 10;
// console.log(a); // 1
////
// var a = 'hello';
// var b = a;
// b = 'world';
// console.log(a); // hello
//
// var a = true;
// var b = a;
// b = false;
// console.log(a);
//数组浅复制
// var a = ['隔壁老王','冠希哥', '宋经理' //定义一个名为a的属猪，里面有3个值，
// ];
// var b = a; //定义一个变量b，把a赋值给他，这样比、b和a一样了
// b[2] = '冲冲老师'; //然后把b的第三个值等于冲冲老师
// console.log(a)//那么现在打印a 是什么结果呢
//
// var arr = ["One","Two","Three"]; //数组的深复制，slice方法
// var arrtoo = arr.slice(1);
// arrtoo[2] = "set Map";
// console.log(arr);//One,Two,Three
// console.log(arrtoo);//One,set Map,Three
//
// var arr1 = ["One","Two","Three"]; //数组的深复制，concat 方法
// var arrtooo = arr1.concat(111111);
// arrtooo[1] = "set Map To";
// console.log(arr1);//One,Two,Three
// console.log(arrtooo);//One,set Map To,Three
//
// var b=[1,2,3,4,5]; //concat的链接
// var c=[6,7,8,9];
// var d =[4,4,22]
// console.log(b.concat(c,d))
var a = {name: 'yy', age: 26}; //对象的浅拷贝哦
var b = new Object();
b.name = a.name;
b.age = a.age;
b.name = 'xx';
console.log(a);//Object { name="yy", age=26}
console.log(b);//Object { name="xx", age=26}
var d = { //对象的浅拷贝哦 第一种
name: 'd',
oc: {
age: 32
},
oad: {
adds: {
bb: 12
}
}
};
var deepCopy = function (source) {
var result = {};
for (var key in source) {
result[key] = typeof source[key] === 'object' ? deepCopy(source[key]) : source[key]
}
return result
};
var c = deepCopy(d);
c.name = 'c';
c.oc = {
age: 49
};
console.log(c);
console.log(d);
// var person = { //第二种深拷贝
// name: 'aa',
// friends: ['da', 'dsa', 'gf']
// };
//
// var aPerson = Object.create(person, {
//// name: {
//// value: "gee"
//// }
// });
//
// console.log(person.name);
// console.log(aPerson.friends)
var Chinese = {
nation: '中国'
}
var Doctor = {
career: '医生'
}
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
console.log(Doctor); // 中国
Chinese.birthPlaces = ['北京', '上海', '香港'];
var Doctor = extendCopy(Chinese);
Doctor.birthPlaces.push('厦门');
</script>
</body>
</html>