bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
历届学生/韩想/每日课程/2020-08-09/function.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
</head>
<body>
</body>
<script>
// 函数（方法）作用：将代码进行分类（封装）
// 回调
// function UserName(name) {
// name("ddddd")
// }
// UserName( function(res) {
// console.log(res);
// })
// // 作用域
// var a = 2;
// function name() {
// var c = 1;
// console.log(c); // 1
// }
// name()
// console.log(a);
// console.log(c);
// function name () {
// console.log(arguments);
// }
// name(1,2,3,4,5,6,7,8,9)
</script>
</html>

106
历届学生/韩想/每日课程/2020-08-09/index.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var UserName = "张三"
const UserNames = "李四"
// 数据类型
// number，string，array，object， null，undefined，function， boolean
// var a = 1;
// var b = '2'; // "2"
// console.log(b-a); //
// + 两边都是number 加法
// + 只要有一个是string，拼接字符串
// - 没有特殊情况
// array 数组
// let aa = new Array();
// aa[0] = "1"
// aa[1] = "2"
// aa[2] = "3"
// console.log(aa);
// var aa = new Array(1,2,"dewdew");
// console.log(aa);
// var aa = [1,2,3]
// aa.unshift(4)
// console.log(aa);
// var obj = new Object();
// var obj = new Object({ name: '李兵', age: 1 });
var obj = {
name: '李兵',
age: 1,
like: ['骑车','编程'],
hello: function() {
console.log("hello")
}
}
// let a = Object.keys(obj)
// console.log(a);
// for(var i=0;i< a.length;i++) {
// console.log(obj[a[i]]);
// }
// for (var key in obj) {
// console.log(obj[key])
// }
var a = ['好','22','我的娃'];
// a.forEach(function(val,index,arr){
// //console.log(val);
// })
let b = ['3ds','3dsadc']
// for (var index = 0; index < b.length; index++) {
// a.push(b[index])
// }
// a.concat(b)
// console.log(a);
// 扩展运算符
// console.log( [ ...a, ...b ] );
// obj.hasOwnProperty("love") // true false
// let text = "name"
// obj.hello()
// console.log(obj.text);
// console.log(obj[text]);
// var a = 1, b = 2;
// console.log(++a); // 2
// console.log(b--); // 2
// console.log(b); // 1
// console.log( ++(a--) - ( (a++) - (--b) ) ); //
</script>
</html>

81
历届学生/韩想/每日课程/2020-08-09/tabs.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
.tab_title li {
margin-right: 15px;
}
.tab_title li,
.tab_content li {
float: left;
}
.tab_content li {
display: none;
}
.title_active {
color: red !important;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab_title">
<li class="title_active">百货</li>
<li>宠物</li>
<li>零食</li>
</ul>
<ul class="tab_content">
<li class="content_active">百货的内容</li>
<li>宠物的内容</li>
<li>零食的内容</li>
</ul>
</div>
</body>
<script>
var tabTitle = document.querySelectorAll(".tab_title li");
var tabContent = document.querySelectorAll(".tab_content li")
console.log(tabTitle);
// 循环遍历所有的tabs标题
tabTitle.forEach(function(val,index){
// 为三个tabs标题的li标签统一绑定上事件
val.onclick = function() {
// 循环遍历所有的tabs标题 把标题li标签上的class全部置空
tabTitle.forEach(function(v,i) {
// 清除标题li上的class
v.className = ""
// 清除内容li上的class
tabContent[i].className = ""
})
// 为你点击的那个标题的li标签加上激活样式
val.className = "title_active"
// 为你点击的那个内容的li标签加上激活样式
tabContent[index].className = "content_active"
}
})
</script>
</html>

130
历届学生/韩想/每日课程/2020-08-09/tabs优化.html Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
.tab_title li {
margin-right: 15px;
}
.tab_title li,
.tab_content li {
float: left;
}
.tab_content .tab_item {
display: none;
}
.title_active {
color: red !important;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab_title">
</ul>
<div class="tab_content">
</div>
</div>
</body>
<script>
// json 数据
var tabs = [
{
title: '百货',
content: [
{ text: '百货的内容1' },
{ text: '百货的内容2' },
]
},
{
title: '宠物',
content: [
{ text: '宠物的内容1' },
{ text: '宠物的内容2' },
{ text: '宠物的内容3' }
]
},
{
title: '生活',
content: [
{ text: '生活的内容1' },
{ text: '生活的内容2' },
{ text: '生活的内容3' }
]
},
];
var currentIndex = 0;
// 渲染tabs的标题
function RenderTitle() {
var ul = document.querySelector(".tab_title");
tabs.forEach(function(val, index, arr){
ul.innerHTML += `<li class="${ index == 0 ? 'title_active' : '' }">${val.title}</li>`
});
var li = document.querySelectorAll(".tab_title li");
li.forEach(function(c,r) {
c.onclick = function () {
li.forEach(function(e,v) {
e.className = ""
})
c.className = "title_active"
currentIndex = r
innerContent()
}
});
}
function RenderContent() {
// 完成第一步tab_item的渲染
var contentFather = document.querySelector(".tab_content");
tabs.forEach(function(v,i){
contentFather.innerHTML += `<div class="tab_item ${ i == 0 ? 'content_active' : ''}"></div>`
});
innerContent();
}
function innerContent() {
var tabItem = document.querySelectorAll(".tab_content .tab_item")
tabItem.forEach(function(t,b){
t.className = "tab_item"
});
tabItem[currentIndex].className = "tab_item content_active";
if (tabItem[currentIndex].innerHTML.length == 0) {
tabs[currentIndex].content.forEach(function(v,i){
tabItem[currentIndex].innerHTML += `<p>${v.text}</p>`
});
}
}
RenderTitle()
RenderContent()
</script>
</html>

77
历届学生/韩想/每日课程/2020-08-09/百度搜索建议.html Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度搜索建议</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<input type="text" placeholder="输入关键词">
<ul>
</ul>
</body>
<script>
// => 箭头函数，function简写！！
// var name = fn() => {
// }
// var name = () => {
// }
var keyWordList = [
'今天', '今天天气不好', '天气是雨天', 'html', 'html学习', '不喜欢html',
'编程学习', '学习代码', '喜欢编程',
];
var newList = []
var input = document.querySelector("input");
var ul = document.querySelector("ul");
input.oninput = function () {
newList = []
if (input.value.length != 0) {
keyWordList.forEach(function (val, index) {
if (val.indexOf(input.value) > -1) {
// 获取 用户输入关键字在原字符串中的下标
let stringIndex = val.indexOf(input.value);
// 使用 substring 方法，提取 原字符串中 的 符合用户输入的字符
// let activeString = `<span style="color:red">${val.substring(stringIndex, stringIndex + input.value.length)}</span>`;
let activeString = `<span style="color:red">${input.value}</span>`;
// 替换原字符串中的关键词为带span的关键字
let newVal = val.replace(input.value, activeString)
newList.push(newVal)
}
});
ul.innerHTML = ""
newList.forEach(function (val, index) {
ul.innerHTML += `<li>${val}</li>`
})
console.log(newList);
} else {
ul.innerHTML = ""
}
}
</script>
</html>

13
历届学生/韩想/每日课程/2020-08-09/笔记.txt Normal file
View File

@@ -0,0 +1,13 @@
1：document dom操作
2：window bom 操作
变量：能够被重新赋值的叫变量
常量：不能被修改的
es5 // 低版本js语法
es6,7,8,9 高版本的js语法