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

55
历届学生/罗朝/2019-05-04/event.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 事件</title>
</head>
<body>
<!-- <button onclick="buttonClick()" >点我</button> -->
<button>点我</button>
<script>
// 第一种定义事件的方法
// 不好的地方：
// function buttonClick() {
// alert("不要点我")
// }
// 第二种定义事件的方法
//
// document.querySelector("button").onclick = function () {
// document.querySelector("button").innerText = "不要点我1";
// }
// 第三种定义事件的方法
// document.querySelector("button").addEventListener("click",function(){
// alert(1)
// })
// document.querySelector("button").addEventListener("click",function(){
// alert(2)
// })
// 使用js获取元素的几种方法
// document.getElementById
// document.getElementsByClassName
// document.getElementsByTagName
// document.getElementsByName
// document.querySelector(".name p");
// document.querySelectorAll(".name p");
</script>
</body>
</html>

82
历届学生/罗朝/2019-05-04/function.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>function</title>
</head>
<body>
<script>
// 定义了一个方法
function getUsername(price,color) {
var newcart = "你给了我"+ price + "万元钱，你想买"+color+"色的车！！";
return newcart
}
// 使用 函数名()
//getUsername()
// 函数名() 表示立即执行函数里面的代码
// 函数名 表示 把函数里面的所有代码块 作为参数赋值给其他的变量
// var names = getUsername;
// names()
// 方法 分为两类：
// 按照参数进行分类
// 1: 无参函数
// 2: 有参函数
let mycart = getUsername(120,'黑');
console.log(mycart);
// 按照是否具有函数名分类
// 1:匿名函数
// 2:正常的函数
// var getcart = function () {
// console.log("获取车的函数");
// }
// function getcart () {
// console.log("获取车的函数");
// }
// getcart()
// var a = 1;
// // var b = 2
// function carts () {
// var b = 2;
// // b = 2;
// console.log(b)
// }
// console.log(a) // 1
// carts() // 2
// console.log(b) // 2
// 定义在函数内部的变量，他是那个函数独有的，作用域仅限在函数内部使用，外部无法使用
// 变量 有作用域
// 局部作用域（变量）
// 全局作用域（变量）
// 当不使用var来定义变量的时候，浏览器会把变量进行变量提升，提升到全局
</script>
</body>
</html>

80
历届学生/罗朝/2019-05-04/index.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>对象 object</title>
</head>
<body>
<script>
// var obj = new Object();
// obj.names = "张三"
// obj.age = "18"
// console.log(obj);
// var obj = new Object({
// names: '张三',
// age: "18"
// });
// var obj = {
// names: '张三',
// age: "18"
// }
// console.log(obj);
var cart = {
price: '25万',
color: 'red',
speed: '7',
opendoor: function() {
console.log("打开车门");
},
start: function () {
console.log("点火");
},
run: function () {
console.log("上路跑");
}
}
cart.opendoor()
cart.start()
cart.run()
// json
// 概念 object + array
// 他是一种描述数据格式和结构的方法，以前用 xml
// 作用：
// 前后端分离后，后端把数据构造成json格式给前端，前端拿到json渲染页面
var json1 = {
status: 200,
result: [
{
id: 1,
title: '今天天气很好'
},
{
id: 2,
title: '今天天气很好2222'
}
]
}
console.log(json1.result[0].title);
</script>
</body>
</html>

40
历届学生/罗朝/2019-05-04/案例/hao123.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>乞丐版hao123</title>
</head>
<body>
<select class="search-list" id="">
<option value="null">--请选择搜索引擎--</option>
<option value="https://www.baidu.com/s?wd=">百度</option>
<option value="https://www.google.com/search?q=">谷歌</option>
<option value="https://www.sogou.com/web?query=">搜狗</option>
<option value="https://yandex.com/search/?text=">Yandex</option>
</select>
<input type="text" placeholder="请输入关键词">
<input type="button" value="搜索">
<script>
document.querySelector("input[type='button']").onclick = function () {
var select = document.querySelector(".search-list");
var select_value = select.options[select.selectedIndex].value;
var keyword = document.querySelector("input[type='text']").value
if(select_value == "null" || keyword.length == 0) {
alert("搜索引擎和关键词都需要填写")
}else {
open(select_value+keyword)
}
}
</script>
</body>
</html>

49
历届学生/罗朝/2019-05-04/案例/login.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户登录</title>
</head>
<body>
<div class="login">
<input class="username" type="text" placeholder="请输入用户名"> <br>
<input class="userpwd" type="password" placeholder="请输入密码"> <span>显示/隐藏</span> <br>
<button>登 录</button>
</div>
<script>
var showstatus = true;
document.querySelector("button").onclick = function () {
var username = document.querySelector(".username").value;
var userpwd = document.querySelector(".userpwd").value;
if (username == "2271608011" && userpwd == '123456') {
alert("login success")
}else {
alert("login error")
}
}
document.querySelector("span").onclick = function () {
if(showstatus){
//console.log("显示密码");
(document.querySelector(".userpwd")).setAttribute("type","text");
showstatus = false
}else {
//console.log("隐藏密码");
(document.querySelector(".userpwd")).setAttribute("type","password");
showstatus = true
}
}
</script>
</body>
</html>

100
历届学生/罗朝/2019-05-04/案例/tabs.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tabs</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.main{
width: 400px;
margin: 100px auto;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
padding: 5px 10px;
}
.tabs_content ul {
padding-left: 10px;
}
.tabs_content li {
display: none;
}
.content_on {
display: block !important;
}
.title_on {
color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="tabs_title">
<ul>
</ul>
</div>
<div class="tabs_content">
<ul>
</ul>
</div>
</div>
<script>
var title = [ '公告','论坛','规则','安全','公益' ]
var content = [ '公告的内容','论坛的内容','规则的内容','安全的内容','公益的内容' ]
var titleArray = document.querySelectorAll(".tabs_title li");
var contentArray = document.querySelectorAll(".tabs_content li");
// function changeTitle (index) {
// for (var i =0;i<titleArray.length;i++) {
// titleArray[i].className = ""
// contentArray[i].className = ""
// }
// titleArray[index].className = "title_on"
// contentArray[index].className = "content_on"
// }
function renderli () {
// 遍历所有元素绑定 onmouseover 事件
for (let i =0;i<titleArray.length;i++) {
titleArray[i].onmouseover = function () {
// 遍历所有元素清除样式
for (var j =0;j<titleArray.length;j++) {
titleArray[j].className = ""
contentArray[j].className = ""
}
// 为你悬浮的元素设置样式
titleArray[i].className = "title_on"
contentArray[i].className = "content_on"
}
}
}
renderli()
</script>
</body>
</html>

18
历届学生/罗朝/2019-05-04/笔记.txt Normal file
View File

@@ -0,0 +1,18 @@
对象
概念：对象是具有自身的属性和方法的集合
存储数据：
key: value
function ： 方法，函数
概念：函数 是程序中某些具有相同功能或者属性的代码的集合
事件：
概念：用户在页面上的一些交互操作，比如键盘，鼠标，浏览器的一些动作