first commit

历届学生/陈一航/项目/contact/今日头条/js/ajax.js

@@ -0,0 +1,29 @@
+
+
+function http(params) {
+    var http = new XMLHttpRequest();
+    var par = ""
+    if (params.hasOwnProperty("data")) {
+        for (const key in params.data) {
+            par+=`&${key}=${params.data[key]}`
+        }
+        params.url = params.url + par.replace("&", "?")
+    }
+    http.open(params.method, params.url);
+    http.send();
+    http.onreadystatechange = function () {
+        if (http.readyState == 4 ) { 
+            if (http.status == 200) { 
+                var res = JSON.parse(http.responseText);
+                if (res.error_code == 0) {
+                    params.success(res)
+                } else {
+                    params.error(res)
+                }
+            } else {
+              alert("网络不好")
+            }
+           
+        } 
+    }
+}

历届学生/陈一航/项目/contact/今日头条/js/channel.js

@@ -0,0 +1,66 @@
+
+
+
+function RenderDeleteUl() {
+    console.log("sagge")
+    $(".content_core").innerHTML = ""
+    ChannelList.forEach(function(val,index){
+        $(".content_core").innerHTML+=`
+            <li>${val.title}</li>
+        `
+    });
+    console.log("ChannelList",ChannelList)
+    BindDeleteUl()
+}
+
+function RenderAddUl() {
+    $(".content_cor").innerHTML = ""
+    stChannelList.forEach(function(val,index){
+        document.querySelector(".content_cor").innerHTML+=`
+            <li>${val.title}</li>
+        `
+    })
+    BindaddUl()
+}
+
+function BindDeleteUl() {
+    var deleteUl = document.querySelectorAll(".content_core li");//若不重新调用RenderDeleteUl()此步获取的还是用初始数据在也页面的渲染
+    deleteUl.forEach(function(val,index){//初始数据的下标
+        val.onclick = function() {
+            console.log("ss")
+            console.log("ChannelList",ChannelList)
+            document.querySelector(".content_core").removeChild(val)
+            document.querySelector(".content_cor").appendChild(val)
+            stChannelList.push(ChannelList[index])
+            ChannelList.splice(index,1)
+            localStorage.setItem("stChannelList", JSON.stringify(stChannelList))
+            localStorage.setItem("ChannelList", JSON.stringify(ChannelList))
+            RenderDeleteUl()
+            BindaddUl()
+        }
+    })
+}
+
+function BindaddUl() {
+    var addUl = document.querySelectorAll(".content_cor li");
+    addUl.forEach(function(val,index){
+        val.onclick = function() {
+            document.querySelector(".content_cor").removeChild(val)
+            document.querySelector(".content_core").appendChild(val)
+            
+            ChannelList.push(stChannelList[index])
+            stChannelList.splice(index,1)
+            localStorage.setItem("stChannelList", JSON.stringify(stChannelList))
+            localStorage.setItem("ChannelList", JSON.stringify(ChannelList))
+            RenderAddUl()
+            BindDeleteUl()
+        }
+    });
+}
+
+RenderDeleteUl()
+RenderAddUl()
+
+function $(className){
+    return document.querySelector(className)
+}

历届学生/陈一航/项目/contact/今日头条/js/config.js

@@ -0,0 +1,28 @@
+
+var ChannelList = localStorage.getItem("ChannelList") == null ? [
+    { title: '推荐', type: 'tuijian' },
+    { title: '热点', type: 'redian' },
+    { title: '社会', type: 'shehui' },
+    { title: '娱乐', type: 'yule' },
+    { title: '科技', type: 'keji' },
+    { title: '汽车', type: 'qiche' },
+    { title: '体育', type: 'tiyu' },
+    { title: '财经', type: 'caijing' },
+    { title: '军事', type: 'junshi' },
+    { title: '时尚', type: 'shishang' },
+    { title: '游戏', type: 'youxi' },
+    { title: '历史', type: 'lishi' },
+    { title: '探索', type: 'tansuo' }
+] : JSON.parse(localStorage.getItem("ChannelList"))
+
+
+var stChannelList = localStorage.getItem("stChannelList")  == null ? [
+    { title: '国际', type: 'guoji'},
+    { title: '旅游', type: 'lvyou'},
+    { title: '美食', type: 'meishi'},
+    { title: '育儿', type: 'yuer'},
+    { title: '养生', type: 'yangsheng'},
+    { title: '故事', type: 'gushi'},
+    { title: '美文', type: 'meiwen'},
+] : JSON.parse(localStorage.getItem("stChannelList"))
+

历届学生/陈一航/项目/contact/今日头条/js/index.js

@@ -0,0 +1,102 @@
+function renderNavList() {
+    ChannelList.forEach(function(val,index){
+        $(".header_menu_left").innerHTML+=`<li class="${index ==0?'active': ''}">${val.title}</li>`
+    });
+
+    BindClickLi()
+}
+
+function BindClickLi() {
+    var li = document.querySelectorAll(".header_menu_left li");
+    li.forEach((val,index)=> {
+        val.onclick = function () {
+            li.forEach(vas=>vas.className = "");
+            val.className = "active";
+            getData(ChannelList[index].type)
+        };  
+    })
+}
+
+
+function getData(type) {
+    http({
+        method: 'GET',
+        url: 'http://127.0.0.1/mcf/news.php',
+        data: {
+            type: type
+        },
+        success: function(res) {
+            RenderPage(res.result.data)
+
+            console.log(res.result.data)
+        },
+        error: function(err) {
+        }
+    });
+}
+
+function RenderPage(data) {
+    $(".list_item").innerHTML = ""
+    data.forEach((val,index)=> {
+        if (val.hasOwnProperty("thumbnail_pic_s03") || val.hasOwnProperty("thumbnail_pic_s02")){
+            $(".list_item").innerHTML += `
+                <li class="item three">
+                    <a href="${val.url}">
+                        <h2>${val.title}</h2>
+                        <ul>
+                            <li>
+                                <img src="${val.thumbnail_pic_s}" alt="">
+                            </li>
+                            <li>
+                                <img src="${val.thumbnail_pic_s02}" alt="">
+                            </li>
+                            <li>
+                                <img src="${val.thumbnail_pic_s03 ? val.thumbnail_pic_s03 : ''}" alt="">
+                            </li>
+                        </ul>
+                        <span>
+                            ${val.author_name} ${val.category} ${val.date}
+                        </span>
+                    </a>
+                </li>
+            `
+         } else if (Math.random() > 0.5){
+                $(".list_item").innerHTML += `
+                <li class="item one">
+                    <a href="${val.url}">
+                        <h2>${val.title}</h2>
+                        <img src="${val.thumbnail_pic_s}" alt="${val.title}">
+                        <div class="mes">
+                            <span>${val.author_name}</span>
+                            <span>${val.date}</span>
+                            <span>${val.category}</span>
+                        </div>
+                    </a>
+                </li>
+            `
+        } else {
+            $(".list_item").innerHTML += `
+            <li class="item two">
+                <a href="${val.url}">
+                    <div class="item_message">
+                        <h2>${val.title}</h2>
+                        <span>${val.author_name}</span>
+                        <span>${val.date}</span>
+                        <span>${val.category}</span>
+                    </div>
+                    <img src="${val.thumbnail_pic_s}" alt="${val.title}">
+                </a>
+            </li>
+        `
+         }
+    })
+}
+
+
+
+getData('top')
+renderNavList()
+function $(className){
+    return document.querySelector(className)
+}
+