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

49
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/广告/index.html Normal file
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>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.ad {
width: 300px;
height: 300px;
position: fixed;
right: 0;
bottom: 0;
background: red;
}
.ad span {
width: 60px;
height: 30px;
background: #000;
color: #fff;
text-align: center;
line-height: 30px;
position: absolute;
right: 0;
top: 0;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="ad">
<span>x关闭</span>
</div>
</body>
<script src="./index.js"></script>
</html>

12
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/广告/index.js Normal file
View File

@@ -0,0 +1,12 @@
var close = document.querySelector(".ad span");
var dis = document.querySelector(".ad");
var count = 0;
close.onclick = function() {
console.log("11");
count += 1
if (count == 1) {
open("https://www.bilibili.com/")
} else {
dis.classList.add("hidden")
}
}

29
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/搜索建议/index.html Normal file
View File

@@ -0,0 +1,29 @@
<!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>
body {
margin: 0;
padding: 0;
}
ul li span {
color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入关键词">
<ul>
</ul>
</body>
<script src="./index.js"></script>
</html>

24
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/搜索建议/index.js Normal file
View File

@@ -0,0 +1,24 @@
var list = ['html学习', '不想学习', '想吃饭', '我没吃饱', '不写代码', '我的学习代码没写完，懒得学习'];
var Keyword = document.querySelector("input");
var ul = document.querySelector("ul");
var Newlist = []
Keyword.oninput = function() {
NewsList = [];
if (Keyword.value.length != 0) {
list.forEach(function(v) {
if (v.includes(Keyword.value)) {
v = v.replaceAll(Keyword.value, `<span>${Keyword.value}</span>`)
NewsList.push(v)
}
});
ul.innerHTML = ""
NewsList.forEach(function(v) {
ul.innerHTML += `<li>${v}</li>`
})
console.log(NewsList);
} else {
ul.innerHTML = ""
}
}

333
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/滚动固定/index.html Normal file
View File

@@ -0,0 +1,333 @@
<!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>
<style>
.header {
width: 100%;
height: 60px;
background: red;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
}
</style>
<body>
<ul>
<div class="header"></div>
<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>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
<li>101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li>106</li>
<li>107</li>
<li>108</li>
<li>109</li>
<li>110</li>
<li>111</li>
<li>112</li>
<li>113</li>
<li>114</li>
<li>115</li>
<li>116</li>
<li>117</li>
<li>118</li>
<li>119</li>
<li>120</li>
<li>121</li>
<li>122</li>
<li>123</li>
<li>124</li>
<li>125</li>
<li>126</li>
<li>127</li>
<li>128</li>
<li>129</li>
<li>130</li>
<li>131</li>
<li>132</li>
<li>133</li>
<li>134</li>
<li>135</li>
<li>136</li>
<li>137</li>
<li>138</li>
<li>139</li>
<li>140</li>
<li>141</li>
<li>142</li>
<li>143</li>
<li>144</li>
<li>145</li>
<li>146</li>
<li>147</li>
<li>148</li>
<li>149</li>
<li>150</li>
<li>151</li>
<li>152</li>
<li>153</li>
<li>154</li>
<li>155</li>
<li>156</li>
<li>157</li>
<li>158</li>
<li>159</li>
<li>160</li>
<li>161</li>
<li>162</li>
<li>163</li>
<li>164</li>
<li>165</li>
<li>166</li>
<li>167</li>
<li>168</li>
<li>169</li>
<li>170</li>
<li>171</li>
<li>172</li>
<li>173</li>
<li>174</li>
<li>175</li>
<li>176</li>
<li>177</li>
<li>178</li>
<li>179</li>
<li>180</li>
<li>181</li>
<li>182</li>
<li>183</li>
<li>184</li>
<li>185</li>
<li>186</li>
<li>187</li>
<li>188</li>
<li>189</li>
<li>190</li>
<li>191</li>
<li>192</li>
<li>193</li>
<li>194</li>
<li>195</li>
<li>196</li>
<li>197</li>
<li>198</li>
<li>199</li>
<li>200</li>
<li>201</li>
<li>202</li>
<li>203</li>
<li>204</li>
<li>205</li>
<li>206</li>
<li>207</li>
<li>208</li>
<li>209</li>
<li>210</li>
<li>211</li>
<li>212</li>
<li>213</li>
<li>214</li>
<li>215</li>
<li>216</li>
<li>217</li>
<li>218</li>
<li>219</li>
<li>220</li>
<li>221</li>
<li>222</li>
<li>223</li>
<li>224</li>
<li>225</li>
<li>226</li>
<li>227</li>
<li>228</li>
<li>229</li>
<li>230</li>
<li>231</li>
<li>232</li>
<li>233</li>
<li>234</li>
<li>235</li>
<li>236</li>
<li>237</li>
<li>238</li>
<li>239</li>
<li>240</li>
<li>241</li>
<li>242</li>
<li>243</li>
<li>244</li>
<li>245</li>
<li>246</li>
<li>247</li>
<li>248</li>
<li>249</li>
<li>250</li>
<li>251</li>
<li>252</li>
<li>253</li>
<li>254</li>
<li>255</li>
<li>256</li>
<li>257</li>
<li>258</li>
<li>259</li>
<li>260</li>
<li>261</li>
<li>262</li>
<li>263</li>
<li>264</li>
<li>265</li>
<li>266</li>
<li>267</li>
<li>268</li>
<li>269</li>
<li>270</li>
<li>271</li>
<li>272</li>
<li>273</li>
<li>274</li>
<li>275</li>
<li>276</li>
<li>277</li>
<li>278</li>
<li>279</li>
<li>280</li>
<li>281</li>
<li>282</li>
<li>283</li>
<li>284</li>
<li>285</li>
<li>286</li>
<li>287</li>
<li>288</li>
<li>289</li>
<li>290</li>
<li>291</li>
<li>292</li>
<li>293</li>
<li>294</li>
<li>295</li>
<li>296</li>
<li>297</li>
<li>298</li>
<li>299</li>
<li>300</li>
</ul>
</body>
<script src="./index.js"></script>
</html>

10
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/滚动固定/index.js Normal file
View File

@@ -0,0 +1,10 @@
var header = document.querySelector(".header");
window.onscroll = function() {
var high = document.querySelector("html").scrollTop;
if (high > 300) {
header.classList.add("fixed");
} else {
header.classList.remove("fixed")
}
}

44
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/留言/index.html Normal file
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>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.main {
width: 300px;
height: 250px;
margin: 20% auto;
border: 1px solid #000;
position: relative;
}
textarea {
width: 100%;
height: 100%;
}
span {
position: absolute;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<textarea placeholder="请输入留言"></textarea>
<span>0/50</span>
</div>
</body>
<script src="./index.js"></script>
</html>

10
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/留言/index.js Normal file
View File

@@ -0,0 +1,10 @@
var Textarea = document.querySelector("textarea");
var Span = document.querySelector("span");
Textarea.oninput = function() {
var len = Textarea.value.length;
if (len > 50) {
Textarea.value = Textarea.value.substring(0, 50);
} else { Span.innerText = `${Textarea.value.length}/50` }
}

28
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/社会主义1.0/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!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>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
span {
transition: all ease 1s;
}
</style>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>

38
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/社会主义1.0/index.js Normal file
View File

@@ -0,0 +1,38 @@
var list = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var body = document.querySelector("body");
var index = 0;
body.onclick = function(e) {
var Xcoord = e.x;
var Ycoord = e.y;
var span = document.createElement("span");
var color = parseInt(Math.random() * 360);
span.innerText = list[index];
span.style.position = "fixed";
span.style.left = `${Xcoord}px`
span.style.top = `${Ycoord}px`
span.style.color = `hsl(${color},100%,50%,0.7)`;
motion(span, Ycoord)
function motion(el, top) {
setTimeout(function() {
el.style.top = `${top-100}px `
}, 300);
setTimeout(function() {
body.removeChild(el)
}, 1300);
}
body.appendChild(span)
console.log(span);
index += 1;
if (index > 11) {
index = 0
}
}

28
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/社会主义2.0/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!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>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
span {
transition: all ease 1s;
}
</style>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>

65
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/社会主义2.0/index.js Normal file
View File

@@ -0,0 +1,65 @@
var list = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var body = document.querySelector("body");
var index = 0;
body.onclick = function(e) {
var Xcoord = e.x;
var Ycoord = e.y;
var span = document.createElement("span");
var color = parseInt(Math.random() * 360);
span.innerText = list[index];
span.style.position = "fixed";
span.style.left = `${Xcoord}px`
span.style.top = `${Ycoord}px`
span.style.color = `hsl(${color},100%,50%,0.7)`;
var direction = [
'LeftTop', 'LeftBottom',
'RightTop', 'RightBottom',
];
var directionIndex = parseInt(Math.random() * direction.length);
motion(direction[directionIndex], span, Xcoord, Ycoord);
function motion(direction, el, X, Y) {
var newX = Math.random() * X
var newY = Math.random() * Y
setTimeout(function() {
switch (direction) {
case "LeftTop":
el.style.left = `${Xcoord-newX}px`
el.style.top = `${Ycoord-newY}px`
break;
case "RightTop":
el.style.left = `${Xcoord+newX}px`
el.style.top = `${Ycoord-newY}px`
break;
case "LeftBottom":
el.style.left = `${Xcoord-newX}px`
el.style.top = `${Ycoord+newY}px`
break;
case "RightBottom":
el.style.left = `${Xcoord+newX}px`
el.style.top = `${Ycoord+newY}px`
break;
default:
break;
}
}, 300);
setTimeout(function() {
body.removeChild(el)
}, 1300);
}
body.appendChild(span)
console.log(span);
index += 1;
if (index > 11) {
index = 0
}
}

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/12.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/14.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 890 KiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/16.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/17.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

166
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/index.html Normal file
View File

@@ -0,0 +1,166 @@
<!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>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_p89wlanilpr.css">
<style>
body,
ul,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.smallImg {
width: 100px;
}
.zhezhao {
width: 100vw;
height: 100vh;
background: #000;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 998;
opacity: .5;
}
.preview {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: center;
}
.closed {
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
text-align: center;
line-height: 35px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 100%;
}
.action .d {
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #606266;
border-color: #fff;
position: absolute;
text-align: center;
line-height: 40px;
border-radius: 100%;
}
.left {
left: 40px;
}
.right {
right: 40px;
}
.operation {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
position: absolute;
border-radius: 22px;
display: flex;
justify-content: space-around;
align-items: center;
}
.operation li {}
.operation li i {
font-size: 23px;
color: #fff;
}
.xz {
display: inline-block;
transform: rotateY(180deg);
}
.mainImg {
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<img class="smallImg" src="./img/11.png" alt="">
<div class="zhezhao"></div>
<div class="preview">
<div class="closed">x</div>
<div class="action">
<div class="left d">&lt;</div>
<div class="right d">&gt;</div>
</div>
<img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;" src="./img/11.png" alt="">
<ul class="operation">
<li>
<i class="iconfont icon-suoxiao suoxiao"></i>
</li>
<li>
<i class="iconfont icon-fangda fangda"></i>
</li>
<li>
<i class="iconfont icon-fullscreen fullscreen"></i>
</li>
<li class="xz">
<i class="iconfont icon-shuaxin leftshuaxin"></i>
</li>
<li>
<i class="iconfont icon-shuaxin rightshuaxin"></i>
</li>
</ul>
</div>
</div>
</body>
<script src="./index.js"></script>
</html>

42
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/index.js Normal file
View File

@@ -0,0 +1,42 @@
var suoxiao = $(".suoxiao"),
fangda = $(".fangda"),
fullscreen = $(".fullscreen"),
leftshuaxin = $(".leftshuaxin"),
rightshuaxin = $(".rightshuaxin");
var mainImg = $(".mainImg")
suoxiao.onclick = function() {
var value = Scale() - 0.2;
if (value != 0) {
$(".mainImg").style.transform = `scale(${value}) rotate(${Rotate()}deg)`
}
}
fangda.onclick = function() {
$(".mainImg").style.transform = `scale(${Scale() + 0.2}) rotate(${Rotate()}deg)` //两个值都有才可以使用
}
fullscreen.onclick = function() {
$(".mainImg").style.transform = `scale(2) rotate(${Rotate()}deg)`
}
leftshuaxin.onclick = function() {
xuanzhuan(-90)
}
rightshuaxin.onclick = function() {
xuanzhuan(90)
}
//封装
function $(className) {
return document.querySelector(className);
}
function xuanzhuan(offset) {
$(".mainImg").style.transform = `scale(${Scale()}) rotate(${Rotate() + offset}deg)`
}
function Scale() { //获取缩小的值
return Number($(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}
function Rotate() { //获取旋转的值
return Number($(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}