first commit

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/utils/index.js

@@ -0,0 +1,116 @@
+class Utils {
+
+    footer() {
+        var html = `
+        <ul class="footer top">
+           ${config.footerArr.forH(v => {
+                return `<li>
+                            <a href="${v.href}" class="${location.href.includes(v.href) ? 'active' : ''}">
+                                <i class="iconfont ${v.icon}"></i>
+                                <p>${v.title}</p>
+                            </a>
+                        </li>`
+            })}
+            
+        </ul>
+        `
+
+        $("body").insertAdjacentHTML("beforeend", html);
+    }
+
+    item (father, data) {
+        father.innerHTML = ""
+        data.forEach(v => {
+            father.innerHTML+=
+            `
+            <div class="item">
+                <div class="img">
+                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
+                    <img src="${v.preview || v.img_src}" alt="">
+                    <span>${v.total || v.shuliang}P</span>
+                   </a>
+                </div>
+                <div class="text">
+                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
+                    <div class="title ellipsis">${v.title}</div>
+                    <div class="model ellipsis">${v.user || `模特: ${v.renwulist[0].name}`}</div>
+                    <div class="mechanism ellipsis">${v.source || `机构: ${v.jigoulist[0].name}`}</div>
+                   </a>
+                </div>
+               
+                   <div class="tags">
+                        ${
+                            (v.tags || v.biaoqianlist).forH(val => {
+                                return `
+                                    <a href="">${val.title || val.name}</a>
+                                `
+                            })
+                        }
+                    </div>
+            
+                
+            </div>
+            `
+        })
+    }
+
+    title(text = "", rightIcon = "") {
+        var html = `
+            <div class="pub_title">
+                <i class="iconfont icon-back1"></i>
+                <span class="ellipsis">${text}</span>
+                ${rightIcon}
+            </div>
+        `
+
+        $("body").insertAdjacentHTML("beforeend", html);
+
+        click(".icon-back1", () => {
+            history.back()
+        })
+    }
+
+    click(className, callback) {
+        _(className).forEach((v,i) => v.onclick = () => callback(v,i))
+    }
+
+    query(name) {
+        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        let r = window.location.search.substr(1).match(reg);
+        if (r != null) {
+            return decodeURIComponent(r[2]);
+        };
+        return null;
+    }
+
+
+
+    cover() {
+        Array.prototype.forH = function (callback) {
+            var res = []
+            for (var index = 0; index < this.length; index++) {
+                res.push(callback(this[index]))
+            }
+            return res.toString().replaceAll(",", "")
+        }
+        // 其他很多重写
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+
+}
+
+
+var { 
+    footer, $, _, query,
+    cover, click, item,
+    title
+} = new Utils();
+
+cover()

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.8/js/utils/rem.js

@@ -0,0 +1,15 @@
+(function (w, d) {
+    function setSize() {
+        // 获取屏幕的宽度 375px
+        var screenWidth = d.documentElement.clientWidth;
+
+        // 根据规则计算  html 的font-size数值
+        var currentFontSize = screenWidth * 100 / 750;
+
+        // 修改html上的font-size
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)