版权声明：小佳 https://blog.csdn.net/qq_37870901/article/details/82972425
目录：
1.抽奖系统
2.简单验证码的使用
3.省市联动
4.简单轮播图
5.表格数据增加和删除
6.导航栏悬浮 、回到顶部
7.侧边栏iframe 的切换
8.折叠菜单
1.抽奖系统
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#box{
display: flex;
padding: 0 450px;
}
#box span{
flex: 1;
display: flex;
border: red solid 1px;
height: 100px;
background-color: #4AB0F5;
justify-content: center;
align-items: center;
font-size: 28px;
}
#button{
padding: 20px 450px;
}
#button button{
width: 80px;
height: 50px;
background-color: rosybrown;
font-size: 20px;
border: #B8860B solid 1px;
border-radius: 8px;
margin-right: 20px;
}
</style>
<script>
window.onload = function(){
}
var number = prompt("请输入你猜测的四位数字","")
var num;
function randomNum(){
var span = document.getElementsByTagName("span");
for (var i = 0; i < span.length; i++) {
num = parseInt(Math.random()*10);
span[i].innerHTML = num;
}
}
var set;
var flag = true;
function beginNum(){
if(flag == true){
set = setInterval(randomNum,100);
}
flag = false;
}
function endNum(){
clearInterval(set);
if(num==number){
alert("恭喜你猜中了！！！");
}
else{
alert("很遗憾，下次继续努力！");
}
flag = true;
}
</script>
<body>
<div id="box">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div id="button">
<button onclick="beginNum()">开始</button>
<button onclick="endNum()">结束</button>
</div>
</body>
</html>2.简单验证码的使用
<script language="javascript">
var code; //在全局 定义验证码
function createCode()
{ //创建验证码函数
code = "";
var codeLength =4;//验证码的长度
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k',
'l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');//所有候选组成验证码的字符，当然也可以用中文的
for(var i=0;i<codeLength;i++)
{
/*
* 获取36个数中的随机一个
* 把获得的值赋值给code
*/
var charIndex =Math.floor(Math.random()*36);
code +=selectChar[charIndex];
}
// 设置验证码的显示样式，并显示
document.getElementById("discode").style.fontFamily="Fixedsys"; //设置字体
document.getElementById("discode").style.letterSpacing="5px"; //字体间距
document.getElementById("discode").style.color="#0ab000"; //字体颜色
document.getElementById("discode").innerHTML=code; // 显示
}
function but()
{//验证验证码输入是否正确
var val1=document.getElementById("t1").value;
var val2=code;
if(val1!=val2){
alert("验证码错误!");
document.getElementById('t1').value="";
}
}
</script>3.省市联动
<script>
//创建城市数组
var cityArrs = [["郑州市","濮阳市","南阳市"],["三亚市","海口市","三沙市"],["东莞市","广州市","深圳市"]];
function showCity(){
//获得省份的id
var province = document.getElementById("province");
//获得省份的value与数组相对应
var value = province.value;
var citys = cityArrs[value];
//获得城市的id
var city = document.getElementById("city");
//每次把select中的option给清空
city.options.length = 0;
//改变透明度吧城市显示出来
city.style.opacity = 1;
//遍历城市
for (var i = 0; i < citys.length; i++) {
//获得每一个城市
var cityText = citys[i];
//创建显示城市的option
var cityOption = document.createElement("option");
//创建城市中显示的文本
var optionText = document.createTextNode(cityText);
//吧文本内容添加到option中
cityOption.appendChild(optionText);
//把option添加到city中
city.appendChild(cityOption);
}
}
</script>
<style>
#city{
opacity: 0;
}
</style>
<body>
<select id="province" onclick="showCity()">
<option value="-1">选择省份</option>
<option value="0">河南省</option>
<option value="1">海南省</option>
<option value="2">广东省</option>
</select>
<select id="city">
</select>
</body>4.简单轮播图
<script>
window.onload = function(){
init();
}
var index = 0;
function change(){
var img = document.getElementById("img")
var indexc = index%3 + 1;
img.src ="img/"+indexc+".jpg";
index = index + 1;
}
function init(){
setInterval("change()",2000);
}
</script>
<body>
<img src="img/1.jpg" width="100%" height="600px" id="img"/>
</body>5.表格数据增加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<style>
.bs-example {
display: flex;
flex: 1;
justify-content: space-around;
}
.input-group {
padding-right: 50px;
}
</style>
<script>
function getAlldata(){
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var salry = document.getElementById("salry").value;
var td = document.createElement("td");
var textName = document.createTextNode(name);
td.appendChild(textName);
var td2 = document.createElement("td");
var textAge = document.createTextNode(age);
td2.appendChild(textAge);
var td3 = document.createElement("td");
var textSalry = document.createTextNode(salry);
td3.appendChild(textSalry);
var td4 = document.createElement("td");
var button4 = document.createElement("button");
button4.type = "button";
button4.className = "btn btn-danger"
button4.setAttribute("onclick","deleteData(this)")
td4.setAttribute("style","text-align: center");
var TextButton = document.createTextNode("删除");
button4.appendChild(TextButton);
td4.appendChild(button4)
var tr = document.createElement("tr");
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
var tbody = document.getElementById("tbody");
tbody.appendChild(tr);
}
function deleteData(btn){
var childTd = btn.parentNode;
var childTr = childTd.parentNode;
var parentTbody = childTr.parentNode;
parentTbody.removeChild(childTr);
}
</script>
<body>
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon " >姓名</span>
<input id="name" type="text" class="form-control" placeholder="请输入姓名">
</div>
<div class="input-group">
<span class="input-group-addon " >年龄</span>
<input id="age" type="text" class="form-control" placeholder="请输入年龄">
</div>
<div class="input-group">
<span class="input-group-addon " >薪水</span>
<input id="salry" type="text" class="form-control" placeholder="请输入薪水">
</div>
<div class="input-button">
<input id="allData" onclick="getAlldata()" type="button" value="提交" style="background-color: rosybrown; border: solid white 1px; border-radius: 3px; padding: 7px 12px;" />
</div>
</form>
<table id="table" class="table table-bordered table-hover table-striped">
<caption style="text-align: center; font-size: 28px; font-weight: bold;">员工信息表</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>薪水</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>Tanmay</td>
<td>20</td>
<td>5000</td>
<td style="text-align: center;">
<button onclick="deleteData(this)" type="button" class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td>Sachin</td>
<td>25</td>
<td>4000</td>
<td style="text-align: center;">
<button onclick="deleteData(this)" type="button" class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td>Tanmay</td>
<td>20</td>
<td>5000</td>
<td style="text-align: center;">
<button onclick="deleteData(this)" type="button" class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td>Sachin</td>
<td>25</td>
<td>4000</td>
<td style="text-align: center;">
<button onclick="deleteData(this)" type="button" class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="jquery-1.11.3/jquery.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>6.导航栏悬浮 、回到顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 1500px;
}
div{
height: 100px;
background-color: burlywood;
}
#box{
background-color: #4AB0F5;
height: 50px;
width: 100%;
display: flex;
}
ul{
display: flex;
flex: 1;
list-style: none;
justify-content: space-around;
}
ul li{
display: flex;
justify-content: center;
align-items: center;
}
button{
position: fixed;
right: 50px;
bottom: 80px;
padding: 3px;
display: none;
}
</style>
<script>
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var box1 = document.getElementById("box");
var goHead = document.getElementById("goHead");
if(scrollTop > 100){
box1.style.position = "fixed";
//oBox.style.margin = "0";
box1.style.top = "0";
}else{
//oBox.style.margin = "0"
box1.style.position = "static";
}
if(scrollTop > 400){
goHead.style.display = "block";
}else{
goHead.style.display = "none";
}
}
function goHead(){
document.documentElement.scrollTop = document.body.scrollTop =0;
}
</script>
<body>
<div>
</div>
<div id="box">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
<li>菜单6</li>
</ul>
</div>
<button id="goHead" onclick="goHead()">
回到顶部
</button>
</body>
</html>
7.侧边栏iframe 的切换
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
ul li{
border: #080808 solid 1px;
list-style: none;
float: left;
display: inline-block;
line-height: 30px;
width: 80px;
text-align: center;
}
</style>
1、不使用js来操作
<body>
<nav>
<ul>
<li><a href="小键盘功能.html" target="inframe">菜单一</a></li>
<li><a href="图片切换.html" target="inframe">菜单二</a></li>
<li><a href="悬浮 顶端.html" target="inframe">菜单三</a></li>
</ul>
</nav>
<div class="iframe">
<iframe name="inframe">
</iframe>
</div>
</body>
2、js版本
<script>
window.onload = function(){
var change = document.getElementsByTagName("a");
for (var i = 0; i < change.length; i++) {
change[i].onclick = function(){
var ifreamHref = this.href;
document.getElementById("inframe").src = ifreamHref;
return false;//要特别注意 不加上去的话不管用
}
}
}
</script>
<body>
<nav>
<ul>
<li><a href="小键盘功能.html">菜单一</a></li>
<li><a href="图片切换.html" >菜单二</a></li>
<li><a href="悬浮 顶端.html" >菜单三</a></li>
</ul>
</nav>
<div class="iframe">
<iframe name="inframe" id="inframe">
</iframe>
</div>
</body>
</html>
8.折叠菜单
<script>
function showChiSele(select1) {
if(select1.getAttribute("showFlag") == "true") {
select1.nextSibling.style.display = "none";
select1.setAttribute("showFlag", "false");
} else {
select1.nextSibling.style.display = "block";
select1.setAttribute("showFlag", "true");
}
}
</script>
<body>
<div id="box">
<ul>
<li>
<a onclick="showChiSele(this)" showFlag="true" style="cursor: pointer;">一级菜单</a><ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
<ul>
<li>
<a onclick="showChiSele(this)" showFlag="true" style="cursor: pointer;">一级菜单</a><ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</div>
</body>