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

37
历届学生/朱立伟/2019-04-08/Tabs.js Normal file
View File

@@ -0,0 +1,37 @@
// 优势，兼容性好，所有浏览器都认识
// 但是代码复杂
(function(win,doc) {
// 用来做插件的初始化配置
function Tabs (x) {
var name = "zhangs"
if(x.hasOwnProperty("name")) {
this.name = x.name
}else {
console.error("默认参数没有填写请检查")
}
}
Tabs.prototype = {
getUserName: function() {
console.log(this.name)
}
}
win.Tabs = Tabs
})(window,document)
// es6 新的语法糖
// 一般旧的浏览器不支持
// babel 帮你把高版本的js语法，转换成低版本浏览器能够认识的语法
// class Tabs{
// constructor(name) {
// this.name = name
// }
// getUserName() {
// console.log(this.name)
// }
// }

128
历届学生/朱立伟/2019-04-08/tabs切换.html Normal file
View File

@@ -0,0 +1,128 @@
<!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">
<script src="./Tabs.js"></script>
<script >
var tab = new Tabs({
name: 'zhangsan'
});
tab.getUserName();
</script>
<title>tabs切换</title>
<style>
body,ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.main {
width: 385px;
height: 300px;
margin: 10px auto;
}
.tabs_title {
overflow: hidden;
}
.tabs_title ul li {
float: left;
margin-right: 62px;
}
.active_title {
color: red;
}
.tabs_content ul li {
display: none
}
.active_content {
display: block !important;
}
</style>
</head>
<body>
<div class="main">
<div class="tabs_title">
<ul id="tabs_father">
</ul>
</div>
<div class="tabs_content">
<ul id="content_father">
</ul>
</div>
</div>
<script>
var TabTitleList = [ '热点新闻', '社会舆论', '全民聚焦', '娱乐视频' ],
TabContentList = ['热点新闻的内容', '社会舆论的内容', '全民聚焦的内容', '娱乐视频的内容'],
TabTitleHtml = ""
TabContentHtml = "",
TabFather = document.getElementById("tabs_father"),
TabContentFather = document.getElementById("content_father");
// 渲染标题
function WirteTabTitle() {
for (let i = 0; i < TabTitleList.length; i++) {
TabTitleHtml += `<li class="${ i == 0 ? 'active_title' : '' }">
${TabTitleList[i]}
</li>`
}
TabFather.innerHTML = TabTitleHtml
}
// 渲染内容
function WirteTabContent () {
for (let i = 0; i < TabContentList.length; i++) {
TabContentHtml += `<li class="${ i == 0 ? 'active_content' : '' }">
<p>${TabContentList[i]}</p>
</li>`
}
TabContentFather.innerHTML = TabContentHtml
}
// 为标题绑定悬浮事件
function BindClick () {
var TabTitleL = document.getElementsByClassName("tabs_title")[0].getElementsByTagName("li");
var TabContent = document.getElementsByClassName("tabs_content")[0].getElementsByTagName("li");
for (let i = 0; i < TabTitleL.length; i++) {
TabTitleL[i].onmouseover = function () {
for (let j = 0; j < TabTitleL.length; j++) {
TabTitleL[j].className = ""
TabContent[j].className = ""
}
TabTitleL[i].className = "active_title"
TabContent[i].className = "active_content"
}
// (function (j) {
// TabTitleL[j].onmouseover = function () {
// console.log(j)
// }
// })(i)
}
}
WirteTabTitle()
WirteTabContent()
BindClick();
</script>
</body>
</html>

16
历届学生/朱立伟/2019-04-08/笔记.txt Normal file
View File

@@ -0,0 +1,16 @@
朱立伟：
1：学习flex + rem
2：开发移动端网站
3：学习ajax基于原理，跨域解决方案
4：使用ajax开发前后端分离的项目
5：Vue.js
6：微信小程序
// 7：混合app开发( react native，uniapp，mui, flutter )
前端三大框架：
react.js vue.js angular.js
es5(js) --> es6, 7 ---> typescript(js增强版，把js变成了强类型语言，拓展了很多后端语言才有的功能)

63
历届学生/朱立伟/2019-04-08/输入框输入限制.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>
<style>
.main,
textarea {
width: 403px;
height: 256px;
}
.main {
position: relative;
}
.result {
position: absolute;
right: 0;
bottom: 0;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class="main">
<textarea oninput="checkNumber()" id="UserMessage" class="zhangsan" name="" cols="30" rows="10" placeholder="请输入留言"></textarea>
<div class="result">200 / 200</div>
</div>
<script>
// var 变量 ， let
// const 常量
// var username = "zhangsan"
// username = "zhangsan"
var UserMessage = document.getElementById("UserMessage");
var Result = document.getElementsByClassName("result")[0];
var TotalNumber = 200;
function checkNumber () {
var YourMessage = UserMessage.value;
if(YourMessage.length > 200) {
UserMessage.value = YourMessage.substring(0,200);
Result.innerHTML = `超过限制 / 200`;
Result.className = "result error";
}else {
Result.innerHTML = `${TotalNumber - YourMessage.length} / 200`;
Result.className = "result";
}
//Result.innerHTML = TotalNumber - YourMessage.length + " / 200"
}
</script>
</body>
</html>