theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

aaaa

Browse Source
This commit is contained in:
asd
2021-06-03 10:52:41 +08:00
parent c5f18c6051
commit 907511778b
54 changed files with 3540 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
teaching/wanzhaoyi/hanshu.html Normal file
View File

@@ -0,0 +1,50 @@
<!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>
</head>
<body>
<script>
function jiemi(arr){
var newarr=[]
if(arr.length==4){
for(let i=0;i<arr.length;i++){
arr[i]=parseInt(arr[i])
arr[i]=(arr[i]+5)%10
}
console.log(arr)
newarr[0]=arr[3]
newarr[1]=arr[2]
newarr[3]=arr[0]
newarr[2]=arr[1]
}
console.log(newarr,"new")
}
function check(str){
var arr=str.split('.')
var res;
if(arr.length==4){
for(let i=0;i<arr.length;i++){
if(Number(arr[i])>0 && Number(arr[i])<255){
res=true
}else{
res=false
}
}
if(res){
console.log("是ipv4")
}else{
console.log("不是ipv4")
}
}else{
console.log("不合规")
}
}
</script>
</body>
</html>

58
teaching/wanzhaoyi/js/chuangjianduixiang.html Normal file
View File

@@ -0,0 +1,58 @@
<!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>
</head>
<body>
<script>
// 1. 字面量创建对象
var ahuang = {
kind: "dog",
food: "杂食",
kanjia: function () {
console.log("汪汪汪")
},
chaijia: function () {
console.log("二哈的胜利！")
}
}
// 2.工厂模式
function create(kind,food,kanjia,chaijia){
var newobj={}
newobj.kind=kind
newobj.food=food
newobj.kanjia=kanjia
newobj.chaijia=chaijia
return newobj
}
var fugui=create("dog","啥都吃",function(){
console.log("汪汪队立大功")
},function (){
console.log("狗肉店见")
})
console.log(ahuang)
console.log(fugui)
// 3.构造函数
function creator(kind,food,kanjia,chaijia){
this.kind=kind;
this.food=food;
this.kanjia=kanjia;
this.chaijia=chaijia
}
var dali= new creator("dog","杂食",function(){console.log("dali会看家")},function (){console.log("大力不拆家")})
console.log(dali)
</script>
</body>
</html>

39
teaching/wanzhaoyi/js/digui.html Normal file
View File

@@ -0,0 +1,39 @@
<!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>
<script>
// 递归 就是在函数内 调用自身
// 阶乘的函数
// 5的阶乘 = 5*4*3*2*1
// n的阶乘 = n*（n-1）*(n-2)*(n-3)...*1
// n*(n-1)*(n-1-1)*(n-1-1-1)*(n-1-1-1-1)....*1
function jc(n){
if(n==1){
return 1;
}else{
return n*jc(n-1)
}
}
// 4
// 4*jc(4-1) 4*jc(3)
// 4*jc(3) 4*3*jc(3-1)
// 4*3*jc(2)
// 4*3*2*jc(2-1)
// 4*3*2*jc(1)
// 4*3*2*1
var jiecheng=jc
jc=null
var res=jiecheng(5)
console.log(res)
</script>
</head>
<body>
</body>
</html>

42
teaching/wanzhaoyi/js/dom.html Normal file
View File

@@ -0,0 +1,42 @@
<!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>
</head>
<body>
<!--
dom
document.getElementById
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName("div")
-->
<div class="box">
<p>hello</p>
<span>aaa</span>
</div>
<script>
var box=document.getElementsByTagName("div")
console.log(box[0].innerText)
console.log(box[0].innerHTML)
// innerHtml => 带着html代码来的 解析html 代码
// box[0].innerText="前端"
console.log(box[0].children)
var zi=document.getElementsByTagName("span")
console.log(zi[0].parentNode)
// 创建节点
var ele=document.createElement("div")
ele.innerHTML="消灭人类暴政，世界属于三体"
console.log(ele)
ele.setAttribute("style","color:red")
box[0].append(ele) //插入元素
zi[0].remove() //删除元素
</script>
</body>
</html>

48
teaching/wanzhaoyi/js/duixiang.htm Normal file
View File

@@ -0,0 +1,48 @@
<!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>
<script>
// 对象
var obj={
name:"刘亦菲",
age:28,
sex:"女",
hobby:["看电影","听音乐","做美食"],
waimao:"长头发大眼睛小嘴巴",
zuofan:function(){
console.log("我在做饭")
},
shuawan:function(){
console.log("我在刷碗")
},
xuexi:function(){
console.log("我在学习")
}
}
// 属性：name age sex hobby waimao
// 方法 zuofan shuawan xuexi
obj.kandianying=function(){
console.log("看电影啦")
}
console.log(obj)
obj.name="杨幂"
obj.shuawan=function(){
console.log("你去刷碗")
return 123
}
var t=obj.shuawan()
console.log(t,9990)
delete obj.xuexi
</script>
</head>
<body>
</body>
</html>

40
teaching/wanzhaoyi/js/hanshu.html Normal file
View File

@@ -0,0 +1,40 @@
<!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>
<script>
// 创建一个函数
function add(x,y){
return x+y
}
// 2 函数表达式
// x,y ===> 形参
var add=function (x,y){
console.log(arguments.length) //函数参数的个数
console.log(arguments.callee)
return x+y
}
// add(1,1)
// add // => 函数体
// add(1,2) // => 函数执行 并返回执行结果（返回值）
// 1,2 是add函数的实参
// 立即执行函数
(function (e){
console.log("我是匿名函数啦啦啦啦啦啦")
}(34))
// 立即执行函数 的执行括号加在里面！！！！！
</script>
</head>
<body>
</body>
</html>

22
teaching/wanzhaoyi/js/jisuanqi.html Normal file
View File

@@ -0,0 +1,22 @@
<!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>
<script>
function add(){
var num=document.getElementsByClassName("num")
console.log(num[0].value,'+',num[1].value)
console.log(Number(num[0].value)+Number(num[1].value))
}
</script>
</head>
<body>
<input type="text" value="" class="num">
<input type="text" value="" class="num"><br/>
<button onclick="add()">加</button>
</body>
</html>

44
teaching/wanzhaoyi/js/jsjichu.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" contrent="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./jsjichu.js"></script> 外部引入-->
<script>
//js代码
// 单行注释
/*
多行注释
hivskj
*/
// js 组成
// ESMAScript(核心)
// DOM(文档对象模型) 操作dom节点
// BOM(浏览器对象模型) 浏览器相关信息
</script>
</head>
<body>
<span>hello</span>
<script>
// alert("这是弹窗")
// 带输入框的弹窗 带确定取消的弹窗
document.write("你好") //打印在页面上
console.log("javascript")
// 变量： 值可以改变 var let
// 常量： 值不能改变 定义的时候需要赋初始值 const
// 变量命名规则
// 1. 只能包含 数字 字母 下划线 $
// 2. 不能用数字开头
// 3. 不能用js关键字保留字
var span=7
console.log(span)
</script>
</body>
</html>

42
teaching/wanzhaoyi/js/shujuleixing.html Normal file
View File

@@ -0,0 +1,42 @@
<!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>
<script>
// js 数据类型
// 基本数据类型 ：number string boolean undefined null
// 复杂数据类型: object
// var arr=new Array()
// var fn=new Function()
// 基本数据类型和复杂数据类型的区别
// 检测数据类型
// 由低到高 typeof instanceof Object.prototype.tostring.call
// typeof instanceof Object.prototype.toString.call
var a=9
var type=Object.prototype.toString.call(a)
console.log(Object.prototype.toString.call([1,2,3,4]))
console.log(Object.prototype.toString.call(9),"mmmn")
console.log(type)
console.log(9 instanceof Number)
console.log(new Number(9) instanceof Number)
console.log([1,2,3,4] instanceof Array)
console.log(function fn(){} instanceof Function)
// instanceof 用法 被检测的值 instanceof 猜测的数据类型
// 返回的是true/false
var key=123
console.log(typeof key)
console.log(typeof null)
console.log(typeof undefined)
console.log(typeof [4,3,1])
console.log(typeof function fm(){})
</script>
</head>
<body>
</body>
</html>

55
teaching/wanzhaoyi/js/shuzu.html Normal file
View File

@@ -0,0 +1,55 @@
<!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>
<script>
// 数组 =》集合
// 创建数组
var arr=[1,2,3,4,5,6] //数组的标志是[]
arr.splice(2,1)
arr.splice(2,0,3)
var arr1=[[11,12,13],[22,23],[[333,444,555]]]
// console.log(arr[0])
// console.log(arr1[0][1])
// 数组访问元素 数组名 +[下标] 下标从0开始 依次递加
// 遍历所有的数组元素
// 1.for循环
// for(var i=0;i<arr.length;i++){
// console.log(arr[i])
// }
// for(var i=0;i<arr1.length;i++){
// console.log(arr1[i] instanceof Array)
// if(arr1[i] instanceof Array){
// for(var m=0;m<arr1[i].length;m++){
// console.log(arr1[i][m])
// if(arr1[i][m] instanceof Array){
// console.log("xia")
// for(var n=0;i<arr1[i][m].length;n++){
// console.log(arr1[i][m][n])
// }
// }
// }
// }
// }
// 2. for in 循环
for(var key in arr){
console.log(key,arr[key])
}
// key 键 0 1 2...
// arr[key]值 1 2 3..
//数组方法
</script>
</head>
<body>
</body>
</html>

45
teaching/wanzhaoyi/js/yuanxinglian.html Normal file
View File

@@ -0,0 +1,45 @@
<!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>
<script>
function timi(){
this.start=function(){
console.log('timi')
}
}
var tianmei=new timi()
function create(age,name,hobby){
this.age=age;
this.name=name;
this.hobby=hobby
}
create.prototype=tianmei
create.prototype.run=function(){
console.log("我会跑")
}
// create.prototype.timi=new timi();
console.log(create.prototype)
var zhansan = new create("24","zhansan","book")
var xiaoqiao=new create("18","小乔","蹲草")
console.log(zhansan)
zhansan.run()
xiaoqiao.run()
// console.log(zhansan.__proto__)
// 对象访问原型是通过 __proto__ 属性
// 函数访问 原型是通过 prototype属性
</script>
</head>
<body>
</body>
</html>

34
teaching/wanzhaoyi/shijian.html Normal file
View File

@@ -0,0 +1,34 @@
<!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>
</head>
<body>
<!-- <div onclick="keyuo()"></div> -->
<script>
var shenti = document.getElementsByTagName("body")[0]
// document.body => 选中body
console.log(shenti);
// document 首字母不大写
var ele = document.createElement("div");
// setattribute
// 不要在html里面用关于样式的属性
ele.setAttribute("style","width:100px;height:100px;background-color:red")
ele.innerHTML="hello"
console.log(ele)
shenti.append(ele)
// ele.onclick=function(){
// alert("world")
// }
ele.addEventListener("click",function(){
alert("world")
})
</script>
</body>
</html>

239
teaching/wanzhaoyi/suning.html Normal file
View File

@@ -0,0 +1,239 @@
<!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>
*{
margin: 0;
padding:0
}
.nav{
background: #f5f5f5;
height: 35px;
}
.daohang{
width: 1190px;
margin:0 auto;
}
.nav-item{
float: left;
width:85px;
/* height:35px; */
list-style: none;
text-align: center;
cursor:pointer;
line-height: 35px;
color:#666;
font-size: 12px;
/* background: gold; */
}
.nav-item:hover{
background-color: white;
}
.right li{
float:right
}
.nav_bottom{
width:93%;
margin:0 auto;
border: 1px solid #666;
overflow: auto;
display: none;
/* visibility: hidden; //可见还是不可见 */
}
.nav_b_1l{
float: left;
padding-left: 20px;
}
.nav_b_1r{
margin-top: 21px;
float: left;
margin-left:30px;
}
.title{
font-weight: bold;
}
.nav_b_1 dd{
margin-top: 5px;
}
.nav_b_1{
padding-right: 30px;
border-right: 1px solid red;
overflow: auto;
float: left;
font-size: 12px;
}
</style>
<style>
.tab{
width: 450px;
overflow: auto;
/* padding-bottom: 10px; */
border-bottom: 1px solid #666;
}
.tab-item{
float: left;
margin-left: 40px;
cursor: pointer;
padding-bottom: 10px;
border-bottom: 2px solid #666;
}
.selected{
border-bottom: 2px solid red;
}
</style>
<script>
function enter(){
// console.log("enter")
var frame=document.getElementsByClassName("nav_bottom");
console.log(frame)
frame[0].setAttribute("style","display:block")
}
function out(){
// console.log("enter")
var frame=document.getElementsByClassName("nav_bottom");
console.log(frame)
frame[0].setAttribute("style","display:none")
}
function xz(e){
console.log(e)
var tablist=document.getElementsByClassName("tab-item")
for(var i=0;i<tablist.length;i++){
console.log(tablist[i],11)
tablist[i].setAttribute("class","tab-item")
}
tablist[e].setAttribute("class","tab-item selected")
// setAttribute(属性名,属性值) 给选中元素加属性
// 不能用for in 循环 他会把对象多余的属性或者方法都取出来
}
</script>
</head>
<body>
<div class="nav">
<div class="daohang">
<ul class="left">
<li class="nav-item" onmouseover="enter()" onmouseout="out()">网站导航</li>
<li class="nav-item">网站导航</li>
<li class="nav-item">网站导航</li>
</ul>
<ul class="right">
<li class="nav-item ">网站导航6</li>
<li class="nav-item">网站导航5</li>
<li class="nav-item">网站导航4</li>
<li class="nav-item">网站导航3</li>
<li class="nav-item">网站导航2</li>
<li class="nav-item">网站导航1</li>
</ul>
</div>
</div>
<div class="nav_bottom">
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
</div>
<div class="tab">
<p class="tab-item selected" onclick="xz(0)">全部</p>
<p class="tab-item" onclick="xz(1)">待付款</p>
<p class="tab-item" onclick="xz(2)">待发货</p>
<p class="tab-item" onclick="xz(3)">待收货</p>
<p class="tab-item" onclick="xz(4)">待评价</p>
</div>
</body>
</html>

155
teaching/wanzhaoyi/yubianyi.html Normal file
View File

@@ -0,0 +1,155 @@
<!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>
<script>
// var a=1
// function fn(e){
// var b=1
// c=0
// var a="l"
// console.log(window.a)
// }
// fn("a")
// console.log(e)
// console.log(c)
// console.log(b)
// a 全局变量 全局作用域
// b 局部变量（局部作用域）
// GO{
// a:undefined,
// fn:function(){}
// }
// AO{
// b:undefined,
// c:undefined,
// a:undefined,
// e:undefined
// }
// AO{
// b:undefined,
// c:undefined,
// a:undefined,
// e:"a"
// }
// AO{
// b:undefined,
// c:undefined,
// a:undefined,
// e:"a"
// }
// js 运行三部曲：语法分析 预编译 解释执行
// function fn1(){
// console.log(a) //window.a
// var a=1 //window.a
// // console.log(a)
// }
// fn1()
//AO{}
//AO{
// a：undefined==> 1
// }
// GO{
// fn:function
// }
// 预编译
// 1.分为 全局（GO）和局部 (AO)
// 2.发生什么（AO）
// 1. 创建AO对象
// 2. 去找形参 变量声明 =>undefined
// 3. 形参实参相统一
// 4. 找函数声明 值赋予函数体
// function fn(a) {
// console.log(a); function a() { }
// var a = 666;
// console.log(a); 666
// function a() { }
// console.log(a); 666
// var b = function () { };
// console.log(b); function() { }
// function c() { }
// }
// fn(1);
// AO{}
// AO{
// a:undefined,
// b:undefined,
// }
// AO{
// a:1,
// b:undefined,
// }
// AO{
// a:Function,
// b:undefined,
// c:function
// }
var a = 1;
console.log(a);
function test(a) {
console.log(a);
var a = 123;
console.log(a);
function a() { }
console.log(a);
var b = function () { }
console.log(b);
function d() { }
}
var c = function () {
console.log("I at C function");
}
console.log(c);
test(2);
// AO{}
// AO{
// a:undefined,
// b:undefined,
// c:undefined
// }
// AO{
// a:2,
// b:undefined,
// c:undefined
// }
// AO{
// a：function，
// d:function,
// b:undefined,
// c:undefined
// }
</script>
</head>
<body>
</body>
</html>