first commit

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

@@ -0,0 +1,36 @@
+/**
+ * 
+ * @param {*} params 
+ * {
+ *   method: '' // 请求方法
+ *   url: '' //请求网址
+ *   success: function(){}
+ * }
+ */
+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("网络不好")
+            }
+           
+        } 
+    }
+}

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

@@ -0,0 +1,16 @@
+var defaultNavList = localStorage.getItem("defaultNavList") == null ? [
+    
+    { title: '社会', type: 'shehui' },
+    { title: '国内', type: 'guonei' },
+    { title: '国际', type: 'guoji' },
+    { title: '娱乐', type: 'yule' },
+    { title: '体育', type: 'tiyu' }
+] : JSON.parse(localStorage.getItem("defaultNavList"))
+
+var settingNavList = localStorage.getItem("settingNavList") == null ? [
+    { title: '军事', type: 'junshi' },
+    { title: '科技', type: 'keji' },
+    { title: '财经', type: 'caijing' },
+    { title: '时尚', type: 'shishang' },
+    { title: '头条', type: 'top' }
+] : JSON.parse(localStorage.getItem("settingNavList"));

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

@@ -0,0 +1,72 @@
+
+// 渲染删除元素的li
+function RenderDeleteUl() {
+    document.querySelector(".delete ul").innerHTML = ""
+    defaultNavList.forEach(function(val,index){
+        document.querySelector(".delete ul").innerHTML+=`
+            <li>${val.title}</li>
+        `
+    });
+    BindDeleteUl()
+}
+
+// 渲染添加元素的li
+function RenderAddUl() {
+    document.querySelector(".add ul").innerHTML = ""
+    settingNavList.forEach(function(val,index){
+        document.querySelector(".add ul").innerHTML+=`
+            <li>${val.title}</li>
+        `
+    });
+    BindaddUl()
+}
+
+function BindDeleteUl() {
+    var deleteUl = document.querySelectorAll(".delete ul li");
+    deleteUl.forEach(function(val,index){
+        val.onclick = function() {
+            document.querySelector(".delete ul").removeChild(val)
+            document.querySelector(".add ul").appendChild(val)
+            // 1 处理数据
+            // 2 保存数据
+            // 将数据保存
+            settingNavList.push(defaultNavList[index])
+            defaultNavList.splice(index,1)
+            console.log("defaultNavList: ", defaultNavList)
+            localStorage.setItem("settingNavList", JSON.stringify(settingNavList))
+            localStorage.setItem("defaultNavList", JSON.stringify(defaultNavList))
+            RenderDeleteUl()
+            BindaddUl()
+        }
+    })
+}
+
+function BindaddUl() {
+    var addUl = document.querySelectorAll(".add ul li");
+    addUl.forEach(function(val,index){
+        val.onclick = function() {
+            document.querySelector(".add ul").removeChild(val)
+            document.querySelector(".delete ul").appendChild(val)
+
+            defaultNavList.push(settingNavList[index])
+            settingNavList.splice(index,1)
+            console.log("settingNavList: ", settingNavList)
+
+            localStorage.setItem("settingNavList", JSON.stringify(settingNavList))
+            localStorage.setItem("defaultNavList", JSON.stringify(defaultNavList))
+            RenderAddUl()
+            BindDeleteUl()
+        }
+    });
+}
+
+RenderDeleteUl()
+RenderAddUl()
+
+// BindDeleteUl()
+
+// BindaddUl()
+
+
+
+

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

@@ -0,0 +1,100 @@
+document.querySelector(".header_menu_left").style.width = defaultNavList.length * 80 + 'px'
+function renderNavList() {
+    defaultNavList.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(defaultNavList[index].type)
+        };  
+    })
+}
+
+renderNavList()
+
+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) {
+            // alert(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">
+                    <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>
+                </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">
+                    <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}">
+                </li>
+            `
+        }
+        
+    })
+}
+
+getData('top')
+
+function $(className){
+    return document.querySelector(className)
+}
+