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,118 @@
<!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>组件</title>
</head>
<body>
<div class="app">
<lb-header text="测试" :list-arr="newsList" @type="getData">
<template #text>
<span>text</span>
</template>
<template #right>
<span>right</span>
</template>
</lb-header>
<div class="content">内容部分</div>
<lb-footer></lb-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// var a = require("./index.js")
// 父子关系
// 父组件 ——> 子组件
// 基本数据类型 props
// 传html props 插槽
// 别名插槽
// 作用域插槽
// 子组件 ——> 父组件
// $emit
// 组件????
// 全局组件
Vue.component('lb-header', {
// 存放html代码
template: `
<div class="header">
<h2>{{text}}</h2>
<ul>
<li v-for="item,index in listArr" @click="liClick(item)">{{item.title}}</li>
</ul>
<div class="right">
<slot name="right"></slot>
</div>
<div class="text">
<slot name="text"></slot>
</div>
</div>
`,
// props: [ 'text' ],
props: {
text: {
default: '默认参数',
type: String,
required: true
},
listArr: {
default: () => [],
type: Array
}
},
data() {
return {
}
},
methods: {
liClick(item) {
this.$emit("type", item)
}
}
});
// 局部组件
var footer = {
template: `
<div class="footer">底部</div>
`,
data () {
return {}
},
methods: {
}
}
var vm = new Vue({
el: '.app',
data: {
test: '你好',
title: '首页',
newsList: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
]
},
mounted() {
console.log("mounted");
console.log(this.test);
},
methods: {
getData(item) {
console.log(item);
}
},
components: {
'lb-footer': footer
}
})
</script>
</html>

View File

@@ -0,0 +1,85 @@
<!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;
list-style: none;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<li :class="index == currentIndex ? 'active_title' : '' "
@click="changeActive(index)"
v-for="item,index in tabs">
{{ item.title }}
</li>
</ul>
<ul class="tabs_content">
<li :class="index == currentIndex ? 'active_content' : '' "
v-for="item,index in tabs">
{{ item.content }}
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tabs: [
{ id: 1, title: '首页', content: '首页 的内容' },
{ id: 2, title: '社会', content: '社会 的内容' },
{ id: 3, title: '财经', content: '财经 的内容' },
{ id: 4, title: '体育', content: '体育 的内容' },
]
},
methods: {
changeActive(index) {
console.log(index);
this.currentIndex = index
}
}
})
</script>
</html>

View File

@@ -0,0 +1,115 @@
<!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>Vue 基础学习</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h1 v-once>{{ test }}</h1>
<h2>{{ hello }}</h2>
<a :href="baidu">baidu</a>
<img :src="img" alt="">
<ul>
<li v-for="item,index in newsList" @click.stop.prevent="demos(index)">
{{ item.title }}
</li>
</ul>
<ul>
<li v-for="value,key in list">{{ key }} {{ value }}</li>
</ul>
<div v-html="htmlTest"></div>
<div v-if="vip == 1">vip1</div>
<div v-else-if="vip == 2">vip2</div>
<div v-else-if="vip == 3">vip3</div>
<div v-else>等级非法</div>
<div v-show="islogin">登录才可以查看</div>
<input type="text" v-model.trim="userName">
<button @click="login">点我</button>
<div>{{ jil }}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// v-bind 将data中的变量绑定到标签的属性上
// 简写 :
// v-for 可以遍历数组和对象
// v-html 显示 html 到网页上
// v-text 显示纯文本
// v-if -v-else
// v-show
// v-if 和 v-show 区别
// v-if 多分支的复杂情况进行判断 把不符合条件的html删除
// v-show 只适合简单情况 把不符合条件的html进行 display:none
// v-on:事件类型="事件处理函数"
// 简写:@事件类型="事件处理函数" @click="test"
// v-model 给输入框用的
// v-pre 原样输出
// computed 计算属性 当参与计算的数值未发生变化,第二次调用不进行计算而是返回上一次的结果
// 实现 get set 监听
// methods 存放方法
// watch 侦听器(监视器)
var vm = new Vue({
el: '.app',
data: {
test: '你好vue.js',
hello: '哈哈哈哈哈哈',
baidu: 'https://www.baidu.com/',
img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
newsList: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
],
list: { name: '刘兵', age: 18 },
htmlTest: '<h2><span>测试</span></h2>',
vip: 1, // 1 2 3
islogin: true,
userName: '',
},
methods: {
login() {
console.log(this.userName);
},
demos(index) {
console.log("demo 方法: ", index);
}
},
computed: {
jil() {
return 1000 * 100000000
}
},
watch: {
test(newvalue,oldvalue) {
console.log("oldvalue: ",oldvalue);
console.log("newvalue: ",newvalue);
}
}
})
</script>
</html>

View File

@@ -0,0 +1,189 @@
<!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>
.router-link-active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/index">首页</router-link>
<router-link to="/car">购物车</router-link>
<router-link to="/about">我的</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.min.js"></script>
<script>
const index = {
template: `
<ul>
<li @click="enterInfo(item.id)"
v-for="item,index in newsList">{{ item.title }}</li>
</ul>
`,
data() {
return {
newsList: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
],
}
},
methods: {
enterInfo(id) {
this.$router.replace({
name: 'info',
query: {
id: id
}
})
}
}
}
const info = {
template: `<div>info {{ id }}</div>`,
data() {
return {
id: null
}
},
created() {
this.id = this.$route.query.id
}
}
const about = { template: '<div>about</div>' }
const car = { template: '<div>car</div>' }
const login = {
template: `<div>
<h2>登录</h2>
<button @click="Login">点我登录</button>
</div>`,
methods: {
Login() {
// 发送接口后端返回token
var token = "sefwefewr345346456457657"
localStorage.setItem("token", token);
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
} else {
this.$router.replace({
path: "/index"
})
}
}
}
}
const routes = [
{
path: '/',
redirect: "/index",
meta: {
isLogin: false
}
},
{
path: '/index',
component: index,
meta: {
isLogin: false
}
},
{
path: '/info',
name: 'info',
component: info,
meta: {
isLogin: false
}
},
{
path: '/about',
component: about,
meta: {
isLogin: true
}
},
{
path: '/car',
component: car,
meta: {
isLogin: true
}
},
{
path: '/login',
component: login,
meta: {
isLogin: false
},
beforeEnter: (to, from, next) => {
if (localStorage.getItem("token") == null) {
next()
} else {
router.back()
next()
}
}
},
]
const router = new VueRouter({
routes,
// linkActiveClass: 'active'
})
router.beforeEach((to, from, next) => {
console.log("to: ", to);
// console.log("from: ", from);
// 表示需要登录
if (to.meta.isLogin) {
// 检查当前用户是否登录
// 已登录,放行
// 未登录,去登录
// 未登录,去登录
if (localStorage.getItem("token") == null) {
next({
path: '/login',
query: {
from: to.fullPath
}
})
} else {
next()
}
// 不需要登录
} else {
next();
}
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

View File

@@ -0,0 +1,84 @@
<!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>Vue 基础学习</title>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s;
}
.fade-enter,
.fade-leave-to
{
opacity: 0;
}
</style>
</head>
<body>
<div class="app">
<h2>{{ test | sl }}</h2>
<transition name="fade">
<div v-if="isShow">true</div>
</transition>
<button @click="isShow = !isShow ">点我</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var a = {
data() {
return {
page: 1,
totalpage: 1
}
},
methods: {
more() {
console.log("加载更多");
}
}
}
// 混入
// 作用用一种不会影响this指向的方式去封装代码
var vm = new Vue({
el: '.app',
mixins: [a],
data: {
test: '自定义指令学习',
isShow: true
},
created() {
console.log(this.more());
},
methods: {
},
computed: {
},
filters: {
sl(val) {
return val.substring(0, 3) + '..'
},
},
watch: {
}
})
</script>
</html>

View File

@@ -0,0 +1,102 @@
<!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>
.router-link-active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/index">首页</router-link>
<router-link to="/about">我的</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.min.js"></script>
<script>
const index = {
template: `
<ul>
<li @click="enterInfo(item.id)"
v-for="item,index in newsList">{{ item.title }}</li>
</ul>
`,
data() {
return {
newsList: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
],
}
},
methods: {
enterInfo(id) {
this.$router.replace({
name: 'info',
query: {
id: id
}
})
}
}
}
const info = {
template: `<div>info {{ id }}</div>`,
data() {
return {
id: null
}
},
created() {
this.id = this.$route.query.id
}
}
const about = { template: '<div>about</div>' }
const routes = [
{
path: '/',
redirect: "/index"
},
{ path: '/index', component: index },
{
path: '/info',
name: 'info',
component: info
},
{ path: '/about', component: about },
]
const router = new VueRouter({
routes,
// linkActiveClass: 'active'
})
router.beforeEach((to, from, next) => {
console.log("to: ", to);
console.log("from: ", from);
// next();
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

View File

@@ -0,0 +1,46 @@
<!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 class="app">
<h2 ref="test">{{ test }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 生命周期
//
var vm = new Vue({
el: '.app',
data: {
test: '你好'
},
beforeCreate() {
console.log("beforeCreate");
console.log(this.test);
},
// 一般用来发送ajax
created() {
console.log("created");
console.log(this.test);
console.log(this.$refs.test);
},
mounted() {
console.log("mounted");
console.log(this.test);
console.log(this.$refs.test);
},
beforeUpdate() {
console.log("数据被更新了");
},
methods: {
}
})
</script>
</html>

View File

@@ -0,0 +1,78 @@
<!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>组件</title>
</head>
<body>
<div class="app">
<v-swiper :list="newsList">
<template #html="{ item }">
<img :src="item.src">
</template>
</v-swiper>
<v-swiper :list="dd">
<template #html="{ item }">
<a :href="item.href">{{ item.title }}</a>
</template>
</v-swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component('v-swiper', {
// 存放html代码
template: `
<div class="swiper">
<li v-for="item,index in list">
<slot name="html" v-bind:item="item"></slot>
</li>
</div>
`,
props: {
list: {
default: () => [],
type: Array
}
},
data() {
return {
}
}
});
// 局部组件
var vm = new Vue({
el: '.app',
data: {
newsList: [
{ id: 1, title: '新闻1', src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
{ id: 2, title: '新闻2', src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
{ id: 3, title: '新闻3', src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
],
dd: [
{ id: 1, title: '新闻1', href: 'https://www.baidu.com' },
{ id: 2, title: '新闻2', href: 'https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD' },
{ id: 3, title: '新闻3', href: 'https://www.bilibili.com/' },
]
},
mounted() {
},
methods: {
}
})
</script>
</html>

View File

@@ -0,0 +1,122 @@
原生js jquery
dom 操作
mvc
mmodel 数据vview 视图ccontroller 控制器)
vue.js react.js angular.js
去 dom 操作
mmodel 数据 ajax数据vview 页面) vmview and model
双向绑定
模块(组件)系统
插槽
选看
自定义指令
混入
过滤器
动画
Vue Router 路由
vue官方提供的 路由 管理工具
页面地址
www.baidu.com /index
www.baidu.com /about
路由模式:
路径变化的时候,页面不会刷新
hash
www.baidu.com/#/index?id=1
www.baidu.com/#/about
window.location.hash
onhashchange 监听地址栏的 hash 地址变化,然后拿到新的 hash地址然后去映射表中找到这个地址对应
的页面,然后把页面显示到指定位置
history
www.baidu.com/index
www.baidu.com/about
pushState() 和 replaceState()
补发代码实现的网址
有两种页面跳转的方式
query
www.baidu.com/index?id=1&page=1
:to="{ name: '/info', query: { id:item.id } }"
取参数this.$route.query.参数字段名
params
www.baidu.com/index/1/2
:to="{ name: '/info', params: { id:item.id } }"
取参数this.$route.params.参数字段名
注意: path: '/info/:id/:name',
$router vue-router 提供的方法
$route 获取路由信息
this.$router.push 跳转后,可以返回之前页面
xxx.replace 不能返回
导航守卫
全局导航守卫
beforeEach
路由导航守卫
beforeEnter
页面导航守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
vue.js
2.x
3.x
this 指向
setup(){
}
vue-cli 脚手架 开箱即用
vue-cli 2.x
vue-cli 3.x 以上

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>Vue 基础学习</title>
</head>
<body>
<div class="app">
<div v-demo="test">你好</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
document.title = binding.value
console.log("el: ",el);
console.log("binding: ",binding);
console.log("vnode: ",vnode);
}
})
var vm = new Vue({
el: '.app',
data: {
test: '自定义指令学习',
},
methods: {
},
computed: {
},
watch: {
}
})
</script>
</html>

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>div 结构学习</title>
</head>
<body>
<div class="header">
<div class="top">
<img src="" alt="">
<input type="text">
</div>
<div class="menu">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="content">
<div class="content_warp">
<div class="menu_lef"></div>
<div class="content_list"></div>
<div class="menu_right"></div>
</div>
</div>
<div class="footer">
<div class="footer_top">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="code">
<h2>扫码</h2>
<img src="" alt="">
</div>
</div>
<div class="footer_bottom">
Copyright © 2013-2022 菜鸟教程 runoob.com All Rights Reserved. 备案号闽ICP备15012807号-1
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,128 @@
<html>
<head>
<meta charset="UTF-8" />
<title>html学习</title>
<meta name="description" content="这是我的第一个html网站">
</head>
<body>
<h1 title="提示文字">1</h1>
<h2>1</h2>
<h3>1</h3>
<h4>1</h4>
<h5>1</h5>
<h6>1</h6>
<img title="提示文字" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片无法加载" />
<input type="text" placeholder="请输入用户名">
<input type="number" placeholder="请输入手机号">
<input type="password" placeholder="请输入密码">
<h2>请选择你的性别:</h2>
<input type="radio" name="sss">
<input type="radio" name="sss">
<h2>请选择你的爱好:</h2>
汽车 <input type="checkbox" name="a">
编程 <input type="checkbox" name="a">
游戏 <input type="checkbox" name="a">
<h3>出生日期:</h3>
<input type="date">
<input type="file">
<input type="color">
<input type="button" value="登 录">
<input type="submit" value="登 录">
<button>登 录</button>
<form action="http://127.0.0.1/login.php" method="get">
<input type="text" placeholder="用户名" name="name">
<input type="password" placeholder="用户密码" name="pwd">
<input type="button" value="登 录 1">
<!-- submit 的作用是用来提交表单的 -->
<input type="submit" value="登 录 2">
</form>
<select name="" id="">
<option value="">-请选择-</option>
<option value="">合肥</option>
<option value="">南京</option>
<option value="">北京</option>
<option value="">苏州</option>
</select>
<a href="https://fanyi.baidu.com/#en/zh/padding" target="_blank">呵呵哈哈哈</a>
<a href="tel:15155145354">拨打客户电话</a>
<p>&nbsp;查看更多 &lt; </p>
<p>
上课的课件 <strong>强无敌</strong> 无群 <i>多同事B</i> 提交的新功能同事A的代码 强无敌无群 <big>多同事</big> B提交的 <small>新功能</small> 同事A的代码强无敌
<del>无群多同</del> 事B提交的新功能同事A的代码强无敌无群多同事B提 <em>交的新</em>
功能同事A的代码<br /><br />强无敌无群多同事B提交的新功能同事A的代码强无敌无群多同事B提交的新功能同事A的代码
</p>
<!-- 无序列表 重复性的布局结构-->
<ul>
<li>无序列表 1</li>
<li>无序列表 2</li>
<li>无序列表 3</li>
<li>无序列表 4</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表 1</li>
<li>有序列表 2</li>
<li>有序列表 3</li>
<li>有序列表 4</li>
</ol>
<div>div 标签??? 用来组织其他标签的</div>
<table border="1">
<tr>
<th> 标题</th>
<th> 价格</th>
</tr>
<tr>
<td>html</td>
<td>10元</td>
</tr>
<tr>
<td>css</td>
<td>20元</td>
</tr>
<tr>
<td>js</td>
<td>100元</td>
</tr>
</table>
<video src="https://www.runoob.com/try/demo_source/movie.mp4" loop poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" controls muted></video>
<audio src=""></audio>
</body>
</html>

View File

@@ -0,0 +1,131 @@
学的是什么?
web 前端开发
html 标签 h1
人体骨骼
实现网页的排版和布局
css 层叠样式表
化妆品美化html的
javascript (js) 脚本
人的思想
网站的功能,网页特效
web 后端开发phpjavapythongo.net(c#), nodejsruby + 数据库
前端:
以前:网站的页面 美工
前端工资3000 - 5000
nodejs 命运的转折点(留坑)
现在大前端的年代nodejs作为基石页面手机appandroid iosxxx小程序桌面应用后端开发
前端工资: 6000 - 不封顶
1-3
3-5
5-10
10-
github 全球最大的代码(同性交友网站)仓库 linus : 他是linux的作者
gitee 码云
git 代码的 版本控制 系统 (命令行的软件)
gui 图形界面
shell命令行
版本控制:
回滚
分支
dev 开发
test 测试
prod 上线
仓库:
远程仓库 https://gitee.com/bmycode/front-end-team
本地仓库
git init 初始化一个本地的git仓库
git add 文件名1 文件名2 文件名3 ...
表示选中哪些文件进行上传
git add -A 全选所有文件都上传
git commit -m "备注" 设置上传备注
git pull 拉取代码
git push 上传代码
mdmarkdown留坑
标签:
作用:实现网页上各种功能的 英文单词
<开始 英文字母> 你自己的文字 </结束 英文字母>
head 头部
body 主体 放内容
meta 元数据标签
form 表单 标签
<h1> 你好 </h1>
标签分类:
块标签 独占一行的标签可以被css 设置宽高
div h1~h6 ul li p
行标签 不独占一行的标签不可以被css 设置宽高
input img a span

View File

@@ -0,0 +1,108 @@
<!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>hao123</title>
</head>
<body>
<div class="header">
<div class="center">
<div class="header_top">
<div class="left">
<img src="" alt="">
<div class="dropmenu">
<img src="" alt="">
<span>导航</span>
<img src="" alt="">
<ul class="hidden_menu">
<li>
<div class="left_text">休闲娱乐</div>
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</li>
<li>
<div class="left_text">休闲娱乐</div>
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</li>
<li>
<div class="left_text">休闲娱乐</div>
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="right">
<img src="" alt="">
<span>一键登录</span>
<img src="" alt="">
<div class="search">
<input type="text">
<div class="submit">
<img src="" alt="">
<span></span>
</div>
</div>
</div>
</div>
<ul class="header_bottom">
<li>
<a href="">推荐</a>
</li>
<li>
<a href="">推荐</a>
</li>
<li>
<a href="">推荐</a>
</li>
<li>
<a href="">推荐</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="center"></div>
</div>
<div class="footer">
<div class="center"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,16 @@
1: 重复性布局用ul如果只有一个ul那么外面不需要包div如果li内部结构有细微差异没关系统一用ul
2: header content footer 里面都有center 居中层,你应该在居中层里面分左右,左中右
3 画结构的用div具体功能性的用某个标签例如imga
4 div 除了画结构,也可以用来显示文字 <div>登录/注册</div>
5: 边距较小的情况下 center 中不需要分左中右
6如果div内部只有一个标签那么div省略不写
7: 左右,左中右 这种画分方法,一般用在画结构
8 content 里面 按照功能来划分上下结构

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>
<style>
.box {
width: 200px;
height: 100%;
background: red;
/* margin: 10px; 上右下左 */
/* margin: 10px 20px; 上下 左右 */
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 10px 20px 30px 40px; */
/* margin-left: 30px; */
padding: 10px;
/* border: 20px solid #000; */
/* border-left: 5px solid blue ; */
}
</style>
</head>
<body>
<div class="box">
你好
</div>
</body>
</html>

View File

@@ -0,0 +1,3 @@
h1 {
color: plum !important;
}

View File

@@ -0,0 +1,21 @@
<!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>
h1 {
color: blue !important;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>你好1</h1>
</body>
</html>

View File

@@ -0,0 +1,73 @@
<!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>选择器</title>
<style>
.left span {
color: red;
}
.menu li:first-child,
.menu li:last-child {
color: green;
}
.menu li:nth-child(3n) {
color: royalblue;
}
.test>p {
color: bisque;
}
.test h2 p {
color: blue;
}
.right:hover {
background: red;
}
</style>
</head>
<body>
<div class="header">
<div class="center">
<div class="left">
<img src="" alt="">
<span>头部1</span>
<span>头部2</span>
</div>
<div class="test">
<p>1</p>
<h2>
<p>3</p>
</h2>
</div>
<ul class="menu">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
<li>标题7</li>
<li>标题8</li>
<li>标题9</li>
<li>标题10</li>
</ul>
<div class="right">登录 | 注册</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,18 @@
<!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>
p {
color: red;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,155 @@
css 层叠样式表
写法:
1内部写法 优先级最高
写在开始标签上
<p style="color:red;"></p>
2内链写法
<heade>
...
<style>
p {
color: red;
}
</style>
</heade>
3外链写法
css结构
选择器 {
css属性名: css属性值;
css属性名: css属性值;
css属性名: css属性值;
css属性名: css属性值;
}
11111111111111
选择器 (暂留坑)
标签(标签名)选择器
class 类选择器 .类名称
* 通配符 选择器 (优先级最低) 用来 清除 标签自带 的样式
id 选择器 #id名称
伪类选择器 :xxxxxx
111111111111111
css 优先级
!important 可以让元素的优先级最高
路径:
绝对路径
C:\Users\bmy\Desktop\front-end-team\每天课程\index.css
相对路径
C:\Users\bmy\Desktop\front-end-team\每天课程\2022-03-04\index.css
/ 根路径 C:\
./ 当前路径
../ 上一级
注意事项:
1避免使用公共类名 选中 标签
盒子模型
外边距 margin
内边距 padding
边框 border
内容 content
标准盒子模型:
元素的真实宽度 = 你写的 (宽度+左右padding+左右边框) + 高 (上下内边距+上下边框)
怪异盒子模型:
box-sizing: border-box;
常用css 属性:
list-style: none; 清除 li 标签的小圆点
text-decoration: none; 清除 a 标签的下划线
display:
inline 行内标签
block 块标签
inline-block 行内块标签
none 隐藏元素
font-size 字体大小
background 背景色
outline: none; 清除 input button 外边框
border-radius 圆角
overflow设置子元素宽高 超过 父元素 宽高后 如何显示
scroll 超过部分,以滚动的显示展示
hidden
居中的一些方式:
水平居中:
块标签的居中 margin: 0 auto;
必须在子元素上设置宽度
块标签内部行标签(文字) text-align: center;
垂直居中:
单行文字(行标签 & 文字)在父标签内部垂直居中 line-height: 就是父标签的高度
两个行内标签进行相互对其的时候使用的: vertical-align: bottom;
被定位的元素,如何设置垂直水平居中???
元素设置 50% 距离然后margin 减去自身宽度或者高度的一半
left: 50%;
margin-left: -8px
calc 数学计算函数,可以进行加减乘除运算

View File

@@ -0,0 +1,52 @@
<!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>css 浮动</title>
<style>
* {
margin: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: yellow;
}
.box_3 {
width: 300px;
height: 300px;
background: blue;
}
.father {
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="box box_1"></div>
<div class="box box_2"></div>
</div>
<div class="box_3"></div>
</body>
</html>

View File

@@ -0,0 +1,26 @@
<!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>overflow</title>
<style>
* {
margin: 0;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="box">
<p>奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,16 @@
浮动 float
作用 把块元素放一行
父元素的宽高 被内部子元素 撑开 的
当 子元素设置浮动后子元素漂浮走了所以父元素内部其实没有子元素所以高度为0
如何解决:
1可以给父元素手动设置高度
2overflow: hidden;

View File

@@ -0,0 +1,70 @@
<!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> css 定位 </title>
<style>
* {
margin: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
position: relative;
left: 299px;
top: 57px;
z-index: 4;
}
.box_2 {
background: yellow;
}
.box_3 {
background: green;
position: relative;
left: 40px;
top: 30px;
z-index: 4;
}
.box_3_1 {
width: 100px;
height: 100px;
background: black;
position: absolute;
left: 10px;
top: 10px;
z-index: 9999999999;
}
.box_4 {
background: blue;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
<div class="box box_3">
<div class="box_3_1"></div>
</div>
<div class="box box_4"></div>
</body>
</html>

View File

@@ -0,0 +1,12 @@
<!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>
</body>
</html>

View File

@@ -0,0 +1,30 @@
<!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>
@media screen and (min-width: 100px) and (max-width: 800px) {
body {
background: red;
}
h2 {
display: none;
}
}
@media screen and (min-width: 800px) {
body {
background: yellow;
}
}
</style>
</head>
<body>
<h2>你好我在pc上显示</h2>
</body>
</html>

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>弹性盒子</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
height: 45px;
background: #e0dbdb;
align-items: center;
justify-content: space-around;
}
ul li {
}
</style>
</head>
<body>
<ul>
<li>首页1</li>
<li>首页2</li>
<li>首页3</li>
<li>首页4</li>
<li>首页5</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,49 @@
媒体查询(响应式):
作用让pc网站兼容手机屏幕
html4
html5
弹性盒子
display: flex; 开启弹性盒子 (在最近的父标签上)
只要开启:子元素全部放一行
就算这一行放不下,也放一行
子元素如果没有设置高度,那么子元素高度自动继承父元素
总共13个css属性
6个用在父元素上
align-items 设置垂直方向的对其方式 center
justify-content 设置水平方向的对其方式
flex-wrap 决定元素是否换行
在子元素上设置宽度,人为创造一行放不下的情况
flex-direction 决定元素的排列方向 column
align-items 水平方向
justify-content 垂直方向
align-content
和 align-items 作用一样,但这个是设置多行的
6个用在子元素上
flex-grow 定义元素的放大比例,
flex-shrink 让元素不缩放
flex: 就是 flex-grow 简写

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>
<style>
* {
margin: 0;
padding: 0;
}
.box_1 {
float: left;
width: 3.75rem;
height: 3.75rem;
background: red;
}
.box_2 {
float: left;
width: 3.75rem;
height: 3.75rem;
background: black;
}
</style>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</head>
<body>
<div class="box_1"></div>
<div class="box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,12 @@
rem
和 px%emvw vh
一种响应式的尺寸单位,一般用在移动端(H5)开发。
你写的 1 rem * html上font-size 16px = 实际的px单位
1: 媒体查询
2: 用js动态计算

View File

@@ -0,0 +1,44 @@
<!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>Function</title>
</head>
<body>
</body>
<script>
// Function 函数 方法 作用:实现代码的封装,降低代码冗余提高复用率
// 定义 function 方法名(方法参数1,方法参数2,.....) { // 你的代码 }
// 返回结果 返回值 return
// 匿名函数
// function xyf(money, action) {
// console.log("你的室友收到了你给的钱:", money);
// return "衣服洗完了,给你衣服"
// }
// 变量作用域
// 局部作用域
// 变量提升
var xyf = function () {
b = 2;
console.log("1: ",b);
}
xyf();
// var a = xyf(10, "我的衣服");
// console.log(a);
</script>
</html>

View File

@@ -0,0 +1,88 @@
<!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>数组 array </title>
</head>
<body>
</body>
<script>
// 数组 Array :一组数据(什么数据都可以存)的组合
// 注意:数组里面的数据是通过下标来存储读取的
// 从 0 开始
// 定义:
// var arr = new Array()
// arr[0] = "你好"
// arr[1] = "你好2"
// arr[2] = "你好3"
// var arr = new Array("你好", "你好1", "你好2")
var arr = ["刘兵", 18, ["骑车", "编程"]]
// console.log(arr);
// 循环语句
// for (循环开始的变量;循环结束条件;循环的步增变量;) {}
// break 终止循环语句
// for (i = 1; i <= 10; i++) {
// console.log(i);
// if (i == 3) {
// break;
// }
// }
// for (var i = 0; i<arr.length; i++) {
// console.log(arr[i]);
// }
// while 循环
// do {
// } while (condition);
// 先上车,后补票
// var i = 0;
// while (i<arr.length) {
// console.log(arr[i]);
// i++
// }
// var a = 10
// do {
// console.log(a);
// } while (a <= 9);
// 模板字符串拼接 `在这里面的都是字符串,如果需要写变量,参考这个${我是变量}`
// ${变量名}
// 九九乘法表
var result = ""
for (var i = 1; i <= 9; i++) { // i = 2
for (var j = 1; j <= i; j++) { //
// result += " "+j + 'x' + i +"="+ j * i // 1x1=1
result += ` ${j}x${i}=${j * i}`
}
result+= "<br/>"
}
document.write(result)
</script>
</html>

View File

@@ -0,0 +1,63 @@
<!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>事件</title>
</head>
<body>
<button class="demo">登 录</button>
</body>
<script>
// 事件:在网页上完成的操作
// 构成:
// 事件源 事件类型 事件处理函数
// 写法
// dom document
// var button = document.querySelector("button");
// button.onclick = function () {
// alert("点我干什么1")
// }
// 方法的回调 (重点!!!等会提)
// button.addEventListener('click', function (){
// alert("点我干什么2")
// } )
// button.addEventListener('click', function (){
// alert("点我干什么3")
// } )
// 同步
//
// 异步 数据请求
// setTimeOut 延时 定时
// 如何拿到异步的返回值 回调函数
// function a(money, callback) {
// var c = 0;
// setTimeout(function () {
// c = money * 10;
// callback(c)
// }, 3000)
// // return c
// }
// a(10, function(hb) {
// console.log(hb);
// })
</script>
</html>

View File

@@ -0,0 +1,182 @@
<!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;
}
body {
height: 100%;
position: relative;
height: 100vh;
overflow: hidden;
}
img {
position: absolute;
width: 80px;
/* transition: all 0.2s; */
}
.alert {
position: fixed;
width: 100%;
height: 100%;
background: #0000008f;
display: flex;
align-items: center;
justify-content: center;
z-index: 8;
}
.alert .alert_warp {
width: 32%;
background: #fff;
height: 300px;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.alert_warp .alert_title {
display: flex;
justify-content: space-between;
height: 45px;
align-items: center;
border-bottom: 1px solid #e6e6e6;
}
.alert_title span {}
.alert_body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="alert hidden">
<div class="alert_warp">
<div class="alert_title">
<span>恭喜中奖</span>
<span class="close">x</span>
</div>
<div class="alert_body">
恭喜抽中9折优惠券
</div>
</div>
</div>
</body>
<script>
// 随机生成红包 + 红包移动
// 点击开红包,红包点击事件,中奖弹窗,所有红包暂停,关闭弹出的时候红包重新运动
var clientWidth = $("body").clientWidth, // 屏幕的宽度
clientHeight = $("body").clientHeight, // 屏幕的高度
alert = $("alert"), // 获取 alert里的hidden
text = $(".alert_body"),
close = $(".alert_title .close"), //绑定关闭按钮
chickImg = null, // 保存你点击的图片的虚拟dom对象
body = $("body"), // 红包放网页上
createdId = null; // 保存创建红包的定时器
function createdHb() { //创建红包
var x = parseInt(Math.random() * (clientWidth - 80)) //拿到屏幕X轴 (放里面)
var img = document.createElement("img"); //创建img对象
img.src = "./hb.png" // img地址
img.style = `
left: ${x}px;
top:-105px;
` //定位值 负屏幕高度
// 红包的点击事件
img.onclick = function () {
clickImg = img;
probability()
// 显示弹窗
alert.classList.remove("hidden")
// 停止生成红包
clearInterval(createdId)
// 停止页面上所有红包
allImgAction(2)
}
body.appendChild(img) //在网页创建红包
motion(img) //开始运行
}
// motion 运动
function motion(el) {
el.num = setInterval(function () { //设置定时器让红包移动
var topSet = parseInt(el.style.top) + 1 //一次移动的距离 1px
el.style.top = `${topSet}px`
if (topSet > clientHeight) { //top值大于屏幕高度删除红包
$("body").removeChild(el)
clearInterval(el.num) //清除定时器
}
}, 6)
}
//关闭弹窗
close.onclick = function () {
// 删除你点击的红包
$("body").removechild(chickImg)
alert.classList.add("hidden")
// 让页面上的其他红包重新运动起来
allImgAction(1)
// 开始重新创建红包
aotoCreated()
}
function probability() {
var prob = Math.random();
if (prob <= 0.021) {
text.innerText = `${prob}恭喜您中了1折优惠券`
} else if (0.021 < prob && prob <= 0.8) {
text.innerText = `${prob}恭喜您中了7折优惠券`
} else if (prob > 0.8) {
text.innerText = `${prob}恭喜您中了3折优惠券`
}
}
function allImgAction(type) {
var allImg = document.querySelectorAll("img");
allImg.forEach(function (v) {
type == 1 ? motion(v) : clearInterval(v.num)
})
}
function autoCreated() {
createdId = setInterval(function () { // setInterval 每隔一段时间执行一次代码
createdHb()
}, 1000)
}
autoCreated()
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,60 @@
<!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>js 基础学习</title>
</head>
<body>
</body>
<script>
// console 调试
// console.log("大青蛙多无群")
// documente dom 文档 dom 树
// console.log(document)
// console.log(window);
// alert("哈哈哈哈")
// js 基础语法
// 变量
// 含义:计算机中用来存储临时可以变得数值
// 作用:用来保存数值(类似用户的账户)
// 定义:用 var 关键字js里面内置一些单词这些单词具有特定的含义
// 格式var 变量名称 = 变量值 (可以不给变量值,如果不给 那么变量默认就是 undefined)
// 注意:先定义后使用
// 变量名称 的 规范:
// 变量名必须的字母,特$殊符号_ 开头
// 变量名区分大小写
// 变量名 不能中文
// 变量名 命名 最好采用 驼峰命名法
// 常量
// 含义:不能改变的
// 定义:用 const 关键字js里面内置一些单词这些单词具有特定的含义
const drr = "你好"
drr = "ddd"
console.log(drr);
var UserName = "刘兵",
a = "哈哈哈",
test = "sddd";
var ddd;
UserName = "张三"
console.log(ddd);
console.log(UserName);
</script>
</html>

View File

@@ -0,0 +1,95 @@
<!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>object</title>
</head>
<body>
</body>
<script>
// 对象 object
// 1存储数据的方式通过名字来存数据 key-value(值)
// 类似数组(下标来存数据的)
// 2类似后端编程语言中 类 class 的 概念
// 类:对现实生活中事物的描述(特征,功能)
// 封装 继承 多态 (一车多用)
// 构造函数 constructor 当类被初始化的时候,第一个默认运行的方法(代码) 析构函数
// 面向对象的编程
// 面向过程的编程
// 以前的js 都是 通过 object 来模拟 class
// 但是 js 是不断升级的语言 class
class people {
name = ""
age = ""
eat() { }
}
class peopleA extends people {
constructor() {
super()
this.name = "张三"
}
}
class peopleB extends people {
constructor() {
super()
this.name = "李四"
}
}
var a = new peopleA()
var b = new peopleB()
console.log(a.name);
console.log(b.name);
// var obj = new Object();
// obj.name = "刘兵"
// obj.age = 18
// console.log(obj);
// var obj = new Object({ name: '刘兵', age: 18 });
// var obj = {
// name: '刘兵',
// age: 18,
// like: [
// '骑车', '编程'
// ]
// }
// delete obj.like // 删除数据
// obj.test = "测试增加数据"
// console.log(obj);
// for in 循环
// for (var key in obj) {
// if (key == 'like') {
// for (var i = 0; i<obj[key].length; i++) {
// console.log( obj[key][i] );
// }
// } else {
// console.log(obj[key])
// }
// }
// console.log(obj.name);
</script>
</html>

View File

@@ -0,0 +1,63 @@
<!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>数据类型</title>
</head>
<body>
</body>
<script>
// 数据类型
// 基本类型:
// 字符串String 用双引号 "" 和 单引号'' 包裹起来的就是字符串
// 数字(Number) 0-9
// 布尔(Boolean) 真(true 1) 或者 假(false 0)
// 对空Null 不存在,没有
// 未定义Undefined 未赋值
// 现在不说(留坑)
// 引用数据类型:对象(Object)、数组(Array)、函数(Function)
var a = 1, b = "1", c = 3;
// 算数运算符 + - * /
// + + 号两边如果都是number 类型,可以直接数学运算
// + 号只要有一个(两个)不是number那么进行 字符串拼接
// console.log(a * b);
// ++ 让数值自己+1
// -- 让数值自己-1
// ++a 先让变量 + 1然后使用 变量
// a++ 先用变量,之后变量再+1
// console.log(
// ( (a++) + ( ++a - (b --) ) ) + (++b - (a++))
// );
// console.log(
// ( (--c)+ (++b-c) - (c++) ) + ( --a + (b--) + (a++) ) - ( a+b+c )
// );
// 赋值运算符
// += -= *= /= %=
// console.log(a-=c);
// 比较运算符
// =
// == 判断数值是否一样
// === (强等于) 判断数值 和 数据类型 是否都一样
// 逻辑运算符
// && || !
// && 表达式两边都为true才能返回true
// || 表达式两边只要有一个为true则返回 true
// console.log(a === b);
</script>
</html>

View File

@@ -0,0 +1,61 @@
<!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>条件语句</title>
</head>
<body>
</body>
<script>
// 控制语句
// if 条件语句
// 简写:三元运算
// var money = 10;
// money > 20 ? console.log("吃点好的") : console.log("吃拉面")
// if (money > 20) {
// console.log("吃点好的");
// } else {
// console.log("吃拉面");
// }
// var cj = 56;
// if (cj<60) {
// console.log("成绩不及格");
// } else if ( cj >= 60 && cj <= 70 ) {
// console.log("一般");
// } else if ( cj > 70 && cj <= 80 ) {
// console.log("普通");
// } else if ( cj > 80 && cj <= 90 ) {
// console.log("良好");
// } else if ( cj > 90 && cj <= 100 ) {
// console.log("优秀");
// } else {
// console.log("成绩不合法");
// }
// switch
// var name = "李低洼瞧得起我四搜索"
// switch (name) {
// case "张三":
// console.log("欢迎业主,给你开门");
// break;
// case "李四":
// console.log("不是业主,不给开门");
// break;
// default:
// console.log("你是谁?");
// break;
// }
</script>
</html>

View File

@@ -0,0 +1,49 @@
<!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>案例</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
background: red;
}
</style>
</head>
<body>
<button>点我</button>
<div class="box" style="width: 100px; height: 100px;"></div>
</body>
<script>
var button = $("button"),
box = $(".box");
button.onclick = function () {
box.style.width = `${parseInt(box.style.width) + 20}px`
box.style.height = `${parseInt(box.style.height) + 20}px`
console.dir(box);
}
button.oncontextmenu = function () {
box.style.width = `${parseInt(box.style.width) - 20}px`
box.style.height = `${parseInt(box.style.height) - 20}px`
// 阻止 浏览器的默认事件
return false;
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,4 @@
js : 思想 控制 html 和 css

View File

@@ -0,0 +1,35 @@
<!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>
<select name="" id="">
<option value="null">-请选择搜索引擎-</option>
<option value="https://www.baidu.com/s?wd=">百度</option>
<option value="https://www.google.com.hk/search?q=">谷歌</option>
<option value="https://www.so.com/s?q=">360搜索</option>
</select>
<input type="text" placeholder="输入关键字">
<button>搜索</button>
</body>
<script>
var button = document.querySelector("button"),
searchKeyWord = document.querySelector("input"),
select = document.querySelector("select");
button.onclick = function () {
var youSelect = select.selectedOptions[0].value;
if (youSelect == "null") {
alert("请选择搜索引擎")
} else {
open(`${youSelect}${searchKeyWord.value}`)
}
}
</script>
</html>

View File

@@ -0,0 +1,75 @@
<!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>留言</title>
<style>
* {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.main {
width: 400px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.main textarea {
width: 100%;
height: 100%;
resize: none;
}
.main .tips {
position: absolute;
right: 10px;
bottom: 10px;
}
.hui {
color: #cfc8c8;
}
.red {
color: red;
}
</style>
</head>
<body>
<div class="main">
<textarea name="" id=""></textarea>
<span class="tips hui">100/100</span>
</div>
</body>
<script>
var message = document.querySelector("textarea"),
tips = document.querySelector(".main .tips"),
total = 100;
message.oninput = function () {
var sy = total - message.value.length;
if (sy <= 0) {
// 超过限制
tips.innerText = "已达限制"
// replace 替换,将 hui 替换 成 red
tips.classList.replace("hui", "red")
message.value = message.value.substring(0, 100)
} else {
tips.innerText = `100/${sy}`
tips.classList.replace("red", "hui")
}
}
</script>
</html>

View File

@@ -0,0 +1,64 @@
<!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>搜索建议</title>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul></ul>
</body>
<script>
var result = [];
var list = [
'明天天气不好', '天气很好', '我的心情很好', '我不想学编程', '编程是我快乐',
'明天我想学习', '明天我们出去玩'
];
var mes = document.querySelector("input"),
ul = document.querySelector("ul");
mes.oninput = function () {
result = []
if (mes.value.length != 0) {
for (var i = 0; i < list.length; i++) {
if (list[i].includes(mes.value)) {
var spanText = `<span style="color:red">${mes.value}</span>`
var pushText = list[i].replace(mes.value, spanText)
result.push(pushText)
}
}
renderHTML()
} else {
ul.innerHTML = ""
}
}
function renderHTML() {
var html = ""
console.log(result); // 明天
// Array.prototype.forEach = function(callback) {
// for(var i = 0; i < this.length; i++) {
// callback(this[i], i, this)
// }
// }
result.forEach(function (v, i) {
html += `<li>${v}</li>`
})
ul.innerHTML = html
}
</script>
</html>

View File

@@ -0,0 +1,65 @@
<!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>富强</title>
<style>
body {
height: 100vh;
position: relative;
}
span {
position: absolute;
transition: all 1s;
user-select: none;
}
</style>
</head>
<body>
</body>
<script>
var index = 0;
var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"]
var body = document.querySelector("body")
body.onclick = function (e) {
var x = e.x,
y = e.y;
var span = document.createElement("span")
span.innerText = text[index]
span.style = `
left: ${x}px;
top: ${y}px;
color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
`
body.appendChild(span)
motion(span)
index++
if (index > 11) {
index = 0
}
}
function motion(el) {
// 让span 的top 自减 150px也就是向上运动
setTimeout(function() {
el.style.top = `${parseInt(el.style.top) - 150}px`
}, 100)
// 运动完成后从body中删除这个span标签
setTimeout(function() {
body.removeChild(el)
}, 1200)
}
</script>
</html>

View File

@@ -0,0 +1,25 @@
<!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>过渡</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
transition: all 0.5s
}
.box:hover {
width: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

View File

@@ -0,0 +1,158 @@
<!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>弹幕</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
outline: none;
border: none;
}
.mian {
width: 800px;
height: 400px;
background: #000;
text-align: center;
position: relative;
overflow: hidden;
}
.mian span {
position: absolute;
color: #fff;
white-space: nowrap;
}
.mian video {
height: 360px;
}
.bulletchat {
height: 40px;
display: flex;
background: #fff;
align-items: center;
}
.bulletchat .inputText {
flex: 1;
}
</style>
</head>
<body>
<div class="mian">
<video src="./video.mp4" controls autoplay muted></video>
<div class="bulletchat">
<input class="inputText" type="text" placeholder="请输入弹幕">
<input value="#ffffff" type="color" class="color">
<div class="all">全屏&nbsp;</div>
<div class="half">半屏&nbsp</div>
<div class="small">3/1屏&nbsp</div>
<button>发送</button>
</div>
</div>
</body>
<script>
// 我做半屏弹幕,你们自己实现 全屏 和 3/1弹幕
// 点击按钮获得输入框的文字,用文字生成标签放到网页上,运动起来。
var send = $(".bulletchat button"),
input = $(".bulletchat .inputText"),
color = $(".bulletchat .color"),
mian = $(".mian"),
height = $(".mian video").clientHeight,
<<<<<<< HEAD
offsetTop = null,
h=height - 21,
width = $(".mian").clientWidth;
send.onclick = function () {
var span = document.createElement("span");
offsetTop = Math.random() * h;
=======
h = height - 21, // 默认全屏
width = $(".mian").clientWidth;
console.log(h);
send.onclick = function () {
var span = document.createElement("span");
>>>>>>> 1cf4dd3941996ba23835ad4cc9146a85a3ba8f6b
span.innerText = input.value;
// input.value = ""
var offsetTop = Math.random() * h;
mian.appendChild(span)
span.style = `
top: ${offsetTop}px;
right: ${-span.clientWidth}px;
color: ${color.value}
`
motion(span)
}
$(".all").onclick=function(){
h=height - 21
}
$(".half").onclick=function(){
h=height/2 - 21
<<<<<<< HEAD
}
$(".small").onclick=function(){
h=height/3 - 21
}
=======
$(".all").onclick = function () {
h = height - 21;
}
//
$(".half").onclick = function () {
h = height / 2 - 21;
}
$(".small").onclick = function () {
h = height / 3 - 21;
}
>>>>>>> 1cf4dd3941996ba23835ad4cc9146a85a3ba8f6b
function motion(el) {
el.intervalId = setInterval(function () {
var rightOffset = parseInt(el.style.right) + 1;
el.style.right = `${rightOffset}px`
if (rightOffset > width) {
mian.removeChild(el)
clearInterval(el.intervalId)
}
}, 6)
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

View File

@@ -0,0 +1,186 @@
<!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>红包雨</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
position: relative;
height: 100vh;
overflow: hidden;
}
img {
position: absolute;
width: 80px;
/* transition: all 0.2s; */
}
.alert {
position: fixed;
width: 100%;
height: 100%;
background: #0000008f;
display: flex;
align-items: center;
justify-content: center;
z-index: 8;
}
.alert .alert_warp {
width: 32%;
background: #fff;
height: 300px;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.alert_warp .alert_title {
display: flex;
justify-content: space-between;
height: 45px;
align-items: center;
border-bottom: 1px solid #e6e6e6;
}
.alert_title span {}
.alert_body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="alert hidden">
<div class="alert_warp">
<div class="alert_title">
<span>恭喜中奖</span>
<span class="close">x</span>
</div>
<div class="alert_body">
恭喜抽中9折优惠券
</div>
</div>
</div>
</body>
<script>
// 随机生成红包 + 红包移动
// 点击开红包,红包点击事件,中奖弹窗,所有红包暂停,关闭弹出的时候红包重新运动
var clientWidth = $("body").clientWidth, // 获取屏幕宽度
clientHeight = $("body").clientHeight, // 获取屏幕高度
alert = $(".alert"),
text = $(".alert_body"),
close = $(".alert_title .close"),
clickImg = null, // 保存你点击的图片的虚拟dom对象
body = $("body"),
createdId = null; // 保存创建红包的定时器
// 创建红包的方法
function createdHb() {
var x = parseInt(Math.random() * (clientWidth - 80))
var img = document.createElement("img");
img.src = "./hb.png"
img.style = `
left: ${x}px;
top: -105px;
`
// 红包的点击事件
img.onclick = function () {
clickImg = img;
probability()
// 显示弹窗
alert.classList.remove("hidden")
// 停止生成红包
clearInterval(createdId)
// 停止页面上所有红包
allImgAction(2)
}
body.appendChild(img)
motion(img)
}
function motion(el) {
// 设置定时器让红包移动起来
el.num = setInterval(function () {
var topSet = parseInt(el.style.top) + 1
el.style.top = `${topSet}px`
// 超过屏幕高度删除
if (topSet > clientHeight) {
$("body").removeChild(el)
clearInterval(el.num)
}
}, 6)
}
// 关闭弹窗
close.onclick = function () {
// 删除你点击的红包
$("body").removeChild(clickImg)
alert.classList.add("hidden")
// 让页面上的其他红包重新运动起来
allImgAction(1)
// 开始重新创建红包
autoCreated()
}
// 计算概率
function probability() {
var prob = Math.random();
if (prob <= 0.021) {
text.innerText = `${prob}恭喜您中了 1 折优惠券`
} else if (0.021 < prob && prob <= 0.8) {
text.innerText = `${prob}恭喜您中了 7 折优惠券`
} else if (prob > 0.8) {
text.innerText = `${prob}恭喜您中了 3 折优惠券`
}
}
function allImgAction(type) {
var allImg = document.querySelectorAll("img");
allImg.forEach(function (v) {
type == 1 ? motion(v) : clearInterval(v.num)
})
}
function autoCreated() {
createdId = setInterval(function () {
createdHb()
},1000)
}
autoCreated()
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,88 @@
<!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> ajax 网络请求 </title>
</head>
<body>
<ul>
</ul>
</body>
<script>
// ajax 是什么东西?
// 请求
// 请求头 寄件人信息
// 请求体 包裹(快递的物品) 数据格式: json 解析 (字符串转化为数组或对象的) (数组和对象的组合) xml
// 响应头 收集人信息
//
// 异步的前后端数据交互的一种方式
// 单向的通讯技术 前端 ----> 后端
// 1 拿出电话 创建一个ajax对象
var http = new XMLHttpRequest();
// 2 设置号码 设置ajax请求的后端网址
// 请求方式:
// GET 找后端要数据
// http://www.bmy.com/index?page=index&action=video
// POST 给后端数据的过程
// 请求体里面
// 更多区别https://www.cnblogs.com/logsharing/p/8448446.html
// PUT 给数据 + 更新的操作
// DELETE 给数据 + 删除的操作
http.open("GET", "http://127.0.0.1:3000/api/index/threeMeals")
// 3 拨号 发送ajax请求
http.send();
// json
http.onreadystatechange = function () {
if (http.readyState == 4) {
if (http.status == 200) {
var data = JSON.parse(http.response)
console.log(data);
data.result.forEach(function (item, index) {
document.querySelector("ul").innerHTML += `<li>${item.title}</li>`
console.log(item.title);
});
} else {
alert("网络请求错误")
}
}
}
// ajax 跨域
// 前端的地址: file:///C:/Users/bmy/Desktop/front-end-team/%E6%AF%8F%E5%A4%A9%E8%AF%BE%E7%A8%8B/2022-03-28/index.html
// 后端的地址: http://127.0.0.1:3000/api/index/threeMeals
// 同源策略 CORS
// 从三方面进行安全检查:
// 协议 http (80) https (443)
// 域名
// 端口
// 什么是跨域?
// 跨域如何解决?有几种方式?
// 1后端设置请求头 Access-Control-Allow-Origin ,告诉浏览器,放行这个前端
// 2jsonp 将ajax请求伪装成 js 文件请求 + callback 回调函数 拿回数据
// 3: 服务端代理
// A(我的前端) --- C别人的后端
// A(我的前端) --- B (我的后端)
// B -- C
</script >
</html >

View File

@@ -0,0 +1,70 @@
class ajax {
constructor() { // 类的参数初始化
this.baseUrl = "http://127.0.0.1:8090/api";
this.xhr = new XMLHttpRequest();
}
/**
*
* @param {*} params
* {
* url: 'http://127.0.0.1:3000/api/index/threeMeals',
* data: {
* page: 1,
* id: 1
* },
* success: function() {}
* }
*/
get(params) {
// 判断你传的参数里面是否有 data没有的话就报错提示你
if (params.hasOwnProperty("data")) {
var str = ""
// 将 object 类型的 data 转为为 ?key=value&key=value
for (const key in params.data) {
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
// 设置请求地址
this.xhr.open("GET", `${this.baseUrl}${params.url}${str}`)
//
this.xhr.send();
// 状态监听
this.onreadystatechange(params.success)
} else {
throw new Error("data参数必传")
}
}
onreadystatechange(callback) {
// this 指向
// 如何解决 this 指向
// 提前保存this
// 箭头函数 es6 es5
// bind
// var self = this;
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
callback(JSON.parse(this.xhr.response))
} else {
alert("网络请求错误")
}
}
}
}
}
var http = new ajax();

View File

@@ -0,0 +1,87 @@
<!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>首页</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 220px;
margin-right: 10px;
}
li img {
width: 100%;
}
ul {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<ul>
</ul>
<button>下一页</button>
</body>
<script src="./ajax.js"></script>
<script>
var pcursor = "";
function getIndex() {
http.get({
url: '/likeList',
data: {
pcursor: pcursor
},
success: function (res) {
pcursor = res.pcursor;
renderPage(res.feeds)
}
});
}
function renderPage(feeds) {
feeds.forEach(item => {
document.querySelector("ul").innerHTML += `
<li>
<a target="_blank" href="./play.html?principalId=${item.author.id}&photoId=${item.photo.id}">
<img src="${item.photo.coverUrl}" alt="">
<p>${item.photo.caption}</p>
</a>
</li>
`
});
}
document.querySelector("button").onclick = () => {
getIndex()
}
getIndex();
</script>
</html>

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>视频播放页面</title>
</head>
<body>
<video src="" controls autoplay muted></video>
</body>
<script src="./ajax.js"></script>
<script>
var video = document.querySelector("video");
function getVideoUrl() {
http.get({
url: '/play',
data: {
principalId: GetQueryString("principalId"),
photoId: GetQueryString("photoId")
},
success: function (res) {
video.src = res.playUrl
video.poster = res.poster
}
});
}
getVideoUrl();
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</html>

View File

@@ -0,0 +1,27 @@
web 网站
1服务端渲染
前端: 写页面 3000k 20%
后端:写页面+写功能+数据库+服务器 15000 80%
优点:前后端沟通成本低
缺点:项目迭代成本高
ajax
2前后端分离
前端:写页面 写功能 50% 12000
后端:数据库 服务器 50% 14000

View File

@@ -0,0 +1,85 @@
<!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>js 复习</title>
</head>
<body>
<input type="text" placeholder="关键字">
<button>搜索</button>
<div class="result"></div>
</body>
<script>
// 数组&对象 循环 事件&方法(代码封装) ajax请求 dom操作
//
// 数组 for forEach while map filter
var a = [1, 2, 3, 4, 5, 6]
console.log(a[0]);
a.forEach((v) => {
console.log(v);
})
// for in 对象 key键 名字) - value 来存值
var obj = {
name: '刘兵',
age: 18
}
for (const key in obj) {
console.log(obj[key]);
}
// 作业 遍历打印出下面数组中的所有数值
// typeof 变量名 作用:求变量类型
var test = [1, 2, 3, 4, [5, 6, 7, 8], [9, 10, 11, 12, 13]];
test.forEach(v => {
// 如果外层循环遇到了 数字,才打印
if (typeof v == "number") {
console.log(v);
// 如果外层循环的时候遇到了 数组,那么就进行二次遍历
} else {
v.forEach(j => {
console.log(j);
});
}
})
// 使用 querySelector 获取一个按钮并存放到变量button中
// 获取多个 querySelectorAll
// innerText 插入文字
// innerHTML 插入html
var button = $("button");
var input = $("input");
var result = $(".result");
button.onclick = () => {
console.log(input.value)
result.innerText = input.value
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,86 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">首页</li>
<li>社会</li>
<li>财经</li>
<li>体育</li>
</ul>
<ul class="tabs_content">
<li class="active_content">首页 的内容</li>
<li>社会 的内容</li>
<li>财经 的内容</li>
<li>体育 的内容</li>
</ul>
</body>
<script>
var titleLi = _(".tabs_title li");
var contentLi = _(".tabs_content li");
console.log(titleLi);
// 为标题的li标签批量绑定点击事件
titleLi.forEach((v,i) => {
v.onclick = () => {
// 当你点击li的时候先删除所有li标签上的类名
titleLi.forEach((j,index) => {
j.classList.remove("active_title")
// 利用 标题遍历时候产生的下标,来关联 内容 数组+下标
contentLi[index].classList.remove("active_content")
});
// 然后再为你点击的那个li标签加激活样式的类名
v.classList.add("active_title");
//
contentLi[i].classList.add("active_content");
}
})
// 封装的方法用来获取所有li标签的数组
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,145 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title"></ul>
<ul class="tabs_content">
</ul>
</body>
<script>
var index = 0;
var tabsData = [
{
id: 1,
title: '首页',
page: 1,
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
]
},
{
id: 2,
title: '社会',
page: 1,
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' }
]
},
{
id: 3,
title: '财经',
page: 1,
content: [
{ text: '财经的内容1' },
{ text: '财经的内容2' },
{ text: '财经的内容3' },
{ text: '财经的内容4' },
]
},
];
// 渲染 tabs标题的li标签
function renderTitle() {
tabsData.forEach((v, i) => {
$(".tabs_title").innerHTML += `<li class="${i == 0 ? 'active_title' : ''}">${v.title}</li>`;
$(".tabs_content").innerHTML += `<li class="${i == 0 ? 'active_content' : ''}"></li>`;
})
_(".tabs_title li").forEach((v,i) => {
v.onclick = () => {
// 保存你点击的li标签的下标方便下面 renderContent 使用
index = i;
// 当你点击li的时候先删除所有li标签上的类名
_(".tabs_title li").forEach((j, idx) => {
j.classList.remove("active_title")
_(".tabs_content li")[idx].classList.remove("active_content");
});
// 然后再为你点击的那个li标签加激活样式的类名
v.classList.add("active_title");
_(".tabs_content li")[i].classList.add("ative_content");
renderContent();
}
})
}
// 渲染和标题对应的内容content
function renderContent() {
// 访问到你点击的标题所对应的内容的li
_(".tabs_content li")[index].innerHTML = ""
tabsData[index].content.forEach(v => {
_(".tabs_content li")[index].innerHTML += `<p>${v.text}</p>`
})
}
renderTitle();
renderContent();
// 封装的方法用来获取所有li标签的数组
function _(className) {
return document.querySelectorAll(className)
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,3 @@
module.exports = {
url: 'www.baidu.com'
}

View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>你好</h2>
</body>
</html>

View File

@@ -0,0 +1,13 @@
const http = require('http');
const fs = require('fs');
// request 请求
// response 响应
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
var data = fs.readFileSync("./index.html", { encoding: 'utf-8' })
res.end(data);
});
server.listen(80);

View File

@@ -0,0 +1,69 @@
{
"name": "2022-04-07",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "2022-04-07",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"@types/node": "^17.0.23",
"axios": "^0.26.1"
}
},
"node_modules/@types/node": {
"version": "17.0.23",
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
"integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
},
"node_modules/axios": {
"version": "0.26.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
"integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
"dependencies": {
"follow-redirects": "^1.14.8"
}
},
"node_modules/follow-redirects": {
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
}
},
"dependencies": {
"@types/node": {
"version": "17.0.23",
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
"integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
},
"axios": {
"version": "0.26.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
"integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
"requires": {
"follow-redirects": "^1.14.8"
}
},
"follow-redirects": {
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
}
}
}

View File

@@ -0,0 +1,16 @@
{
"name": "2022-04-07",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@types/node": "^17.0.23",
"axios": "^0.26.1"
}
}

View File

@@ -0,0 +1,55 @@
Node.js
其实js但是 它是运行在服务器上的js的运行环境所以nodejs其实也是后端编程语言。
nodejs
c++ + v8(js运行环境)
deno
前端
1html+css
2: jquery
|
Node.js 分工 前后端分离
|
3: vue react an....
啥玩意?
为什么学?
nodejs
package.json
npm init 初始化一个nodejs项目
-y
npm run 命令名称(在 package.json 的 scripts 里面定义的)
npm 包(依赖)(插件)管理工具
npm i 下载项目依赖
npm installi 插件名字 阶段参数
npm i 插件名字 阶段参数
阶段:
开发阶段 --save-dev -D
正式阶段 --save -S
全局安装 -g
npm uninstall 插件名 卸载删除插件
// hosts 文件
www.baidu.com 127.0.0.1
abc.com 127.0.0.1

View File

@@ -0,0 +1,24 @@
uniapp 混合开发框架
纯粹 html css js
原生(使用 androidjava object-c Swift
混合
1老路子
原生 + webview
2uniapp flutter react_navict
uniapp