first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,46 @@
<!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>
<p class="ddddd" onclick="demos()"> 点我触发事件 </p>
<button class="btn1">我是按钮</button>
<button class="btn2">我是按钮2</button>
<script>
// 用户进行某项操作
// 浏览器有两"棵树"bom(window)dom(document)
// 通过js操作浏览器(刷新,打开窗口)bom
// 通过js操作页面上的html(显示隐藏元素,修改元素颜色)dom
function demos () {
alert("事件被触发")
document.querySelector(".ddddd").innerText = "哈哈哈哈"
document.title = "的回调古尔丹股权"
open("https://www.runoob.com/js/js-events.html")
}
document.querySelector(".btn1").onclick = function () {
alert(1)
}
// document.querySelector(".btn2").addEventListener("click", function() {
// alert(22222)
// })
</script>
</body>
</html>

View File

@@ -0,0 +1,146 @@
<!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>
<script>
// 变量 在计算机内存中存储但是可被改变的数据
// 变量定义var 变量名称;
var ColorRed = "dddd";
// 变量定义后 可以对他进行 赋值
console.log(ColorRed)
// 变量起名字需要遵循一个规则:
// 不能以数字或者特殊符号开头(_ , $),一般以字母开头
// 变量命名区分大小写
// 一般变量名称需要具有含义(英文单词来命名)
// 最好遵循驼峰命名法
// 变量的类型
// stringnumberboolean(布尔, true false)NullUndefined
// ArrayObjectfunction
var name = "刘合群"
console.log(typeof name)
var price = 100
console.log(typeof price)
var a = true
console.log(typeof a)
// 一些具有相同特征或者作用的数据的集合
// 数组定义
// 1
// var classRom = new Array()
// classRom[0] = 121
// classRom[1] = 123
// classRom[2] = 124
// 2
// var classRom = new Array(121,123,124)
// 3
// var classRom = [121,123,124]
// var classRom = [
// [[129,130],[119,110]],
// [20,50,34]
// ]
// console.log(classRom)
// 对象是某个具体事物的特征或者作用的数据集合
// 定义1
// var car = new Object();
// car.color = "red"
// car.price = '20万'
// var car = new Object({
// color: "red",
// price: '20万'
// })
// var car = {
// color: 'red',
// price: '20万',
// start: function() {
// console.log("点火方法,可以启动车辆")
// }
// }
// console.log(car.price)
// function是某些为了完成同样功能的代码的集合
// 1 定义
function buyEat(money) {
return "我帮到你带了20块的炒饭"
}
// 2 使用
var result = buyEat(20)
console.log(result)
// 函数分为两种,有参数函数,无参函数
function resultss(a, b) {
return a + b
}
console.log( resultss(100,400) )
// 控制语句:控制程序运行流程的特殊代码
// if (if else), switchwhile(do while)for(for in, forEach, map)
// break, Continue
// if (2 == 3) {
// console.log("true")
// } else {
// console.log("false")
// }
// var names = 2
// switch (names) {
// case 1 :
// console.log(1)
// break;
// case 2 :
// console.log(2)
// break;
// default:
// console.log("错误")
// break;
// }
// for 可控制的去不断运行代码
// 求100以内所有数和
// var sum = 0;
// for(var i = 1; i <= 100; i++ ) {
// sum += i
// }
// console.log(sum)
// var j = 100
// while (j < 10) {
// console.log(j)
// j++
// }
// do {
// console.log(j)
// j++
// } while (j < 10);
// var list = [445,254,33,4354]
// for(var i = 0; i < list.length; i++) {
// console.log(list[i])
// }
</script>
</body>
</html>

View File

@@ -0,0 +1,48 @@
<!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>
<input type="text" placeholder="亲输入关键词">
<ul class="listItem">
</ul>
<script>
var keyWord = document.querySelector("input");
var list = [ '今天很热', '天气不好','html编程学习','学习更多知识','今天学js' ]
var newList = []
keyWord.oninput = function () {
newList = []
// 为了避免用户删除搜索框文字后产生的导致indexOf返回0进而 newList 存储list数据
if (keyWord.value.length != 0) {
// 遍历 搜索候选建议数组
for(var i = 0; i < list.length; i++) {
// 匹配用户搜索的词在 搜索候选建议数组 中是否有
if (list[i].indexOf(keyWord.value) > -1) {
// 如果有把单词放到新数组
newList.push(list[i])
}
}
Render()
}
}
// 渲染 newList 数组的数据到 html页面上
function Render () {
document.querySelector(".listItem").innerHTML = ""
newList.forEach(function(val){
document.querySelector(".listItem").innerHTML += `<li>${val}</li>`
})
}
</script>
</body>
</html>