网页制作之JavaScript篇模态对话框左侧菜单后台管理页面布局

69 阅读 0 评论 46 点赞

我是靠谱客的博主现代大地，最近开发中收集的这篇文章主要介绍网页制作之JavaScript篇模态对话框左侧菜单后台管理页面布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

独立的语言，浏览器就是他的解释器

JavaScript存在形式：


-
Head中
<script type="text/javascript">
// javascript代码
alert(123)
</script>
-
文件中
<script src="common.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="name">
<input type="button" οnclick="GetData()" value="提交">
<script>
function GetData() {
var i = document.getElementById(id="name")
alert(i.value)
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// javascript代码
alert(123)
</script>
</head>
<body>
<h1>asgduabdh</h1>
<script src="common.js"></script>
</body>
</html>

common.js文件

alert("Hello world!")

JS代码尽量放在标签的最下面
存在于HTML中

编写方式


-
HTML文件中
-
直接在浏览器的审查元素的console（控制台）中编写

变量


name=“jim”；全局变量
var name=“jim”；局部变量

数据类型：


数字
a=10；
a.parsefloat()
a.parseint()
字符串
a="Jim";
a.charat()
a.substring()
a.length
a.slice(start,stop)
布尔类型
首字符小写
true、false
数组
a=[1,2,3,4,5]
a.length
a.push()
在数组尾部增加值
a,pop()
尾部获取数据
a.unshift() 头部插入数据
a.shift()
头部移除数据
a.splice(start,deletecount,value...)
增加，替换和删除数据
字典

for循环


1
循环时，循环的是元素的索引,字典时循环的是key
a=[5,6,7,8]
for(var item in a){
console.log(a[item])
}
2
循环时,不支持字典的循环
a=[5,6,7,8]
for(var i=0;i<a.length;i=i+1){
console.log(a[i])
}

if条件语句


==
值相等
===
值与类型都相等
&&
与
||
或
if(){
}else if(){
}else{
}

函数

-
function 函数名(形参){
函数体
}
-	**没名字的函数自动执行
-	普通函数
function func(){
console.log(123);
}
func()
-	匿名函数
setinterval(function (){
console.log(123);
}, 2000)
-	自执行函数(创建函数并且自动执行)
(function (arg){
console.log(arg);
})(1)

定时器


setInterval("f();",2000)
2000表示2秒

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">
Hello world!
</div>
<script>
// 向控制台发送1
function f() {
console.log(1)
}
// 获取id为i1的标签的内容，并发送给控制台
function GetVal(){
a=document.getElementById("i1")
console.log(a.values)
}
// 定时器，每2秒运行一次
setInterval("f();GetVal();",2000)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
跑马灯-->
<div id="i1">
欢迎欢迎，热烈欢迎！
</div>
<script>
function Change() {
var tmp = document.getElementById("i1");
var t = tmp.innerText;
var s = t.charAt(0);
var l = t.substring(1,t.length);
var newt = l+s;
tmp.innerText = newt;
}
setInterval("Change()",1000);
</script>
</body>
</html>

序列化与反序列化


将对象转化为字符串
JSON.stringify()
将字符串转化为对象
JSON.parse()

转义


客户端（cookie） ====>> 服务器端
从服务器端获取数据后将其转义后保存在cookie中
decodeURL()
URL中未转义的字符
decodeURLComponent()
URL组件中未转义的字符
encodeURL()
URL中的转义字符
encodeURLComponent()
URL转义组件中的字符
escape()
对字符串转义
unescape()
给转义字符串解码
URLError()
有URL的编码和解码方法抛出

eval


python:
val = eval(表达式)
exec(执行代码)
JavaScript：
eval

时间


Date类
var d = new Date();
d.getXXX()
获取时间
d.setXXX()
设置时间

作用域


其他语言，以代码块作为作用域
public void Func(){
if(1==1){
string name="Java";
}
console.writeline(name);
}
Func()
//报错
Python，以函数作为作用域
def Func():
if 1==1:
name="Jave"
print(name)
Func()
JavaScript，以函数作为作用域
function Func(){
if(1==1){
var name="Java";
}
console.log(name)
}
Func()
=======函数作用域在编译时就已经创建======
=======档函数嵌套时，形成函数作用域链，并且编译时就创建=======
=======函数中局部变量在编译时会先进行声明但是不进行赋值，只有在程序执行到赋值语句时才赋值=======

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function t1(age) {
console.log(age);
// function
var age = 27;
console.log(age);
// 27
function age() {};
console.log(age)
// 27
}
t1(3);
</script>
</body>
</html>

JavaScript面向对象


function foo(n){
this.name = n;
this.sayName = function(){
console.log(this.name);
}
}
var obj = new foo("wo");
obj.name
a.
this 代指对象（Python self）
b.
创建对象时，new 函数()
原型：
function Foo(n){
this.name = n;
}
Foo.prototype={
"sayName":function(){
console.log(this.name);
}
}

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
}
.c2{
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
width: 500px;
height: 400px;
background-color: white;
}
</style>
</head>
<body>
<div>
<input type="button" οnclick="Update()" value="展示">
<input type="button" οnclick="ChooseAll()" value="全选">
<input type="button" οnclick="ReverseAll()" value="反选">
<input type="button" οnclick="CancelAll()" value="取消">
<table id="t">
<thead id="th">
<tr>
<td>选择</td>
<td>主机</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>192.168.0.1</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>192.168.0.2</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>192.168.0.3</td>
</tr>
</tbody>
</table>
</div>
<div id="i1" class="c1 hide">
</div>
<div id="i2" class="c2 hide">
<input type="text" />
<input type="text" />
<input type="button" value="添加">
<input type="button" value="取消" οnclick="Dedate()">
</div>
<script>
function Update() {
document.getElementById("i1").classList.remove("hide")
document.getElementById("i2").classList.remove("hide")
}
function Dedate() {
document.getElementById("i1").classList.add("hide")
document.getElementById("i2").classList.add("hide")
}
function ChooseAll() {
var ch = document.getElementById("tb").children
for(var i=0;i<ch.length;i++){
ch[i].children[0].children[0].checked=true
}
}
function ReverseAll() {
var ch = document.getElementById("tb").children
for(var i=0;i<ch.length;i++){
if(ch[i].children[0].children[0].checked==true){
ch[i].children[0].children[0].checked=false
}else {
ch[i].children[0].children[0].checked=true
}
}
}
function CancelAll() {
var ch = document.getElementById("tb").children
for(var i=0;i<ch.length;i++){
if(ch[i].children[0].children[0].checked==true){
ch[i].children[0].children[0].checked=false
}
}
}
</script>
</body>
</html>

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.mainm{
background-color: #382eff;
}
.mainm .con{
background-color: white;
/*display: none;*/
}
</style>
</head>
<body>
<div>
<div id="t1" class="mainm" οnclick="ShowT('t1')">菜单1
<div class="con">内容1</div>
<div class="con">内容1</div>
<div class="con">内容1</div>
</div>
<div id="t2" class="mainm" οnclick="ShowT('t2')">菜单2
<div class="con">内容2</div>
<div class="con">内容2</div>
<div class="con">内容2</div>
</div>
<div id="t3" class="mainm" οnclick="ShowT('t3')">菜单3
<div class="con">内容3</div>
<div class="con">内容3</div>
<div class="con">内容3</div>
</div>
<div id="t4" class="mainm" οnclick="ShowT('t4')">菜单4
<div class="con">内容4</div>
<div class="con">内容4</div>
<div class="con">内容4</div>
</div>
</div>
<script>
function ShowT(nid) {
var cur_tag = document.getElementById(nid)
var tag_list = cur_tag.parentElement.children
for(var i=0;i<tag_list.length;i++){
for(var j=0;j<tag_list[i].children.length;j++){
tag_list[i].children[j].classList.add("hide")
}
}
for(var n=0;n<cur_tag.children.length;n++){
cur_tag.children[n].classList.remove("hide")
}
}
</script>
</body>
</html>

后台管理页面布局

-
菜单栏随着滚动条滚动
position：fixed
-
菜单栏不随着滚动条滚动(不用relative，只用absolute)
position：relative
position：absolute
-
图标素材
fontawesome

第一版

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p-header{
margin: 0;
height: 48px;
width: 100%;
background-color: #382eff;
}
.p-content{
position: fixed;
top: 50px;
left: 0;
background-color: black;
}
.p-content .b-content{
width: 20%;
min-width: 200px;
position: fixed;
left: 10px;
top: 60px;
bottom: 0;
background-color: red;
}
.p-content .b-body{
width: 78%;
position: fixed;
right: 0;
top: 60px;
bottom: 0;
background-color: aqua;
overflow: auto;
}
</style>
</head>
<body>
<div class="p-header"></div>
<div class="p-content">
<div class="b-content"></div>
<div class="b-body">
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
</div>
</div>
<div class="p-footer"></div>
</body>
</html>

第二版

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<style>
.p-header{
margin: 0;
height: 48px;
width: 100%;
background-color: #382eff;
}
.left{
float: left;
}
.right{
float: right;
}
.p-header .logo{
height: 48px;
width: 20%;
background-color: aliceblue;
text-align: center;
line-height: 40px;
}
.p-header .log{
z-index: 2;
position: relative;
height: 48px;
width: 15%;
background-color: brown;
line-height: 48px;
}
.p-header .log .user:hover .info{
display: block;
}
.p-header .log .user{
position: absolute;
left: 40%;
}
.p-header .log .user .img{
width: 40px;
height: 40px;
border-radius: 50%;
}
.p-header .log .user .info{
background-color: white;
width: 120px;
position: absolute;
margin-left: -30px;
margin-top: 0;
display: none;
}
.p-header .log .battery{
padding-left: 5%;
}
.p-content .b-content{
width: 20%;
min-width: 200px;
position: absolute;
left:0;
top: 50px;
bottom: 0;
background-color: red;
}
.p-content .b-body{
z-index: 1;
width: 80%;
position: absolute;
right: 0;
top: 50px;
bottom: 0;
/*background-color:blue;*/
/*overflow: auto;*/
}
</style>
</head>
<body style="margin: 0">
<div class="p-header">
<div class="logo left">
Hello world!
</div>
<div class="log right">
<a class="user">
<img class="img" src="1.jpg">
<div class="info left">
<div>我的信息</div>
<div>注销</div>
</div>
</a>
<div class="battery left">
<i class="fa fa-automobile" aria-hidden="true"></i>
<i class="fa fa-bell" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="p-content">
<div class="b-content"></div>
<div class="b-body">
<div style="background-color: greenyellow;margin: 0;">
<p style="margin: 0">hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
<p>hello anduafhuai</p>
</div>
</div>
</div>
<div class="p-footer"></div>
</body>
</html>