js轮播图改进版
实现一个基于JavaScript的轮播图效果
网页的注册、登录、拦截
本次作业是简单实现网页的注册、登录、拦截
注册部分
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reg.css">
<script src="fun.js"></script>
</head>
<body>
<table align="center" cellpadding="5px">
<tr>
<td> </td>
<td align="left">register</td>
</tr>
<tr>
<td align="right">username:</td>
<td>
<input type="text" id="username" autocomplete="off" placeholder="enter your name">
</td>
</tr>
<tr>
<td align="right">password</td>
<td>
<input type="password" id="password" placeholder="enter your password">
</td>
</tr>
<tr>
<td align="right">confirm password</td>
<td>
<input type="password" id="repwd" placeholder="confirm your password">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="register" id="register" onclick="reg()">
<a href="login.html">login</a>
</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reg.css">
<script src="fun.js"></script>
</head>
<body>
<table align="center" cellpadding="5px">
<tr>
<td> </td>
<td align="left">register</td>
</tr>
<tr>
<td align="right">username:</td>
<td>
<input type="text" id="username" autocomplete="off" placeholder="enter your name">
</td>
</tr>
<tr>
<td align="right">password</td>
<td>
<input type="password" id="password" placeholder="enter your password">
</td>
</tr>
<tr>
<td align="right">confirm password</td>
<td>
<input type="password" id="repwd" placeholder="confirm your password">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="register" id="register" onclick="reg()">
<a href="login.html">login</a>
</td>
</tr>
</table>
</body>
</html>css
*{
font-size: 18px;
}
table{
margin-top: 150px;
}
tr{
height: 50px;
}
a{
text-decoration: none;
}
#register{
background-color: gray;
border-radius: 10px;
box-shadow: 1px 1px 2px 2px #232;
}
#username{
background-image: url(img/user.JPG);
background-repeat: no-repeat;
background-position-x: 5px;
background-position-y: 5px;
/* 设置背景图,也就是那个用户名头像的位置 */
height: 30px;
padding-left: 35px;
border: 1px solid gray;
outline: none;
}
#username:hover{
border: 1px solid purple;
}
#password,#repwd{
background-image: url(img/password.JPG);
background-repeat: no-repeat;
background-position-x: 5px;
background-position-y: 5px;
height: 30px;
padding-left: 35px;
border: 1px solid gray;
outline: none;
}
#password:hover,#repwd:hover{
border: 1px solid purple;
}js
function reg() {
var username = document.getElementById("username").value;
var pwd = document.getElementById("password").value;
var repwd = document.getElementById("repwd").value;
if (username == '') {
alert("username can't be empty");
return false;
}
if (pwd != repwd) {
alert("passwords aren't the same");
return false;
}
if (pwd == '' || repwd == '') {
alert("password can't be empty");
return false;
}
localStorage.setItem("username", username);
localStorage.setItem("password", pwd);
// 在浏览器本地添加数据
alert("register successful");
window.location.href = "login.html";
// 跳转到指定界面
}
登录部分
html
拖拽式页面的简单实现
前端作业--拖拽点餐系统
模板类链表
补写课本的链表模板(找csdn找了好久)
简单实现页面提交数据
简单实现提交数据到另一个页面
重载运算符的总结
总结部分c++重载运算符
最小生成树之prim
这是一篇发完后回头看也看不太懂的文章(作业怎么可以难)
第十一次前端作业
JavaScript入门
第十次前端作业
这波博客确实鸽了好久，一直在忙别的事。享受、珍惜这总结、写文案的时刻。
第十次前端作业，这里要求做一个图片轮播和鼠标悬浮切换图片的效果。
html部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.change{
margin-top: 30px;
}
button{
width: 70px;
padding: 5px;
color: grey;
}
.cycle{
margin-top: 30px;
margin-bottom: 20px;
}
/* .bo{
position: absolute;
top: 430px;
} */
</style>
<script type="text/javascript" src="aaa.js"></script>
</head>
<body>
<div class="cycle" align="center">
<img src="images1/love1.jpg" id="img1">
</div>
<div align="center" >
<span><button id="b1">start</button></span>
<span><button id="b2">pause</button></span>
<!-- <img src="images1/love1.jpg" id="img1"> -->
</div>
<div align="center">
<div class="change">
<img src="images2/dl1.jpg"
onmouseover="this.src='images2/dl1d.jpg'"
onmouseout="this.src='images2/dl1.jpg'">
</div>
</div>
</body>
</html>JavaScript部分代码
window.onload = function () {
var img1 = document.getElementById("img1");
var imgArr = ["images1/love1.jpg", "images1/love2.jpg", "images1/love3.jpg", "images1/love4.jpg", "images1/love5.jpg"];
// 定义一个图片列表
var index = 0;
// 创建一个图片索引变量
var timer;
// 创建一个变量来保存定时器标识
var b1 = document.getElementById("b1");
// 为b1绑定一个单击相应函数
b1.onclick = function () {
clearInterval(timer)
// clear的意思是清除之前已有的计时器，重新设置一个
// 开启一个计时器，来回切换图片
timer = setInterval(() => {
// 如上一行，set的意思是定义一个新计时器
index++;
// 判断索引是否超过最大值，这里的方法很巧妙
index = index % imgArr.length
img1.src = imgArr[index]
}, 1000);
// 1000指的是1000毫秒，即每秒切换一次
}
var b2 = document.getElementById("b2")
// 为b2绑定一个单击响应函数
b2.onclick = function () {
clearInterval(timer)
}
}效果图如下
第六次前端作业
第六次前端作业，在写的过程中发现许多坑，开贴来记录下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/*消除li列表所有默认缩进*/
#aa{
background-image: url(image/bgimage.png);
width: 900px;
height: 280px;
}
ul{
list-style: none;
position: relative;
top: 70px;
left: 25px;
/*设置ul列表所在的区域*/
overflow: hidden;
/*这里的position参数很重要，缺少这个起不到控制边距作用*/
}
li{
padding: 4px;
padding-left: 0px;
background-color: #549154;
width: 220px;
border-bottom: dashed 1px white;
/*设置列表背景，下划线样式*/
}
a{
text-decoration: none;
color: #ffd700;
padding-left: 20px;
font-weight: bold;
letter-spacing: 1px;
/*设置字体样式*/
}
.kk{
background-color: #dfa937;
display: inline;
/*如果display用了block，则block和文字部分不在同一行，则出现色块填充不全的情况*/
padding: 6px;
/*设置字体前的列表样式，也就是颜色块*/
}
</style>
</head>
<body>
<div id="aa">
<ul>
<li><div class="kk"></div><a href="#"> 图书分类</a></li>
<li><div class="kk"></div><a href="#"> 人文社科</a></li>
<li><div class="kk"></div><a href="#"> 历史古迹</a></li>
<li><div class="kk"></div><a href="#"> 哲学宗教</a></li>
<li><div class="kk"></div><a href="#"> 社会科学</a></li>
<li><div class="kk"></div><a href="#"> 科普百科</a></li>
<!-- style="'display: block'"; 添加这个会突兀出一块空白的区域，这是一个带有换行符的块元素-->
</ul>
</div>
</body>
</html>图例
