前端
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>AJAX的异步请求</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="ret"></div>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
// 当页面加载完成后，则执行的程序
|
||||
// 发起异步请求(HTTP)：
|
||||
// 1) 请求方法
|
||||
// 2) 请求头和请求体的数据怎么放
|
||||
// 3) 相应的数据的怎么接
|
||||
let url = "/cgi-bin/data1.cgi";
|
||||
// 发起get请求，为了查询数据（从后端获取数据）
|
||||
fetch(url)
|
||||
.then((resp) => {
|
||||
if (resp.status == 200) {
|
||||
if (
|
||||
resp.headers.get("Content-Type").startsWith("application/json")
|
||||
) {
|
||||
return resp.json(); // json 对象
|
||||
} else {
|
||||
return resp.text(); // 文本数据
|
||||
}
|
||||
}
|
||||
})
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
ret.innerText = "id=" + data.id + ", name=" + data.name;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Submodule
+1
Submodule www/cgi-bin/cJSON/cJSON added at cb8693b058
@@ -0,0 +1,9 @@
|
||||
#include <stdio.h>
|
||||
|
||||
int main(int argc, char const *argv[])
|
||||
{
|
||||
printf("content-type: application/json; charset=utf-8\r\n");
|
||||
printf("\r\n\r\n");
|
||||
printf("{\"id\": 1, \"name\": \"disen\"}");
|
||||
return 0;
|
||||
}
|
||||
Executable
BIN
Binary file not shown.
+36
-2
@@ -1,9 +1,43 @@
|
||||
#include <stdio.h>
|
||||
#include <unistd.h>
|
||||
#include <sys/types.h>
|
||||
#include <sys/stat.h>
|
||||
#include <fcntl.h>
|
||||
#include <stdlib.h>
|
||||
#include <string.h>
|
||||
#include <cjson/cJSON.h> // cjson 用于解析 json
|
||||
|
||||
int main(int argc, char const *argv[])
|
||||
{
|
||||
printf("content-type: text/html;charset=utf-8\r\n");
|
||||
// 获取上传的数据
|
||||
char request_data[128] = "";
|
||||
fgets(request_data, 128, stdin);
|
||||
|
||||
// int fd = open("tmp.txt", O_RDWR | O_CREAT, 0666);
|
||||
// write(fd, request_data, strlen(request_data));
|
||||
|
||||
// 要求：请求上传的数据类型必须是 json 格式的字符串
|
||||
cJSON *p = cJSON_Parse(request_data);
|
||||
cJSON *name = cJSON_GetObjectItemCaseSensitive(p, "name");
|
||||
cJSON *pwd = cJSON_GetObjectItemCaseSensitive(p, "pwd");
|
||||
|
||||
printf("content-type: application/json;charset=utf-8\r\n");
|
||||
printf("\r\n");
|
||||
printf("<h3>请求成功，正在跳转主页</h3>");
|
||||
|
||||
if (strncmp(name->valuestring, "disen", 5) == 0 && strncmp(pwd->valuestring, "123123", 6) == 0)
|
||||
{
|
||||
printf("{\"code\":0,\"data\":{\"user_id\":111,\"nickName\":\"老狄\"}}");
|
||||
}
|
||||
else
|
||||
{
|
||||
printf("{\"code\":1,\"msg\":\"用户名或口令错误\"}");
|
||||
}
|
||||
|
||||
// write(fd, name->valuestring, strlen(name->valuestring));
|
||||
// write(fd, pwd->valuestring, strlen(pwd->valuestring));
|
||||
|
||||
// close(fd);
|
||||
|
||||
// json 对象中包含一个 data 对象
|
||||
return 0;
|
||||
}
|
||||
|
||||
Binary file not shown.
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Flex自动排列</title>
|
||||
<style>
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item img {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item img:hover {
|
||||
transform: scale(1.2, 1.2);
|
||||
|
||||
transition: all ease-in 0.2s;
|
||||
}
|
||||
|
||||
img-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<h3>图1</h3>
|
||||
<div class="img-container">
|
||||
<img src="images/01.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<h3>图2</h3>
|
||||
<div class="img-container">
|
||||
<img src="images/02.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<h3>图3</h3>
|
||||
<div class="img-container">
|
||||
<img src="images/03.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<h3>图4</h3>
|
||||
<div class="img-container">
|
||||
<img src="images/04.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
background-color: #f1f1f1;
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-container">
|
||||
<div class="flex-item">1</div>
|
||||
<div class="flex-item">2</div>
|
||||
<div class="flex-item">3</div>
|
||||
<div class="flex-item">4</div>
|
||||
<div class="flex-item">5</div>
|
||||
<div class="flex-item">6</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>第一个网页</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>C语言开发基础</h1>
|
||||
<h3>第一章：C语言的基本语法</h3>
|
||||
<h3>第二章：C语言的数据类型</h3>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
+159
-28
@@ -1,38 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- 头部分，主要是告知浏览器当前网页的附加信息，字符集，标题，样式等 -->
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>主页-Disen快乐C开发课堂</title>
|
||||
<title>弹性盒子</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%; /* 100%的高度 */
|
||||
margin: 0; /* 边距 */
|
||||
padding: 0; /* 内边距 */
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#top,
|
||||
#footer {
|
||||
/* height: 70px; 高度 */
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
#main {
|
||||
height: 100%; /* 100%的高度 */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#top {
|
||||
display: flex; /* 弹性盒子 */
|
||||
flex-direction: row; /* 水平排列 */
|
||||
justify-content: space-between; /* 水平分布 */
|
||||
justify-items: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid firebrick;
|
||||
}
|
||||
|
||||
#logo > img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
box-shadow: 0 0 10px 5px #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#logo:hover > img {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
box-shadow: 0 0 20px 10px lightskyblue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#footer {
|
||||
height: 35px; /* 高度 */
|
||||
border-top: 1px solid lightgray;
|
||||
border-color: firebrick;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
#menu {
|
||||
width: 300px;
|
||||
border-right: 1px solid lightgray;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#menu ul,
|
||||
#menu li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
margin: 10px 0; /* 上下间距为10px 左右不需要 */
|
||||
/* overflow: hidden; 超出部分隐藏 */
|
||||
}
|
||||
|
||||
#menu a {
|
||||
display: block; /* 块级元素 */
|
||||
text-decoration: none; /* 去掉下划线 */
|
||||
color: black; /* 字体颜色 */
|
||||
padding: 10px 20px; /* 上下10px 左右20px */
|
||||
width: 80%; /* 宽度80% */
|
||||
}
|
||||
|
||||
#menu a:hover {
|
||||
/* 鼠标悬停 */
|
||||
color: red; /* 字体颜色 */
|
||||
background-color: aquamarine;
|
||||
border-radius: 5px; /* 圆角 */
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 id="top">所有课程列表</h1>
|
||||
<a href="h.html" target="_blank" title="提示的信息">HTML的6个级别</a><br />
|
||||
<a href="hi.html" target="content_frame">第一个页面</a><br />
|
||||
<a href="meta.html" target="content_frame">meta标签</a><br />
|
||||
<a href="table.html" target="_blank">个人简历</a><br />
|
||||
<a href="table2.html" target="content_frame">libnet库函数列表</a><br />
|
||||
<a href="form1.html" target="_blank">表单1</a><br />
|
||||
<a href="form2.html" target="_blank">注册用户</a><br />
|
||||
<a href="form3.html" target="_blank">上报数据</a><br />
|
||||
<a href="form4.html" target="_blank">内联样式</a><br />
|
||||
<a href="css1.html" target="_blank">css1</a><br />
|
||||
<div id="top">
|
||||
<div id="logo">
|
||||
<img src="./images/google-2.ico" alt="logo" />
|
||||
</div>
|
||||
<div id="user_info">
|
||||
登录用户 <span id="userName"></span
|
||||
><span class="logout" onclick="logout()">登出</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div id="menu">
|
||||
<ul class="menu-list">
|
||||
<h3>自定义样式</h3>
|
||||
<li class="menu-item">
|
||||
<a href="css1.html" target="content_frame">css1</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="css2.html" target="content_frame">css2</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="css4.html" target="content_frame">图片列表</a>
|
||||
</li>
|
||||
<h3>Form标签</h3>
|
||||
<li class="menu-item">
|
||||
<a href="form1.html" target="content_frame">form1</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="form2.html" target="content_frame">form2</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="form3.html" target="content_frame">form3</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" style="width: 100%">
|
||||
<iframe name="content_frame" width="100%" height="100%"> </iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer" style="text-align: center">
|
||||
<b>版权所有© 福来科瀚</b><br />
|
||||
<i>Flykhan: 000111010</i>
|
||||
</div>
|
||||
|
||||
<a href="#footer">前往底部</a><br />
|
||||
<a
|
||||
href="http://www.biquge66.net/book/101/204087.html"
|
||||
target="content_frame"
|
||||
>上门龙婿-第一集</a
|
||||
><br />
|
||||
<script>
|
||||
window.onload = function () {
|
||||
// 验证当前浏览器用户是否已经登录
|
||||
if (localStorage.getItem("login_user") == null) {
|
||||
open("/login.html", "_self");
|
||||
} else {
|
||||
let login_user_str = localStorage.getItem("login_user");
|
||||
let login_user = JSON.parse(login_user_str);
|
||||
|
||||
<!-- 页内窗口 -->
|
||||
<iframe name="content_frame" width="100%" height="600px"></iframe>
|
||||
<div style="height: 800px"></div>
|
||||
<p id="footer">
|
||||
我是最后一段信息...
|
||||
<a href="#top">回到顶部</a>
|
||||
</p>
|
||||
userName.innerText = login_user.nickName;
|
||||
}
|
||||
};
|
||||
|
||||
function logout() {
|
||||
localStorage.clear();
|
||||
open("/login.html", "_self");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
function check() {
|
||||
console.log("---check function 被调用了---");
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>JavaScript脚本开发</title>
|
||||
|
||||
<style>
|
||||
span{
|
||||
/* 用户双击时不选中文本 */
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="alert('点我干啥')">点我试一下</button>
|
||||
<br />
|
||||
<div>
|
||||
<script>
|
||||
// document 是DOM的对象，操作当前页面标签元素的对象
|
||||
document.write("<h3>js脚本生成的</h3>");
|
||||
</script>
|
||||
</div>
|
||||
<button ondblclick="check()">双击我试试</button>
|
||||
<script src="js/my.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>回到顶部</title>
|
||||
<style>
|
||||
.panel {
|
||||
height: 400px;
|
||||
background-color: skyblue;
|
||||
margin: 10px 100px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
line-height: 400px;
|
||||
}
|
||||
|
||||
.topBtn {
|
||||
display: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
border: 1px solid lightgray;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.topBtn:hover {
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.topBtn:active {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
|
||||
#rightBtns {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<!-- 页面滚动 -->
|
||||
<body onscroll="pageScoll(event)">
|
||||
<!-- 右边按钮组，悬浮在右边 -->
|
||||
<div id="rightBtns">
|
||||
<span class="topBtn">到顶</span>
|
||||
</div>
|
||||
<div id="d1" class="panel">aBc</div>
|
||||
<div id="d2" class="panel">aBc</div>
|
||||
<div id="d3" class="panel">aBc</div>
|
||||
<div id="d4" class="panel">aBc</div>
|
||||
<div id="d5" class="panel">aBc</div>
|
||||
<div id="d6" class="panel">aBc</div>
|
||||
<script>
|
||||
function pageScoll() {
|
||||
// 获取滚动条的位置
|
||||
let scrollTop = document.documentElement.scrollTop;
|
||||
if (scrollTop > 500) {
|
||||
// topBtn.style.display = "online-block";
|
||||
.style.display =
|
||||
"online-block";
|
||||
}
|
||||
}
|
||||
|
||||
function backTop()
|
||||
{
|
||||
document.documentElement.scrollTo(0,0);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>DOM操作</title>
|
||||
|
||||
<style>
|
||||
.large_span {
|
||||
font-size: 25px;
|
||||
color: red;
|
||||
padding: 1px;
|
||||
border: 1px solid greenyellow;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<span name="sex">a</span>
|
||||
<span name="sex">b</span>
|
||||
<span class="item">c</span>
|
||||
<span class="item">d</span>
|
||||
<span class="item">e</span>
|
||||
<script>
|
||||
// js 的延迟器， 2000 毫秒之后执行匿名函数（箭头函数）
|
||||
setTimeout(() => {
|
||||
// 返回的是NodeList（节点列表）
|
||||
|
||||
// 获取所有的span标签，添加一个新的类名 large_span
|
||||
let spans3 = document.getElementsByTagName("span");
|
||||
for (let i in spans3) {
|
||||
spans3[i].className += " large_span";
|
||||
}
|
||||
}, 2000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+206
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>DOM操作2</title>
|
||||
<style>
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border: 1px solid lightgray;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.action:active {
|
||||
background-color: lightskyblue;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.xe_group {
|
||||
display: flex; /* 弹性布局 */
|
||||
flex-direction: row; /* 水平方向排列 */
|
||||
justify-content: center; /* 水平方向居中 */
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
input[name] {
|
||||
outline: none;
|
||||
border: 1px solid lightgray;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form onsubmit="return addData(this);">
|
||||
<input type="hidden" name="uid" value="0" />
|
||||
<input name="username" />
|
||||
<input name="phone" />
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
|
||||
<table border="1px" cellspacing="0" cellpadding="10px">
|
||||
<thead>
|
||||
<th>ID</th>
|
||||
<th width="300px">Name</th>
|
||||
<th>Phone</th>
|
||||
<th width="300px">Action</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>flykhan</td>
|
||||
<td>13536480678</td>
|
||||
<td class="xe_group">
|
||||
<b class="action warning">X</b>
|
||||
<b class="action success">E</b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>flykhan</td>
|
||||
<td>13536480678</td>
|
||||
<td class="xe_group">
|
||||
<b class="action warning">X</b>
|
||||
<b class="action success">E</b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>flykhan</td>
|
||||
<td>13536480678</td>
|
||||
<td class="xe_group">
|
||||
<b class="action warning">X</b>
|
||||
<b class="action success">E</b>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
var max_id = 4;
|
||||
function delAction() {
|
||||
let ds = document.getElementsByClassName("warning");
|
||||
for (let i = 0; i < ds.length; i++) {
|
||||
let bElement = ds[i];
|
||||
bElement.addEventListener("click", (event) => {
|
||||
let b = event.target;
|
||||
let tr = b.parentElement.parentElement;
|
||||
tr.remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function editAction() {
|
||||
let ds = document.getElementsByClassName("success");
|
||||
for (let i = 0; i < ds.length; i++) {
|
||||
let bElement = ds[i];
|
||||
bElement.addEventListener("click", (event) => {
|
||||
let b = event.target;
|
||||
let tr = b.parentElement.parentElement;
|
||||
let tds = tr.children; // 获取 tr 行的所有子标签对象
|
||||
|
||||
let form = document.forms[0]; // 获取当前页面的第一个表单
|
||||
|
||||
form.uid.value = tds[0].innerText;
|
||||
form.username.value = tds[1].innerText;
|
||||
form.phone.value = tds[2].innerText;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
delAction();
|
||||
editAction();
|
||||
|
||||
function addData(form) {
|
||||
let id_ = form.uid.value;
|
||||
let name = form.username.value;
|
||||
let phone = form.phone.value;
|
||||
|
||||
console.log(id_);
|
||||
|
||||
if (id_ === "0") {
|
||||
// 将数据添加到 table 中
|
||||
let table = document.getElementsByTagName("table")[0];
|
||||
|
||||
// 创建一个新的 tr 标签
|
||||
let tr = document.createElement("tr");
|
||||
// 创建一个新的 td 标签
|
||||
let td1 = document.createElement("td");
|
||||
td1.innerText = max_id;
|
||||
let td2 = document.createElement("td");
|
||||
td2.innerText = name;
|
||||
let td3 = document.createElement("td");
|
||||
td3.innerText = phone;
|
||||
let td4 = document.createElement("td");
|
||||
td4.className = "xe_group";
|
||||
let b1 = document.createElement("b");
|
||||
b1.className = "action warning";
|
||||
b1.innerText = "X";
|
||||
let b2 = document.createElement("b");
|
||||
b2.className = "action success";
|
||||
b2.innerText = "E";
|
||||
|
||||
// 将 td1, td2, td3, td4, b1, b2 添加到 tr 中
|
||||
tr.append(td1);
|
||||
tr.append(td2);
|
||||
tr.append(td3);
|
||||
tr.append(td4);
|
||||
td4.append(b1);
|
||||
td4.append(b2);
|
||||
|
||||
// 将 tr 添加到 table 中
|
||||
table.append(tr);
|
||||
|
||||
max_id++;
|
||||
delAction(); // 添加方法监听
|
||||
editAction();
|
||||
} else {
|
||||
console.log("---modify---");
|
||||
let trs = document.getElementsByTagName("tr");
|
||||
for (let i = 0; i < trs.length; i++) {
|
||||
if (trs[i].children[0].innerText == id_) {
|
||||
console.log(trs[i]);
|
||||
trs[i].children[1].innerText = name;
|
||||
trs[i].children[2].innerText = phone;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.uid.value = "0";
|
||||
form.username.value = "";
|
||||
form.phone.value = "";
|
||||
|
||||
return false; // 阻止表单的默认提交行为, 不会向服务器提交数据， 只是前端的数据处理
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>JavaScript脚本开发</title>
|
||||
|
||||
<style></style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// 字符串类型
|
||||
let name = "123"; // 单引号
|
||||
let title = "good"; // 双引号
|
||||
let age = 29; // 整数
|
||||
let score = 125.5; // 小数类型，float
|
||||
|
||||
let content =
|
||||
name + "-" + title + ", age is " + age + ", score is " + score;
|
||||
alert(content);
|
||||
|
||||
let x = "12",
|
||||
y = "45";
|
||||
let ret = x * y; // 自动将数字的字符串转成数值
|
||||
console.log(ret); // 控制台打印结果 540
|
||||
|
||||
let a = "123";
|
||||
let a1 = parseInt(a); // 将 a 转化为 int
|
||||
let a2 = Number(a); // 将 a 转化为数值（整数int和小数float）
|
||||
|
||||
console.info(a1);
|
||||
console.error(a2); // 会议错误标签打印
|
||||
|
||||
let b = "123abc";
|
||||
let b1 = parseInt(b); // 遇到非数字则停止转换
|
||||
console.warn(b1);
|
||||
|
||||
let b2 = Number(b); // 如果字符串存在非数字，则返回 NaN （Not a Number）
|
||||
console.error(b2);
|
||||
|
||||
let c = "1.25";
|
||||
let c1 = parseInt(c); // 遇到小数点结束转换
|
||||
let c2 = parseFloat(c);
|
||||
let c3 = Number(c); // 可以直接转换为对应数字，如果遇到字母，则返回 NaN
|
||||
console.log(c, c1, c2, c3);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>JS运算符</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
let x = 100,
|
||||
y = "100";
|
||||
|
||||
// == 只比较值
|
||||
// ===也比较数据类型
|
||||
console.log(x === y);
|
||||
console.log(x == y);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>JS分支与循环语句</title>
|
||||
</head>
|
||||
<body>
|
||||
<label>请输入一个整数：</label>
|
||||
<!-- input 的 onchange 表示输入数据之后回车，则调用的时间处理函数 -->
|
||||
<input placeholder="建议大于10的整数" onchange="handler1(this)" />
|
||||
<h3>输入的整数以内所有偶数和：</h3>
|
||||
<div id="ret"></div>
|
||||
<script>
|
||||
function handler1(input_element) {
|
||||
let n = parseInt(input_element.value); // 将字符串转换为整数
|
||||
console.log(input_element.value);
|
||||
input_element.value = ""; // 清空输入框的内容
|
||||
|
||||
let sum_ = 0;
|
||||
for (let i = 2; i <= n; i++) {
|
||||
if (i % 2 == 0) {
|
||||
sum_ += i;
|
||||
}
|
||||
}
|
||||
|
||||
// 通过标签的 id 属性获取元素（浏览器会自动将 id 属性的值作为一个变量名）
|
||||
// 通过 id 获取元素
|
||||
let ret = document.getElementById("ret");
|
||||
// ret.innerText = "" 显示纯文本，不渲染HTML标签
|
||||
// ret.innerHTML = "" 显示HTML标签，渲染HTML标签
|
||||
ret.innerHTML = "<b style='color: red;'>" + sum_ + "</b>";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>猜一猜小游戏</title>
|
||||
<style>
|
||||
.ok {
|
||||
color: green;
|
||||
font-size: 25px;
|
||||
font-family: "楷体";
|
||||
}
|
||||
|
||||
.fail {
|
||||
color: red;
|
||||
font-size: 25px;
|
||||
font-family: "仿宋";
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>请猜一下 1~10 的哪一个整数</h3>
|
||||
<!-- input 的 onchange 表示输入数据之后回车，则调用的时间处理函数 -->
|
||||
<input placeholder="建议大于10的整数" onchange="guest(this.value)" />
|
||||
<div id="ret"></div>
|
||||
<script>
|
||||
// Math.random() 生成一个 0~1 之间的随机数 [0,1) 区间的小数
|
||||
// Math.ceil() 上行取整
|
||||
// Math.floor() 下行取整
|
||||
var rand_n = parseInt(Math.random() * 10 + 1);
|
||||
function guest(n) {
|
||||
ret.innerText = "->" + n;
|
||||
let input_n = parseInt(n);
|
||||
if (input_n === rand_n) {
|
||||
ret.innerHTML = "<span class='ok'> 恭喜您猜中了 </span>";
|
||||
} else {
|
||||
ret.innerHTML = "<span class='fail'> 加油，再猜一次试试</span>";
|
||||
}
|
||||
|
||||
// 生成新的随机数
|
||||
rand_n = parseInt(Math.random() * 10 + 1);
|
||||
console.log("新的随机数:" + rand_n);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>图片播放器</title>
|
||||
|
||||
<style>
|
||||
#preImg {
|
||||
/* padding: 50px; */
|
||||
margin: 50px;
|
||||
}
|
||||
|
||||
#preImg:hover {
|
||||
box-shadow: 0 0 20px 10px yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="img-container">
|
||||
<img id="preImg" src="./images/01.jpg" width="400" height="300" />
|
||||
</div>
|
||||
<button onclick="playImg(this)">play</button>
|
||||
<script>
|
||||
var isPlaying = false;
|
||||
var intervalID; // 定时器的ID
|
||||
|
||||
function playImg(btn) {
|
||||
// 事件的处理函数
|
||||
if (isPlaying) {
|
||||
btn.innerText = "play";
|
||||
clearInterval(intervalID); // 关闭定时器
|
||||
} else {
|
||||
btn.innerText = "pause";
|
||||
intervalID = setInterval(play_image_run, 1000); // 1000ms = 1s
|
||||
}
|
||||
isPlaying = !isPlaying;
|
||||
}
|
||||
|
||||
var curImgIndex = 0;
|
||||
var imgArr = [
|
||||
"./images/01.jpg",
|
||||
"./images/02.jpg",
|
||||
"./images/03.jpg",
|
||||
"./images/04.jpg",
|
||||
];
|
||||
function play_image_run() {
|
||||
curImgIndex++;
|
||||
if (curImgIndex > 3) {
|
||||
curImgIndex = 0;
|
||||
}
|
||||
console.log("---" + curImgIndex + "---");
|
||||
console.log(imgArr[curImgIndex]);
|
||||
preImg.setAttribute("src", imgArr[curImgIndex]);
|
||||
}
|
||||
|
||||
function myplay() {
|
||||
// 获取图片元素
|
||||
let img = document.getElementById("preImg");
|
||||
// 获取图片的 src 属性值
|
||||
let src = img.src;
|
||||
// 获取图片的文件名
|
||||
let filename = src.substring(src.lastIndexOf("/") + 1);
|
||||
// 获取图片的序号
|
||||
let index = parseInt(filename.substring(0, 2));
|
||||
// 生成新的图片序号
|
||||
index = (index + 1) % 4;
|
||||
// 生成新的图片文件名
|
||||
filename = (index < 10 ? "0" : "") + index + ".jpg";
|
||||
// 生成新的图片的 src 属性值
|
||||
src = "./images/" + filename;
|
||||
// 修改图片的 src 属性值
|
||||
img.src = src;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>实时显示日期和时间</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="dateDIV"></div>
|
||||
|
||||
<script>
|
||||
// js 中的匿名函数: function(){}
|
||||
// js 中的箭头函数: ()=>{}
|
||||
// (n,m) => n*m n*m就是匿名函数返回的值
|
||||
setInterval(() => {
|
||||
// Date 日期时间类
|
||||
let cur_date = new Date();
|
||||
let date_str =
|
||||
"" +
|
||||
cur_date.getFullYear() +
|
||||
"年" +
|
||||
cur_date.getMonth() +
|
||||
"月" +
|
||||
cur_date.getDate() +
|
||||
"日" +
|
||||
" " +
|
||||
cur_date.getHours() +
|
||||
"时" +
|
||||
cur_date.getMinutes() +
|
||||
"分" +
|
||||
cur_date.setSeconds() +
|
||||
"秒";
|
||||
|
||||
dateDIV.innerText = date_str;
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>表单数据验证</title>
|
||||
|
||||
<style>
|
||||
form {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: none;
|
||||
padding: 10px 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.row > label {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.input_error {
|
||||
color: red;
|
||||
border: 1px solid red;
|
||||
outline: 1px solid yellow;
|
||||
}
|
||||
|
||||
.center {
|
||||
/* 水平方向中心位置 */
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form onsubmit="return validForm(this)">
|
||||
<div class="row">
|
||||
<label>手机号</label>
|
||||
<!-- onfocus 当标签获取到焦点时，调用的处理程序 -->
|
||||
<input
|
||||
onfocus="this.className='';"
|
||||
name="phone"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>口令</label>
|
||||
<input onfocus="this.className='';" name="pwd" type="password" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>确认口令</label>
|
||||
<input onfocus="this.className='';" name="pwd2" type="password" />
|
||||
</div>
|
||||
<div class="row center">
|
||||
<button>登录</button>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
function validForm(form) {
|
||||
console.log(form.phone.value);
|
||||
let hasError = false;
|
||||
if (!/1[3-9]\d{9}/.test(form.phone.value)) {
|
||||
form.phone.className = "input_error";
|
||||
hasError = true; // 有错
|
||||
}
|
||||
// 验证口令：有字母数字组成的至少8位的字符串
|
||||
if (!/[a-zA-Z][a-zA-Z0-9]{7,}/.test(form.pwd.value)) {
|
||||
form.pwd.className = "input_error";
|
||||
hasError = true; // 有错
|
||||
}
|
||||
|
||||
// 验证两次口令是否相等
|
||||
if (form.pwd.value != form.pwd2.value) {
|
||||
form.pwd2.className = "input_error";
|
||||
hasError = true; // 有错
|
||||
}
|
||||
console.log(form.pwd.value);
|
||||
console.log(form.pwd2.value);
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>window窗口对象</title>
|
||||
</head>
|
||||
<body>
|
||||
<span data-url="css3.html" data-target="_self" onclick="open_page(event)"
|
||||
>打开主页</span
|
||||
><br />
|
||||
<span data-url="css1.html" data-target="_blank" onclick="open_page(event)"
|
||||
>打开样式1</span
|
||||
><br />
|
||||
|
||||
<script>
|
||||
// event 表示在 span 标签上发生的事件对象
|
||||
// event 对象的核心属性：
|
||||
// 1) target 发生事件的目标对象（事件源）
|
||||
// 2) x,y 事件发生的坐标
|
||||
// 3) type 事件类型, 如：click, dbclick, mousemove, mouseover, mouseout, mouseup, mousedown 等
|
||||
// 4) preventDefault() 阻止默认事件
|
||||
function open_page(event) {
|
||||
console.log(event);
|
||||
// 获取点击的标签元素对象
|
||||
let span = event.target;
|
||||
// 从点击的目标对象中获取数据集 dataset, 里面存储了所有的 data-xxx 属性及其值
|
||||
let page_url = span.dataset.url;
|
||||
let page_target = span.dataset.target;
|
||||
|
||||
// open(url, target, features, replace) 是 window 对象的方法，用于打开新的窗口
|
||||
// 在页面的 script 标签中，window 对象可以省略
|
||||
open(page_url, page_target); // 打开新的页面
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title>登录界面</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form onsubmit="return login(this);">
|
||||
<div>
|
||||
<label>用户名</label>
|
||||
<input name="name" />
|
||||
</div>
|
||||
<div>
|
||||
<label>口 令</label>
|
||||
<input name="pwd" type="password" />
|
||||
</div>
|
||||
<div>
|
||||
<button>登录</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function login(form) {
|
||||
// 创建了 js 对象，只包含属性的对象即为 json 对象
|
||||
let login_data = {
|
||||
// 对象的属性和属性值定义
|
||||
name: form.name.value.trim(),
|
||||
pwd: form.pwd.value.trim(),
|
||||
};
|
||||
|
||||
fetch("/cgi-bin/login.cgi", {
|
||||
method: "POST", // 请求方法
|
||||
// 将 login_data 对象转为 JSON 字符串
|
||||
body: JSON.stringify(login_data), // 请求体
|
||||
headers: {
|
||||
"Content-Type": "application/json", // 请求头
|
||||
},
|
||||
})
|
||||
.then((resp) => resp.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
// 判断是否登录成功，成功是打开 css3.html 页面
|
||||
if (data.code == 0) {
|
||||
// 浏览器存储登录成功后的用户信息
|
||||
localStorage.setItem("login_user", JSON.stringify(data.data));
|
||||
open("index.html", "_self");
|
||||
} else {
|
||||
// 如果失败，则弹出对话框，显示登录失败消息
|
||||
alert(data.msg);
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="flykhan" />
|
||||
<meta name="keywords" content="c c++ 物联网" />
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user