first commit

js/utils/index.js

@@ -0,0 +1,77 @@
+class Utils {
+    header(content, action, back = `<i class="iconfont icon-fanhui"></i>`) {
+        $("body").prepend(`
+          <div class="header fixed flex ais flex1 border-box p15">
+            ${back}
+            ${content}
+            ${action}
+         </div>    
+        `)
+
+        $(".icon-fanhui").click(() => history.back())
+    }
+
+    eachHtml(dom, data, callback) {
+        $(dom).append(
+            data.map((v,i) => callback(v,i))
+        )
+    }
+
+    item(v, theme = 1) {
+        return `
+            <li class="${theme == 2 ? 'item-theme-horizontally' : ''}">
+                <a href="./info.html?id=${v.id}&time=${v.time}">
+                    <img src="${v.thumbnail}" alt="">
+                    <div class="r">
+                        <div class="text ellipsis">${v.title}</div>
+                        <div class="desc flex ais js">
+                            <div class="time">${v.time}</div>
+                            <div class="view flex ais">
+                                <i class="iconfont icon-yanjing"></i>
+                                <span>${v.view}</span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            `
+    }
+
+    footer() {
+        // ajax 接口返回的底部导航数据
+        let arr = [
+            { icon: 'icon-shouye', title: '首页', href: 'index.html' },
+            { icon: 'icon-changchenglogo', title: '分类', href: 'domestic.html' },
+            { icon: 'icon-hot', title: '热门', href: 'hot.html' },
+            { icon: 'icon-wo', title: '我的', href: 'me.html' },
+        ]
+
+        $("body").append(`
+            <ul class="footer fixed flex ja ais">
+             ${arr.map(v => {
+                return `
+                <li class="${location.pathname.includes(v.href) ? 'active' : ''}">
+                    <a href="${v.href}">
+                    <i class="iconfont ${v.icon}"></i>
+                    <p>${v.title}</p>
+                    </a>
+                </li>`
+             })}
+            </ul>
+        `)
+    }
+
+    query(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return decodeURIComponent(r[2]); return null;
+    }
+}
+
+let u = new Utils
+let util = u,
+    {
+        header, eachHtml, item,
+        footer, query
+    }
+        = u

js/utils/rem.js

@@ -0,0 +1,10 @@
+(function (w, d) {
+    function setSize() {
+        var screenWidth = d.documentElement.clientWidth;
+        var currentFontSize = (screenWidth * 100) / 750;
+        d.documentElement.style.fontSize = currentFontSize + "px";
+    }
+    w.addEventListener("resize", setSize);
+    w.addEventListener("pageShow", setSize);
+    w.addEventListener("DOMContentLoaded", setSize);
+})(window, document);