有原生js轮播图功能，有登陆界面。纯手工代码
index.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head">
<div class="box">
<div class="logo"><img src="images/logo.png" /></div>
<ul class="nav" id="nav">
<li><a href="index.html">首页</a> </li>
<li><a class="hover">文章列表</a>
<ul class="subtopic">
<li><a href="list_article.html">html5</a></li>
<li><a href="list_article.html">css3</a></li>
<li><a href="list_article.html">javascript</a></li>
</ul>
</li>
<button><a href="login.html">登录</a></button>
</ul>
</div>
</div>
<div class="index">
<div class="body">
<div class="left">
<div class="banner">
<div class="banner">
<ul class="list" id="banner_list">
<li style="display:block;">
<img src=".//images/b1.jpg" alt="">
</li>
<li>
<img src=".//images/b2.jpg" alt="">
</li>
<li>
<img src=".//images/b3.jpg" alt="">
</li>
<li>
<img src=".//images/b4.png" alt="">
</li>
</ul>
<ul class="dot_list" id="dot_list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<div class="articlebox">
<ul class="category">
<li id="one" class="hover">前端</li>
<li id="two">PHP</li>
<li id="three">Apache</li>
<li id="four">flash</li>
</ul>
<ul class="articlelist four" style="display:block;">
<li><a href="./list_article.html" >
<img src="./images/text1.jpg" class="thumbnail">
<div class="probably">
<div class="title">Web前端和Java开发哪个好些？</div>
<div class="meta"><span class="time">时间：2020-12-13</span><span class="click">阅读量：12w+</span></div>
<div class="overview">作为混迹IT培训圈的老兵，在给学员推荐学习课程时，知了姐除了了解对方的学习目的（转行、就业、提升），还要考虑学习者的基本情况（学历、专业、年龄、经验背景），综合学习能力、学习兴趣、学习目的推荐适合的课程。
<div class="label">标签：服务器 Apache Nginx</div>
</div>
</a>
</li>
<li><a href="./list_article.html" >
<img src="./images/b3.jpg" class="thumbnail">
<div class="probably">
<div class="title">目前做好web前端必备的知识有哪些？</div>
<div class="meta"><span class="time">时间：2020-12-13</span><span class="click">阅读量：12w+</span></div>
<div class="overview">个人拙见~不喜勿喷，我认为一个好的前端工程师，最主要的是掌握好基础，js和css以及html的基础，举个例子来说，学好js的基础之后，对于jquery就能更好的理解和学习，
<div class="label">标签：服务器 Apache Nginx</div>
</div>
</a>
</li>
<li><a href="./list_article.html" >
<img src="./images/b4.png" class="thumbnail">
<div class="probably">
<div class="title">Web前端是什么？</div>
<div class="meta"><span class="time">时间：2020-12-13</span><span class="click">阅读量：12w+</span></div>
<div class="overview">：主要是用来开发用户通过浏览器可以浏览和使用的Web页面的。 一般而言，所涉及的内容主要包括W3C中的HTML、CSS和JavaS...
<div class="label">标签：服务器 Apache Nginx</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="right" id="right" >
<div class="box">
<h2 class="title">近期文章 <button id="hidden">隐藏</button></h2>
<ul class="list">
<li><a href="#">web前端如何才算入门？如何才算合格？如何才算大牛？</a></li>
<li><a href="#">web前端要怎么样自学？</a></li>
<li><a href="#">怎样才能学好WEB前端？</a></li>
<li><a href="#">学习web前端需要掌握什么？</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="bg" id="bg"></div>
<script>
var index = 0
function banner() {
var list = document.getElementById('banner_list').children;
// 用循环计时器每2秒自动换一张图片
var interval = setInterval(function () {
if (index == list.length - 1) {
index = 0
} else {
index = index + 1
}
for (i = 0; i < list.length; i++) {
list[i].style.display = "none"
}
list[index].style.display = "block"
}, 2000)
var dot_list = document.getElementById('dot_list').children
// 通过循环给每一个按钮设置鼠标事件
for (i = 0; i < dot_list.length; i++) {
dot_list[i].onmouseover = function () {
// 如果鼠标移入则停止自动轮播
clearInterval(interval)
}
dot_list[i].onmouseout = function () {
// 如果鼠标移出继续轮播
banner()
}
dot_list[i].onclick = function () {
// 设置点击按钮切换选项卡
index = this.innerText - 1
for (j = 0; j < list.length; j++) {
list[j].style.display = "none"
}
list[index].style.display = "block"
}
}
}
banner()
document.querySelector('#hidden').onclick=function(){
if(event.target.innerText=="隐藏"){
document.querySelector('.right .list').style.display="none"
event.target.innerText="显示"
}else{
document.querySelector('.right .list').style.display="block"
event.target.innerText="隐藏"
}
}
</script>
</body>
</html>
list_article.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>列表页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head">
<div class="box">
<div class="logo"><img src="images/logo.png" /></div>
<ul class="nav" id="nav">
<li><a href="index.html">首页</a> </li>
<li><a class="hover">文章列表</a>
<ul class="subtopic">
<li><a href="list_article.html">html5</a></li>
<li><a href="list_article.html">css3</a></li>
<li><a href="list_article.html">javascript</a></li>
</ul>
</li>
<button><a href="login.html">登录</a></button>
</ul>
</div>
</div>
<div class="list">
<div class="body">
<div class="left">
<div class="articlebox">
<ul class="articlelist" style="display:block;">
<li><a href="article_article.html"><img src="./images/text1.jpg" class="thumbnail"/>
<div class="probably">
<div class="title">Golang 怎么解决调试上下文代码的问题</div>
<div class="meta"><span class="time">时间：2021-12-13</span> <span style="margin-left:10px;" class="click">阅读量：19028091823</span></div>
<div class="overview">我在原来的代码基础上又写了新的代码但不想将上文代码的条件全部满足，或者说本次测试想跳过一些部分，这时候我经常会遇到这样的问题：打算注释掉一些代码，然后编译器报警说多了依赖少了依赖，然后删着删着删光了....测试完又得重新加回去</div>
<div class="label">标签 :linux</div>
</div>
</a>
</li>
<li><a href="article_article.html"><img src="./images/text1.jpg" class="thumbnail"/>
<div class="probably">
<div class="title">Golang 怎么解决调试上下文代码的问题</div>
<div class="meta"><span class="time">时间：2021-12-13</span> <span style="margin-left:10px;" class="click">阅读量：19028091823</span></div>
<div class="overview">我在原来的代码基础上又写了新的代码但不想将上文代码的条件全部满足，或者说本次测试想跳过一些部分，这时候我经常会遇到这样的问题：打算注释掉一些代码，然后编译器报警说多了依赖少了依赖，然后删着删着删光了....测试完又得重新加回去</div>
<div class="label">标签 :linux</div>
</div>
</a>
</li>
<li><a href="article_article.html"><img src="./images/text1.jpg" class="thumbnail"/>
<div class="probably">
<div class="title">Golang 怎么解决调试上下文代码的问题</div>
<div class="meta"><span class="time">时间：2021-12-13</span> <span style="margin-left:10px;" class="click">阅读量：19028091823</span></div>
<div class="overview">我在原来的代码基础上又写了新的代码但不想将上文代码的条件全部满足，或者说本次测试想跳过一些部分，这时候我经常会遇到这样的问题：打算注释掉一些代码，然后编译器报警说多了依赖少了依赖，然后删着删着删光了....测试完又得重新加回去</div>
<div class="label">标签 :linux</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="right">
<div class="box">
<h2 class="title">近期文章</h2>
<ul class="list">
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
</ul>
</div>
<div class="box">
<h2 class="title">近期文章</h2>
<ul class="list">
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="bg" id="bg"></div>
<div class="footer">版权所有 张世光 </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/nav.js" type="text/javascript"></script>
</html>
login.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>文章页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head">
<div class="box">
<div class="logo"><img src="images/logo.png" /></div>
<ul class="nav" id="nav">
<li><a href="index.html">首页</a> </li>
<li><a class="hover">文章列表</a>
<ul class="subtopic">
<li><a href="list_article.html">html5</a></li>
<li><a href="list_article.html">css3</a></li>
<li><a href="list_article.html">javascript</a></li>
</ul>
</li>
<button>登录</button>
</ul>
</div>
</div>
<div class="login">
<div class="body">
<h3 style="font-size:1.5em;">登陆账号</h3>
<h4 style="margin-top:10px;">现在是：<span id="daojishi"></span></h4>
<input type="text" placeholder="账号" name="" id="user">
<input type="text" placeholder="密码" name="" id="pass">
<button type="button" style="cursor: pointer;" onclick="checkform()">登录</button>
</div>
</div>
<div class="clear"></div>
<div class="bg" id="bg"></div>
<div class="footer">版权所有 张世光 </div>
<div id="codefans_net" style="position:absolute;">
<img width="300" title="点击图片删除" src="./images/banner1.jpg" alt="">
</div>
</body>
<script>
function checkform() {
var user = document.querySelector('#user').value
var pass = document.querySelector('#pass').value
if (user == 'zhangshiguang' && pass == '123456') {
alert("登陆成功");
location.href = "index.html"
} else {
alert("用户名或者密码不对")
}
return false
}
</script>
<script>
// 悬浮代码
var x = 50, y = 60
var xin = true, yin = true
var step = 1
// 设置延时
var delay = 10
// 获取元素
var obj = document.getElementById("codefans_net")
function float() {
// console.log(x,y)
// 这里是计算代码,大概就是计算元素宽高,然后随机移动
// 当页面总宽-元素长度 等于移动的距离时,说明到头了,开始反向移动
var L = T = 0
var R = document.body.clientWidth - obj.offsetWidth
var B = document.body.clientHeight - obj.offsetHeight
obj.style.left = x + document.body.scrollLeft + 'px'
obj.style.top = y + document.body.scrollTop + 'px'
x = x + step * (xin ? 1 : -1)
if (x < L) { xin = true; x = L }
if (x > R) { xin = false; x = R }
y = y + step * (yin ? 1 : -1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl = setInterval("float()", delay)
// 鼠标移入清除计时器
obj.onmouseover = function () { clearInterval(itl) }
// 鼠标移出打开计时器
obj.onmouseout = function () { itl = setInterval("float()", delay) }
// 调用这个方法时 传入显示时间的 元素id
function formatDate(dom_id){
var date = new Date();
var year = date.getFullYear()
// 月份从0取要+1
var month = date.getMonth()+1
var ri = date.getDate()
var hour = date.getHours()
var minuntes = date.getMinutes()
// 如果分和秒是个位数补个0
if(minuntes<10){
minuntes='0'+minuntes
}
var secoed = date.getSeconds()
if(secoed<10){
secoed='0'+secoed
}
document.getElementById(dom_id).innerText=year+"-"+month+"-"+ri+" "+hour+":"+minuntes+":"+secoed
setTimeout(() => {
formatDate(dom_id)
}, 1000);
}
formatDate('daojishi')
</script>
</html>
article_article.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>文章页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head">
<div class="box">
<div class="logo"><img src="images/logo.png" /></div>
<ul class="nav" id="nav">
<li><a href="index.html">首页</a> </li>
<li><a class="hover">文章列表</a>
<ul class="subtopic">
<li><a href="list_article.html">html5</a></li>
<li><a href="list_article.html">css3</a></li>
<li><a href="list_article.html">javascript</a></li>
</ul>
</li>
<button><a href="login.html">登录</a></button>
</ul>
</div>
</div>
<div class="article">
<div class="body">
<div class="left">
<h1 class="title">requestIdleCallback 实际业务应用场景有哪些?</h1>
<div class="meta"><span>时间：2021-12-13</span><span>作者：我自己</span><span>阅读量:10298312</span></div>
<div class="content">
<pre>
最近，陆陆续续搞 了一个 UniUsingComponentsWebpackPlugin 插件(下面介绍)，这是自己第三个开源项目，希望大家一起来维护，一起 star 呀，其它两个：
vue-okr-tree
基于 Vue 2的组织架构树组件
地址：https://github.com/qq44924588...
ztjy-cli
团队的一个简易模板初始化脚手架
地址：https://github.com/qq44924588...
UniUsingComponentsWebpackPlugin
地址：https://github.com/qq44924588...
配合UniApp，用于集成小程序原生组件
配置第三方库后可以自动引入其下的原生组件，而无需手动配置
生产构建时可以自动剔除没有使用到的原生组件
背景
第一个痛点
用 uniapp开发小程序的小伙伴应该知道，我们在 uniapp 中要使用第三方 UI 库(vant-weapp，iView-weapp)的时候 ，想要在全局中使用，需要在 src/pages.json 中的 usingComponents 添加对应的组件声明，如：
// src/pages.json
"usingComponents": {
"van-button": "/wxcomponents/@vant/weapp/button/index",
}
但在开发过程中，我们不太清楚需要哪些组件，所以我们可能会全部声明一遍（PS:这在做公共库的时候更常见)，所以我们得一个个的写，做为程序员，我们绝不允许使用这种笨方法。这是第一个痛点。
第二个痛点
使用第三方组件，除了在 src/pages.json 还需要在对应的生产目录下建立 wxcomponents，并将第三方的库拷贝至该文件下，这个是 uniapp 自定义的，详细就见：https://uniapp.dcloud.io/fram...。
这是第二个痛点。
第三个痛点
第二痛点，我们将整个UI库拷贝至 wxcomponents，但最终发布的时候，我们不太可能全都用到了里面的全局组件，所以就将不必要的组件也发布上去，增加代码的体积。
有的小伙伴就会想到，那你将第三方的库拷贝至 wxcomponents时候，可以只拷使用到的就行啦。是这理没错，但组件里面可能还会使用到其它组件，我们还得一个个去看，然后一个个引入，这又回到了第一个痛点了。
有了这三个痛点，必须得有个插件来做这些傻事，处理这三个痛点。于是就有 UniUsingComponentsWebpackPlugin 插件，这个webpack 插件主要解决下面几个问题：
配置第三方库后可以自动引入其下的原生组件，而无需手动配置
生产构建时可以自动剔除没有使用到的原生组件
webpack 插件
webpack 的插件体系是一种基于 Tapable 实现的强耦合架构，它在特定时机触发钩子时会附带上足够的上下文信息，插件定义的钩子回调中，能也只能与这些上下文背后的数据结构、接口交互产生 side effect，进而影响到编译状态和后续流程。
从形态上看，插件通常是一个带有 apply 函数的类：
class SomePlugin {
apply(compiler) {
}
}
</pre>
</div>
</div>
<div class="right">
<div class="box">
<h2 class="title">近期文章</h2>
<ul class="list">
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
</ul>
</div>
<div class="box">
<h2 class="title">近期文章</h2>
<ul class="list">
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
<li>Wine 2.0.1 稳定版本发布-附ubuntu安装说明</li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="bg" id="bg"></div>
<div class="footer">版权所有 张世光 </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/nav.js" type="text/javascript"></script>
</html>
扫一扫
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
