diff --git a/17web-practice/css/style.css b/17web-practice/css/style.css new file mode 100644 index 0000000..d104f3c --- /dev/null +++ b/17web-practice/css/style.css @@ -0,0 +1,747 @@ +/* reset */ +html, body, h1, h2, h3, h4, h5, h6, div, ul, li, p, form, label, input, button, img { + margin: 0; + padding: 0; + border: 0; +} + +table, th, td, thead, tbody { + margin: 0; + padding: 0; +} + +li { + list-style: none; +} + +h1, h2, h3, h4, h5, h6 { + font-size: 100%; + font-weight: normal; +} + +a { + text-decoration: none; + cursor: pointer; + color: #000; +} + +button { + -ms-box-sizing: content-box; + box-sizing: content-box; + cursor: pointer; +} + +body, input, button { + font: 12px/1.14 'Microsoft YaHei'; + outline: 0; + color: #000; +} + +.clearfix:before,.clearfix:after{ + content:'·'; + height: 0; + display: block; + clear: both; + overflow: hidden; + visibility: hidden; +} + +.clearfix{ + zoom:1; +} + +/*媒体查询部分*/ +@media screen and (min-width: 1205px) { + .extra-head,.slide,.lesson-wrap, .img-skim,.course, .footer{ + width:100%; + } + .extra-head .extra, .navbar,.lesson-list,.course-wrap{ + width: 1205px; + } + + .course-wrap .allcourse{ + width: 980px; + } +} + +@media screen and (max-width:1204px){ + .extra-head,.slide,.header,.lesson-wrap, .img-skim, .course,.footer{ + width:1204px; + } + + .extra-head .extra, .navbar,.lesson-list,.course-wrap{ + width: 960px; + } + .course-wrap .allcourse{ + width: 735px; + } +} + +/*顶部可去除栏*/ +.extra-head{ + height: 35px; + margin: 0 auto; + background:#F3F3F3; +} + +.extra-head .extra{ + position: relative; + height: 100%; + margin: 0 auto; +} +.extra-head .extra p{ + line-height: 35px; +} + +.more{ + color:#39a030; +} + +.extra-head .close{ + position: absolute; + right: 0; +} + +/*头部*/ +.navbar{ + height: 80px; + margin: 0 auto; +} + +.navL{ + float: left; +} + +.navL .logo,.footer-wrap .logo{ + display: inline-block; + font-size: 22px; + line-height:22px; + margin: 29px 0; + +} + +.navL .logo-n,.footer-wrap .logo-n{ + display: inline-block; + font-weight: bolder; + padding-right:10px; + margin-right: 10px; + border-right: 1px solid #39a030; + color: #39a030; +} + +.navL .login,.navL .attention, .navL .fans{ + display: inline-block; +} +.navL .attention{ + padding: 0 5px; + height: 22px; + margin: 0 10px 0 30px; + border-radius: 2px; + color:#fff; + background: #39a030; +} + +.navL .follow:hover{ + background: #42BA73; +} + +.navL .userFoll{ + display: none; + color: #000; + background: #ecebeb; + border: 1px solid #ccc; +} + +.navL .userFoll:hover{ + background: #fff; +} + +.navL .userFoll .unfollow{ + color: #666; +} + +.navL .userFoll:hover .unfollow{ + color: #42BA73; + text-decoration: underline; +} + +.navL .userFoll::before{ + content: '\2713'; +} + +.navR{ + float: right; +} + +.navR li{ + display: inline-block; + font-size: 14px; + margin-top:30px; + width: auto; + height: 20px; + margin-left:30px; +} + +.navR li a:hover{ + color:#39a030; +} +.navR .search{ + width: 20px; + background:url('../imgs/search.png') no-repeat; +} + +.navR .search:hover{ + background:url('../imgs/search-hover.png') no-repeat center bottom; +} + +/*登录弹窗*/ +.login-mask{ + display: none; + position: fixed; + top:0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0,0,0,0.5); + z-index: 999; +} + +.login-mask .login-pop{ + position: absolute; + top:50%; + left:50%; + width: 400px; + height: 300px; + font-size: 22px; + color: #666; + -webkit-transform: translate(-50%,-50%); + -moz-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + -o-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + background: #fff; + border-radius: 6px; +} + +.login-pop .login-title{ + height: 20px; + padding: 20px; + border-bottom: 1px solid #ccc; +} + +.login-pop .login-title .login-close{ + display: inline-block; + position: absolute; + top:0; + right: 5px; + font-size: 30px; + cursor: default; +} + +.login-pop label{ + display: inline-block; + width: 80px; + font-size: 18px; + margin-left: 40px; +} + +.login-pop input{ + width:200px; + height: 30px; + margin-top:30px; + padding-left: 10px; + border:1px solid #ccc; +} + +.login-pop .login-btn,.login-pop .login-cal{ + width: 100px; + height: 35px; + font-size: 18px; + color: #666; + margin: 30px 0 40px 60px; +} + +.login-pop .login-btn:hover,.login-pop .login-cal:hover{ + background: #42BA73; + color: #fff; +} + +/*轮播图*/ +.slide{ + height: 460px; + position: relative; + background: #eee; +} + +.slide .pic-list{ + height: 460px; +} + +.slide .pic-list li{ + display: none; + position: relative; + opacity: 0; + filter: alpha(opacity = 0); + height: 460px; + width: 100%; +} + +.slide .pic-list .show-on{ + display: inline; + opacity: 1; + filter: alpha(opacity = 100); +} + +.slide img{ + width: 100%; + height: 460px; +} + +.slide .icon-list{ + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); +} +.slide .icon-list li{ + display: inline-block; + width: 12px; + height: 12px; + margin: 5px; + background: #666; + border-radius: 50%; +} + +.slide .icon-list li.active{ + background: #fff; +} + + +/*三大课程网站*/ +.lesson-list{ + display: flex; + /*height: 240px;*/ + margin: 0 auto; +} + +.lesson{ + flex:1; + position: relative; + text-align: center; + padding: 40px 20px; +} + +.lesson img, .lesson .details{ + float: left; + +} + +.lesson .details{ + width: 60%; + margin-left: 20px; + text-align: left; +} + +.lesson .details h3{ + font: 20px 'Microsoft YaHei'; +} + +.lesson .details p{ + /*height: 90px;*/ + margin: 10px 0 20px 0; + line-height: 1.5; +} + +.lesson .details .more{ + position: absolute; + bottom: 35px; + left: 120px; +} + +.lesson .details .more:hover{ + text-decoration: underline; +} + +/*照片展示*/ +.img-skim img{ + float: left; + width: 19.8%; + height: auto; + margin-right: 0.2%; +} +.img-skim img:last-child{ + margin: 0; +} + +/*详细课程*/ +.course{ + background: #F8F8F8; +} +.course-wrap{ + margin: 0 auto; + padding: 40px 0; +} + +.course-wrap .ls{ + float: left; +} + +.course-wrap .allcourse{ + +} + +.course-wrap .hot{ + width: 225px; + +} + +.course-wrap .category .btn.active{ + color: #fff; + background: #39a030; +} + +.course-wrap .category{ + display: block; + font-size: 0; + margin-bottom: 30px; +} +.course-wrap .category .btn{ + width: 200px; + height: 50px; + background: #fff; + border: none; + outline: none; + font-size: 20px; + color: #666; + box-shadow: 0 1px 1px #ccc; +} +.course-wrap .category .btn:hover{ + color: #fff; + background: #39a030; +} + +/*全部课程*/ +.course-wrap .cus li{ + float: left; + width: 225px; + height: 236px; + background: #fff; + font-size: 12px; + line-height: 2.0; + margin:0 20px 20px 0; + box-shadow: 0 1px 2px #ecebeb; +} + +.course-wrap .cus li:hover{ + box-shadow: 0 0 5px 3px #ccc; +} +.course-wrap li:hover h4{ + color:#39a030; +} + +.course-wrap li img{ + width: 225px; + height: 125px; +} + +.course-wrap li .cus-info{ + padding:5px; +} + +.course-wrap li h4{ + overflow: hidden; + text-overflow:ellipsis; + white-space: nowrap; +} + +.course-wrap li span{ + color:#666; +} + +.course-wrap li .user{ + max-width: 40px; + height: 16px; + color:#666; + padding-left:16px; + line-height: 1.2; + margin: 4px 0; + background: url('../imgs/user.png') no-repeat left bottom; + border:1px solid #ccc; + border-radius: 4px; +} + +.course-wrap li .price{ + color: #ff3f00; + font-weight: bolder; +} + +.course-wrap li.cus-li{ + position: relative; +} + +.course-wrap li .cus-detail{ + display: none; + position: absolute; +/* top: 0; + left:245px;*/ + top: 236px; + left: 0; + width: 470px; + background: #fff; + box-shadow: 0 0 1px 1px #ccc; + z-index: 999; +} + +.course-wrap li .cus-detail > p{ + width:100%; + height: auto; + padding: 20px; + font-size: 14px; + box-sizing: border-box; + background: #eee; +} + +.course-wrap .cus-detail img{ + float: left; + margin: 20px; +} + +.course-wrap .cus-detail .person{ + background: url('../imgs/user.png') no-repeat left center; + padding-left: 20px; +} + +.course-wrap .cus-detail .detail-info{ + float: left; + margin-top:20px; + width: 185px; + color: #666; +} + +.course-wrap .detail-info h3{ + font-size:20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + + + + +/*分页*/ +.course-wrap .page{ + margin:20px 20px 0 0; +} +.course-wrap .page .btn{ + float: right; + width: 30px; + height: 20px; + font-weight: bolder; + background: #9fd7b2; + color:#fff; +} + +.course-wrap .page .btn:hover{ + background: #42BA73; +} + +.course-wrap .page ul{ + float: right; +} +.course-wrap .page li{ + display: inline-block; + width: 20px; + height: 20px; + margin: 0 5px; + text-align: center; + line-height: 20px; + cursor: default; +} + +.course-wrap .page li.active{ + color: #39a030; +} + +.course-wrap .page li:hover{ + color: #fff; + background: #9fd7b2; +} + +.course-wrap .page .prev{ + margin-right: 10px; +} +.course-wrap .page .next{ + margin-left: 10px; +} + + +/*侧边栏*/ +.course-wrap .hot .hot-title{ + width: 205px; + height: 55px; + background: #fff; + margin-bottom: 2px; + font-size: 18px; + color: #666; + line-height: 50px; + padding-left: 20px; +} + +.course-wrap .hot .hot-indu{ + font-size: 16px; + color: #666; + background: #fff; + margin-bottom: 20px; + padding: 20px; +} + +.course-wrap .hot-indu img{ + width: 185px; + margin-top: 10px; +} + +.course-wrap .video-mask{ + display: none; + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + background-color: rgba(0,0,0,0.5); + z-index: 999; +} + +.course-wrap .video-pop{ + position: absolute; + top:50%; + left:50%; + width: 800px; + height: 500px; + font-size: 26px; + color: #666; + -webkit-transform: translate(-50%,-50%); + -moz-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + -o-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + background: #fff; + /*border-radius: 6px;*/ +} + +.course-wrap .video-pop .video-close{ + display: inline-block; + position: absolute; + right: 10px; + top:5px; + cursor: default; +} + +.course-wrap .video-pop video{ + width: 760px; + margin: 40px 20px 0; +} + +.course-wrap .hot .hot-ls{ + width: 205px; + padding: 10px; + background: #fff; +} + +.course-wrap .hot-ls li{ + height: 50px; + padding: 5px; + margin: 5px 0; + font-size: 14px; +} + +.course-wrap .hot-ls img{ + float: left; + width: 50px; + height: 50px; +} + +.course-wrap .hot-ls .title{ + float: left; + width: 135px; + line-height: 2; + padding: 0 0 10px 10px; +} + +.course-wrap .hot-ls h3{ + overflow: hidden; + text-overflow:ellipsis; + white-space: nowrap; +} + +.course-wrap .hot-ls .person{ + width: 30px; + font-size: 12px; + color: #666; + padding-left:15px; + background: url('../imgs/user.png') no-repeat left center; +} + + + + + + +/*底部*/ +.footer{ + height: 260px; + background: #2c3339; +} + +.footer-wrap{ + width: 960px; + margin: 0 auto; +} + +.footer-wrap .ft{ + float:left; + margin-top: 60px; + color:#a2a4a5; +} + +.footer-wrap .ft span{ + line-height: 25px; +} + +.footer-wrap .ft a{ + color:#a2a4a5; + line-height: 25px; +} + +.footer-wrap .ft a:hover{ + text-decoration: underline; +} + +.footer-wrap .info{ + width: 560px; +} + +.footer-wrap .info .logo{ + color: #39a030; + margin: 10px 0 20px 0; +} + +.footer-wrap .info p{ + line-height: 25px; +} + +.footer-wrap .link{ + width: 150px; +} + +.footer-wrap .contact{ + width: 100px; +} + +.footer-wrap .contact .blog{ + padding-right: 25px; + background: url('../imgs/weibo.png') no-repeat right center; +} + +.footer-wrap .more{ + width: 150px; +} \ No newline at end of file diff --git "a/17web-practice/doc/\344\270\273\351\241\265(\345\256\275\345\261\217).psd" "b/17web-practice/doc/\344\270\273\351\241\265(\345\256\275\345\261\217).psd" new file mode 100644 index 0000000..96d4749 Binary files /dev/null and "b/17web-practice/doc/\344\270\273\351\241\265(\345\256\275\345\261\217).psd" differ diff --git "a/17web-practice/doc/\344\270\273\351\241\265(\345\256\275\345\261\217)\350\247\206\350\247\211\350\257\264\346\230\216.jpg" "b/17web-practice/doc/\344\270\273\351\241\265(\345\256\275\345\261\217)\350\247\206\350\247\211\350\257\264\346\230\216.jpg" new file mode 100644 index 0000000..e9c41e4 Binary files /dev/null and "b/17web-practice/doc/\344\270\273\351\241\265(\345\256\275\345\261\217)\350\247\206\350\247\211\350\257\264\346\230\216.jpg" differ diff --git "a/17web-practice/doc/\344\270\273\351\241\265(\347\252\204\345\261\217).jpg" "b/17web-practice/doc/\344\270\273\351\241\265(\347\252\204\345\261\217).jpg" new file mode 100644 index 0000000..949f261 Binary files /dev/null and "b/17web-practice/doc/\344\270\273\351\241\265(\347\252\204\345\261\217).jpg" differ diff --git "a/17web-practice/doc/\344\272\244\344\272\222\350\257\264\346\230\216.jpg" "b/17web-practice/doc/\344\272\244\344\272\222\350\257\264\346\230\216.jpg" new file mode 100644 index 0000000..8fd9a73 Binary files /dev/null and "b/17web-practice/doc/\344\272\244\344\272\222\350\257\264\346\230\216.jpg" differ diff --git "a/17web-practice/doc/\345\244\247\344\275\234\344\270\232\350\257\264\346\230\216.docx" "b/17web-practice/doc/\345\244\247\344\275\234\344\270\232\350\257\264\346\230\216.docx" new file mode 100644 index 0000000..097f60d Binary files /dev/null and "b/17web-practice/doc/\345\244\247\344\275\234\344\270\232\350\257\264\346\230\216.docx" differ diff --git "a/17web-practice/doc/\345\244\247\344\275\234\344\270\232\350\257\264\346\230\216.pdf" "b/17web-practice/doc/\345\244\247\344\275\234\344\270\232\350\257\264\346\230\216.pdf" new file mode 100644 index 0000000..8897224 Binary files /dev/null and "b/17web-practice/doc/\345\244\247\344\275\234\344\270\232\350\257\264\346\230\216.pdf" differ diff --git a/17web-practice/imgs/banner1.jpg b/17web-practice/imgs/banner1.jpg new file mode 100644 index 0000000..5bac80c Binary files /dev/null and b/17web-practice/imgs/banner1.jpg differ diff --git a/17web-practice/imgs/banner2.jpg b/17web-practice/imgs/banner2.jpg new file mode 100644 index 0000000..cd6d9b0 Binary files /dev/null and b/17web-practice/imgs/banner2.jpg differ diff --git a/17web-practice/imgs/banner3.jpg b/17web-practice/imgs/banner3.jpg new file mode 100644 index 0000000..0a646e9 Binary files /dev/null and b/17web-practice/imgs/banner3.jpg differ diff --git a/17web-practice/imgs/icourse.png b/17web-practice/imgs/icourse.png new file mode 100644 index 0000000..8e4936d Binary files /dev/null and b/17web-practice/imgs/icourse.png differ diff --git a/17web-practice/imgs/open.png b/17web-practice/imgs/open.png new file mode 100644 index 0000000..4416693 Binary files /dev/null and b/17web-practice/imgs/open.png differ diff --git a/17web-practice/imgs/picture1.jpg b/17web-practice/imgs/picture1.jpg new file mode 100644 index 0000000..69bc7c6 Binary files /dev/null and b/17web-practice/imgs/picture1.jpg differ diff --git a/17web-practice/imgs/picture2.jpg b/17web-practice/imgs/picture2.jpg new file mode 100644 index 0000000..21c20aa Binary files /dev/null and b/17web-practice/imgs/picture2.jpg differ diff --git a/17web-practice/imgs/picture3.jpg b/17web-practice/imgs/picture3.jpg new file mode 100644 index 0000000..9d888fd Binary files /dev/null and b/17web-practice/imgs/picture3.jpg differ diff --git a/17web-practice/imgs/picture4.jpg b/17web-practice/imgs/picture4.jpg new file mode 100644 index 0000000..b81760c Binary files /dev/null and b/17web-practice/imgs/picture4.jpg differ diff --git a/17web-practice/imgs/picture5.jpg b/17web-practice/imgs/picture5.jpg new file mode 100644 index 0000000..420e4b0 Binary files /dev/null and b/17web-practice/imgs/picture5.jpg differ diff --git a/17web-practice/imgs/search-hover.png b/17web-practice/imgs/search-hover.png new file mode 100644 index 0000000..fc9623e Binary files /dev/null and b/17web-practice/imgs/search-hover.png differ diff --git a/17web-practice/imgs/search.png b/17web-practice/imgs/search.png new file mode 100644 index 0000000..3525508 Binary files /dev/null and b/17web-practice/imgs/search.png differ diff --git a/17web-practice/imgs/study.png b/17web-practice/imgs/study.png new file mode 100644 index 0000000..df61cee Binary files /dev/null and b/17web-practice/imgs/study.png differ diff --git a/17web-practice/imgs/user.png b/17web-practice/imgs/user.png new file mode 100644 index 0000000..195d04b Binary files /dev/null and b/17web-practice/imgs/user.png differ diff --git a/17web-practice/imgs/video.jpg b/17web-practice/imgs/video.jpg new file mode 100644 index 0000000..11f9417 Binary files /dev/null and b/17web-practice/imgs/video.jpg differ diff --git a/17web-practice/imgs/weibo.png b/17web-practice/imgs/weibo.png new file mode 100644 index 0000000..ff22a50 Binary files /dev/null and b/17web-practice/imgs/weibo.png differ diff --git a/17web-practice/index.html b/17web-practice/index.html new file mode 100644 index 0000000..d496a4c --- /dev/null +++ b/17web-practice/index.html @@ -0,0 +1,192 @@ + + + + + + + + 网易前端微专业 + + + + + +
+ +
+ +
+ +
+
+

网易云课堂微专业，帮助你掌握专业技能，令你求职或加薪多一份独特优势！ +   立即查看> + × 不再提醒 +

+
+
+ +
+
+
+ + +
+
+ +
+
+
+ +
+ + +
+ +
+
+
+
+ 网易公开课图标 +
+

网易公开课

+

推出国内外名校公开课，涉及广泛的学科，名校老师认真讲解深度创新，网易视频公开课频道搭建起强有力的网络视频教学平台。

+ 了解更多 > +
+
+
+ 云课堂图标 +
+

云课堂

+

网易旗下大型在线学习平台，该平台面向学习者提供海量免费、优质课程创新的个性化学习体验，自由开发的交流互动环境。

+ 了解更多 > +
+
+
+ 中国大学MOOC图标 +
+

中国大学MOOC

+

是爱课程网携手云课堂打造的在线学习平台，每一个有提升职业愿望的人都可以在这里学习中国最好的大学课程，学完还能获得认证证书。

+ 了解更多 > +
+
+
+
+ +
+ + + + + +
+ +
+
+
+
+ + +
+
+
    +
    +
    + +
      + +
      +
      +
      +
      机构介绍
      +
      + 观看下面的视频来了解吧 + 点击播放 +
      +
      +
      + × + +
      +
      +
      最热排行
      +
      +
        +
        +
        +
        +
        +
        + +
        +
        +
        + +

        ©2014 icourse163.org 浙ICP备08114786号-1

        +

        icourses.cn 京ICP备12020869号-2 京公网备110102000459-2

        +
        +
        +

        + 友情链接：
        + 网易公开课
        + 网易云课堂
        + 中国大学MOOC +

        +
        +
        +

        + 我们：
        + 关于
        + 联系
        + 关注 +

        +
        +
        +

        + 更多：
        + 常见问题
        + 常见反馈
        +

        +
        +
        +
        +
        + + + + + \ No newline at end of file diff --git a/17web-practice/js/md5.min.js b/17web-practice/js/md5.min.js new file mode 100644 index 0000000..20c9fa1 --- /dev/null +++ b/17web-practice/js/md5.min.js @@ -0,0 +1,4 @@ +/** + * Created by uidq0157 on 2016/10/24. + */ +!function(a){"use strict";function b(a,b){var c=(65535&a)+(65535&b),d=(a>>16)+(b>>16)+(c>>16);return d<<16|65535&c}function c(a,b){return a<>>32-b}function d(a,d,e,f,g,h){return b(c(b(b(d,a),b(f,h)),g),e)}function e(a,b,c,e,f,g,h){return d(b&c|~b&e,a,b,f,g,h)}function f(a,b,c,e,f,g,h){return d(b&e|c&~e,a,b,f,g,h)}function g(a,b,c,e,f,g,h){return d(b^c^e,a,b,f,g,h)}function h(a,b,c,e,f,g,h){return d(c^(b|~e),a,b,f,g,h)}function i(a,c){a[c>>5]|=128<>>9<<4)+14]=c;var d,i,j,k,l,m=1732584193,n=-271733879,o=-1732584194,p=271733878;for(d=0;d>5]>>>b%32&255);return c}function k(a){var b,c=[];for(c[(a.length>>2)-1]=void 0,b=0;b>5]|=(255&a.charCodeAt(b/8))<16&&(e=i(e,8*a.length)),c=0;16>c;c+=1)f[c]=909522486^e[c],g[c]=1549556828^e[c];return d=i(f.concat(k(b)),512+8*b.length),j(i(g.concat(d),640))}function n(a){var b,c,d="0123456789abcdef",e="";for(c=0;c>>4&15)+d.charAt(15&b);return e}function o(a){return unescape(encodeURIComponent(a))}function p(a){return l(o(a))}function q(a){return n(p(a))}function r(a,b){return m(o(a),o(b))}function s(a,b){return n(r(a,b))}function t(a,b,c){return b?c?r(b,a):s(b,a):c?p(a):q(a)}"function"==typeof define&&define.amd?define(function(){return t}):a.md5=t}(this); \ No newline at end of file diff --git a/17web-practice/js/practice.js b/17web-practice/js/practice.js new file mode 100644 index 0000000..bdcb80c --- /dev/null +++ b/17web-practice/js/practice.js @@ -0,0 +1,780 @@ +/*下面是常用的封装好的几个方法*/ + +/*发送ajax请求*/ +function ajax(url, data, method, success, error) { + var xhr = null; + if (window.XMLHttpRequest) { + xhr = new XMLHttpRequest(); + } else { + xhr = new ActiveXObject("Microsoft.XMLHTTP"); + } + + var resA = '', + data = data || {}, + method = method || 'get', + success = success || function () {}, + error = error || function (err) { + alert(url + '请求发生错误！'); + }; + + xhr.onreadystatechange = function () { + if (xhr.readyState == 4) { + if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 || xhr.status == 0) { + success && success(xhr.responseText); + } else { + error && error(xhr.status); + } + } + }; + + if (data) { + var res = []; + for (var i in data) { + res.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); + } + resA = res.join('&'); + } + + if (method === 'get') { + if (data) { + url += '?' + resA; + } + xhr.open(method, url, true); + xhr.send(null); + } + + if (method === 'post') { + xhr.setRequestHeader('Content-type', "application/x-www-form-urlencoded"); + xhr.open(method, url, true); + xhr.send(resA); + } +} + + +/*绑定事件*/ +function addLister(el, type, handler) { + if (el.addEventListener) { + el.addEventListener(type, handler, false); + } else if (el.attachEvent) { + el.attachEvent('on' + type, handler); + } else { + el['on' + type] = handler; + } +} + +/*判断是否有className*/ +function hasClass(el, className) { + var cls = el.className; + if (cls.indexOf(className) > -1) { + return true; + } + return false; +} + +/*移除className*/ +function removeClass(el, className) { + var cls = el.className.split(/\s+/); + if (!cls[0]) return; + for (var i = 0; i < cls.length; i++) { + if (cls[i] == className) { + cls.splice(i, 1); + el.className = cls.join(' '); + } + } +} + +/*添加className*/ +function addClass(el, className) { + var cls = el.className.split(/\s+/); + if (!cls[0]) { + el.className = className; + } else { + el.className += " " + className; + } +} + +/*按id获取该元素*/ +function $(id, node) { + return (node || document).getElementById(id); +} + +/*按className来获取该元素*/ +function getEleByClass(className, node) { + return (node || document).getElementsByClassName(className); +} + +/*获取样式*/ +function getStyle(el) { + if (window.getComputedStyle) { + return window.getComputedStyle(el); + } else if (el.currentStyle) { + return el.currentStyle; + } +} + +/*设置cookie*/ +function setCookie(name, val, days) { + var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(val); + var exp = new Date(); + exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); + cookie += '; expires = ' + exp.toGMTString(); + document.cookie = cookie; + +} + +/*获取cookie值*/ +function getCookie() { + var cookie = {}; + var all = document.cookie; + + if (all == '') { + return cookie; + } + var list = all.split('; '); + for (var i = 0; i < list.length; i++) { + var item = list[i]; + var p = item.indexOf('='); + var name = item.substring(0, p); + name = decodeURIComponent(name); + var value = item.substring(p + 1); + value = decodeURIComponent(value); + cookie[name] = value; + } + return cookie; +} + +/*load相关事件*/ +function addLoadEvent(func) { + var loadFunc = window.onload; + if (typeof window.onload != 'function') { + window.onload = func; + } else { + window.onload = function () { + loadFunc(); + func(); + } + } +} + +/***********************************************************************/ + +/*顶部通知栏*/ +function exaTip() { + var exaHead = getEleByClass('extra-head')[0]; + var exaTip = getEleByClass('close', exaHead)[0]; + addLister(exaTip, 'click', function () { + tipClose(); + setCookie('tipCookie', 'tipClose', 20); + }); +} + +/*隐藏顶部通知栏*/ +function tipClose() { + var exaHead = getEleByClass('extra-head')[0]; + exaHead.style.display = 'none'; +} + +addLoadEvent(exaTip); + +/*检查页面的cookie值*/ +function checkCookie() { + /*检查顶部通知栏*/ + if (getCookie().tipCookie) { + tipClose(); + } + + /*检查是否登录*/ + if (getCookie().loginSuc && getCookie().followSuc) { + closeAtten(); + showUserAtten(); + } +} + +/*在页面刷新或离开前检查cookie值*/ +addLister(window, "load", checkCookie); + + +/*关注及登录*/ +function login() { + var login = getEleByClass('login')[0]; + var follow = getEleByClass('follow', login)[0]; + + var logMask = getEleByClass('login-mask')[0]; + var logClose = getEleByClass('login-close', logMask)[0]; + var userName = getEleByClass('user', logMask)[0]; + var userPsw = getEleByClass('psw', logMask)[0]; + var logBtn = getEleByClass('login-btn', logMask)[0]; + var logCal = getEleByClass('login-cal', logMask)[0]; + + var unFollow = getEleByClass('unfollow')[0]; + + /*给关注按钮绑定点击事件*/ + addLister(follow, 'click', userLogin); + + function userLogin() { + /*判断未登陆则先登陆*/ + if (!getCookie().loginSuc) { + loginPop(); //显示登陆弹窗 + addLister(logClose, 'click', closePop); //点击关闭按钮时关闭登录窗口 + addLister(logCal, 'click', closePop); + + /*绑定点击登录按钮事件*/ + addLister(logBtn, 'click', function () { + /*先进行js验证,验证通过则进行用户登录请求*/ + if (userCheck()) { + + ajax( + url = 'http://study.163.com/webDev/login.htm', + data = { + userName: md5(userName.value), //固定用户名为studyOnline + password: md5(userPsw.value) //固定用户名密码为study.163.com + }, + method = 'get', + success = function (res) { + if (res == 1) { + /*1成功 0失败 如果后台验证成功，则关闭登录按钮*/ + closePop(); + /*设置登陆的cookie值*/ + setCookie('loginSuc', 'loginTrue', 1); + /*发送关注请求*/ + ajax( + url = 'http://study.163.com/webDev/attention.htm', + data = {}, + method = 'get', + success = function (res) { + if (res == 1) { + + /*设置已关注的cookie*/ + setCookie('followSuc', 'followTrue', 1); + + /* 成功为1 判断关注请求是否返回成功，成功则隐藏关注按钮 显示已关注按钮*/ + closeAtten(); + showUserAtten(); + } + }, + error = function (err) { + alert(err); + }); + + } else { + alert('用户名及密码固定为studyOnline和study.163.com！'); + } + }, + error = function (err) { + alert('登录验证失败，请重新登陆！'); + console.log(err); + }); + + } + }) + + } else { + alert('您已登录!'); + /*判断已登录则进行关注请求*/ + ajax( + url = 'http://study.163.com/webDev/attention.htm', + data = {}, + method = 'get', + success = function (res) { + if (res == 1) { + setCookie('followSuc', 'followTrue', 1); + closeAtten(); + showUserAtten(); + } + }); + } + } + + /*点击取消按钮取消关注，并删除对应cookie值*/ + addLister(unFollow, 'click', unfollow); +} + +/*显示登陆弹窗*/ +function loginPop() { + var logMask = getEleByClass('login-mask')[0]; + logMask.style.display = 'block'; +} + +/*关闭登录弹窗*/ +function closePop() { + var logMask = getEleByClass('login-mask')[0]; + logMask.style.display = 'none'; +} + +/*用户信息js验证*/ +function userCheck() { + var logMask = getEleByClass('login-mask')[0]; + var userName = getEleByClass('user', logMask)[0].value; + var userPsw = getEleByClass('psw', logMask)[0].value; + + if (!userName) { + alert('用户名不不能为空！'); + return false; + } else if (!userPsw) { + alert('密码不能为空！'); + return false; + } else if ((userName.length >= 6) && (userName.length <= 16) && (userPsw.length >= 8) && (userPsw.length <= 20)) { + return true; + } else { + alert('输入格式错误！'); + return false; + } +} + +/*隐藏关注按钮*/ +function closeAtten() { + var follow = getEleByClass('follow')[0]; + follow.style.display = 'none'; +} + +/*显示用户已关注按钮*/ +function showUserAtten() { + var userFoll = getEleByClass('userFoll')[0]; + userFoll.style.display = 'inline-block'; +} + +/*隐藏已关注按钮*/ +function closeUserAtten() { + var userFoll = getEleByClass('userFoll')[0]; + userFoll.style.display = 'none'; +} + +/*显示关注按钮*/ +function showAtten() { + var follow = getEleByClass('follow')[0]; + follow.style.display = 'inline-block'; +} + +/*取消关注*/ +function unfollow() { + closeUserAtten(); + showAtten(); + setCookie('followSuc', ''); +} + +addLoadEvent(login); + + +/*轮播图*/ +function slideshow() { + var currentImg = 0, + banerArr = getEleByClass('pic-list')[0].getElementsByTagName('li'), + imgLen = banerArr.length, + iconWrap = getEleByClass('icon-list')[0]; + iconArr = getEleByClass('icon-list')[0].getElementsByTagName('li'); + + var timer = setInterval(function () { + if (currentImg < imgLen - 1) { + currentImg++; + } else { + currentImg = 0; + } + switchTo(currentImg); + }, 5000); + + addEvent(); + /*鼠标移入及按钮点击事件*/ + function addEvent() { + for(var i=0;i + +
        +

        ${options.name}

        +
        ${options.learnerCount}
        +
        + `; + var li = document.createElement('li'); + li.className = 'clearfix'; + li.innerHTML = template; + hotList.appendChild(li); + } + + /*请求热门课程*/ + ajax( + url = 'http://study.163.com/webDev/hotcouresByCategory.htm', + data = {}, + method = 'get', + success = function (res) { + result = JSON.parse(res); + showHotCourse(result); + }, + error = function (err) { + alert('获取热门课程有误！'); + console.log(err); + }) + + function showHotCourse(data) { + + for (var i = 0; i < 10; i++) { + var item = new Course({ + id: data[i].id, + smallPhotoUrl: data[i].smallPhotoUrl, + name: data[i].name, + learnerCount: data[i].learnerCount + }); + } + } + + /*没5s更新一次*/ + var timer = setInterval(function () { + hotList.removeChild(hotList.firstChild); //删除第一个子元素 + var newItem = new Course({ + id: result[num].id, + smallPhotoUrl: result[num].smallPhotoUrl, + name: result[num].name, + learnerCount: result[num].learnerCount + }); //添加一个课程 + num == 19 ? num = 0 : num++; + }, 5000); +} + +addLoadEvent(hotCourse); +var currentPage = null; +/*左侧课程*/ +function allCourse(pageNum, sizeNum, typeNum) { + var cusList = getEleByClass('cusList')[0]; + var result = null; + var totalPage = null; + currentPage = currentPage || pageNum; + + /*当前页为最后一页时，改变窗口大小，当前页应当变成最后一页*/ + /*if(currentPage!=1){ + ajax( + url = 'http://study.163.com/webDev/couresByCategory.htm', + data = { + pageNo: 1, + psize: sizeNum, + type: typeNum + }, + method = 'get', + success = function (res) { + + if(JSON.parse(res).totalPage + +
        +

        ${options.title}

        + ${options.provider} +
        ${options.learnerCount}
        + ￥${options.price}.00 +
        + +
        +
        + +
        +

        ${options.title}

        + ${options.learnerCount} +

        发布者：${options.provider}

        +

        分类：${options.categoryName}

        +
        +
        +

        ${options.description}

        +
        + `; + var li = document.createElement('li'); + li.className = 'cus-li'; + li.innerHTML = template; + cusList.appendChild(li); + } + + /*获取课程*/ + ajax( + url = 'http://study.163.com/webDev/couresByCategory.htm', + data = { + pageNo: currentPage, + psize: sizeNum, + type: typeNum + }, + method = 'get', + success = function (res) { + result = JSON.parse(res); + showAllCourse(result); + setPage(result); + }, + error = function (err) { + alert('获取课程有误'); + }); + + /*显示所有课程*/ + function showAllCourse(data) { + cusList.innerHTML = ''; + //处理data + /*console.log(data);*/ + for (var i = 0; i < data.list.length; i++) { + var item = new mainCourse({ + id: data.list[i].id, + title: data.list[i].name, + default: '../imgs/picture2.jpg', + middlePhotoUrl: data.list[i].middlePhotoUrl, + smallPhotoUrl: data.list[i].smallPhotoUrl, + provider: data.list[i].provider, + learnerCount: data.list[i].learnerCount, + price: data.list[i].price, + categoryName: data.list[i].categoryName, + description: data.list[i].description + }); + } + + var curlis = getEleByClass('cus-li'); + for (var j = 0; j < curlis.length; j++) { + addLister(curlis[j], 'mouseover', function () { + var detail = getEleByClass('cus-detail', this)[0]; + detail.style.display = 'block'; + }); + addLister(curlis[j], 'mouseout', function () { + var detail = getEleByClass('cus-detail', this)[0]; + detail.style.display = 'none'; + }) + } + } + + /*对分页器进行处理*/ + function setPage(data) { + var pageList = getEleByClass('page-list')[0]; + pageList.innerHTML = ''; + totalPage = data.totalPage; + prePage = null; + + /*将页数插入到分页器中*/ + for (var i = 1; i <= totalPage; i++) { + var li = document.createElement('li'); + li.innerText = i; + pageList.appendChild(li); + if (i == currentPage) { + addClass(li, 'active'); + } + } + + /*将页码的点击事件绑定在父元素上*/ + pageList.onclick = function (event) { + var e = event || window.event; + var target = e.target || e.srcElement; + if (target && target.nodeName == 'LI') { + var preTarget = pageList.getElementsByTagName('li')[currentPage - 1]; + prePage = currentPage; + currentPage = target.innerText; + removeClass(preTarget, 'active'); + addClass(target, 'active'); + getCus(currentPage); + } + } + } + + /*根据页码来请求课程*/ + function getCus(n) { + ajax( + url = 'http://study.163.com/webDev/couresByCategory.htm', + data = { + pageNo: n || 1, + psize: sizeNum, + type: typeNum + }, + method = 'get', + success = function (res) { + result = JSON.parse(res); + showAllCourse(result); + setPage(result, n); + }, + error = function (err) { + alert('获取课程有误'); + }); + } + + var page = getEleByClass('page')[0]; + var prev = getEleByClass('prev', page)[0]; + var next = getEleByClass('next', page)[0]; + + /*上一页*/ + addLister(prev, 'click', function () { + if (currentPage > 1) { + getCus(--currentPage); + } + }); + + /*下一页*/ + addLister(next, 'click', function () { + if (currentPage < totalPage) { + getCus(++currentPage); + } + }); +} + +/*根据课程分类获取所有课程*/ +function dePart(sizeNum) { + /*在这里获取课程类型*/ + var productBtn = getEleByClass('category1')[0]; + var programBtn = getEleByClass('category2')[0]; + + productBtn.onclick = function () { + if (hasClass(programBtn, 'active')) { + removeClass(programBtn, 'active'); + addClass(productBtn, 'active'); + allCourse(1, sizeNum, 10); + } + } + + programBtn.onclick = function () { + if (hasClass(productBtn, 'active')) { + addClass(programBtn, 'active'); + removeClass(productBtn, 'active'); + allCourse(1, sizeNum, 20); + } + } + + /*初始化*/ + allCourse(1, sizeNum, 10); +} + +/*根据页面大小来确定一页显示的个数*/ +function pageSize() { + /*在这里获取单页显示个数*/ + var sizeNum = null; + if (window.innerWidth >= 1205) { + sizeNum = 20; + dePart(20); + } else { + sizeNum = 15; + dePart(15); + } + + addLister(window, 'resize', function () { + if (sizeNum == 15) { + if (window.innerWidth >= 1205) { + sizeNum = 20; + dePart(20); + } + } else { + if (window.innerWidth < 1205) { + sizeNum = 15; + dePart(15); + } + } + }); +} + +/*将页面大小切换函数绑定到load中*/ +addLoadEvent(pageSize); \ No newline at end of file