tnblog
首页
视频
资源
登录
原

代码雨

5397人阅读 2019/4/10 16:26 总访问：3467500 评论：2 收藏：1 手机
分类: 前端

喜欢的拿起去试一下嘛！

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7. <title>Document</title>

  8. <style>

  9. *{

  10. padding: 0;

  11. margin: 0;

  12. }

  13. /*#canvas{

  14.             display: block;

  15.             border: 1px solid black;

  16.             margin: 50px auto;

  17.              宽高在标签上设置 

  18.         }*/

  19. </style>

  20. </head>

  21. <body>

  22. <canvas id="canvas"></canvas>

  23. <script>

  24. document.body.parentNode.style.overflow = "hidden";

  25. var oCanvas = document.querySelector("#canvas"),

  26. // 获取一下canvas里面所有api（方法）

  27. oCtx = oCanvas.getContext("2d");

  28. //1获取可视区域的宽高 附值给画布

  29. var oWidth = window.innerWidth,

  30. oHeight = window.innerHeight;

  31. oCanvas.width = oWidth,

  32. oCanvas.height = oHeight;

  33. //2准备下落的字母

  34. var thischar = 'QWERTYUIOPASDFGHJKKLZXCVBNM';

  35. //3设置文字大小 

  36. var fontSize = 24;

  37. //4一行多少个

  38. var num = Math.floor(oWidth/fontSize);

  39. //用一个数组去存放字母的y坐标

  40. var drops =[];

  41. for (let index = 0; index < num; index++) {

  42. drops.push(0);

  43. }

  44. function draw() {

  45. oCtx.fillStyle = "rgba(0,0,0,0.1)";

  46. //设置背景颜色

  47. oCtx.fillRect(0,0,oWidth,oHeight);

  48. oCtx.fillStyle="green";

  49. oCtx.font = fontSize+"px";

  50. //造字母

  51. for(var i = 0;i <num;i++){

  52. var oX = i*fontSize,

  53. oY = drops[i]*fontSize;

  54. //绘制坐标

  55. oCtx.fillText(thischar[Math.floor(Math.random()*thischar.length)],oX,oY);

  56. if (oY>oHeight&&Math.random()>0.95) {

  57. drops[i]=0;

  58. }

  59. drops[i]++;

  60. 

  61. }

  62. }

  63. setInterval(() => {

  64. draw();

  65. }, 50); //每隔50毫秒 去执行一次 draw这个函数

  66. </script>

  67. </body>

  68. </html>

  69. <!-- 

  70.     基础

  71.        //线条开始的坐标（x,y）

  72.             // oCtx.moveTo(20,20);

  73.             // //线条终止的地方

  74.             // oCtx.lineTo(200,200);

  75.             // //

  76.             // oCtx.lineTo(400,20);

  77.             // oCtx.lineTo(20,20);

  78.             // //填充颜色

  79.             // oCtx.fillStyle="lightblue";

  80.             // oCtx.fill();

  81.             // //画到画布上去

  82.             // oCtx.stroke();

  83.  -->

下面是做的一个简单的登录页面，做得不是很好呀

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7. <title>Document</title>

  8. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

  9. <style>

  10. *{

  11. padding: 0;

  12. margin: 0;

  13. font-family: "montserrat",sans-serif;

  14. }

  15. /*#canvas{

  16.             display: block;

  17.             border: 1px solid black;

  18.             margin: 50px auto;

  19.              宽高在标签上设置 

  20.         }*/

  21. #mytoby {

  22. position: absolute;

  23. width: 350px;

  24. height: 400px;

  25. top: 50%;

  26. left: 50%;

  27. transform: translate(-50%,-50%);

  28. background-color: rgb(73, 73, 66);

  29. opacity: .7;

  30. border-radius: 5px;

  31. }

  32. .mytoby-form{

  33. position: absolute;

  34. top: 50%;

  35. left: 50%;

  36. transform: translate(-50%,-50%);

  37. text-align: center;

  38. }

  39. .mytoby-form h1{

  40. font-weight: 400;

  41. margin-top: 0;

  42. color: white;

  43. }

  44. .txtb{

  45. display: block;

  46. box-sizing: border-box;

  47. border: 1px solid white;

  48. width: 240px;

  49. padding: 10px;

  50. border-radius: 5px;

  51. text-align: center;

  52. margin: 10px auto;

  53. outline: none;

  54. }

  55. .txtsub{

  56. width: 240px;

  57. background-color: #2c3e50;

  58. border: 0;

  59. color: white;

  60. padding: 10px;

  61. border-radius: 6px;

  62. cursor: pointer;

  63. transition: 1s;

  64. }

  65. .txtsub:hover{

  66. background-color: white;

  67. color: #2c3e50;

  68. font-weight: bold;

  69. }

  70. .now-hr{

  71. border-bottom: 1px solid white;

  72. margin: 15px auto;

  73. }

  74. .then-other{

  75. display: block;

  76. box-sizing: border-box;

  77. position: relative;

  78. list-style-type: none;

  79. }

  80. .then-other li{

  81. display: inline-block;

  82. padding: 10px;

  83. 

  84. }

  85. .then-other li a{

  86. color: white;

  87. text-decoration: none;

  88. transition: 1s;

  89. }

  90. .then-other li:hover{

  91. background-color: white;

  92. cursor: pointer;

  93. }

  94. .then-other li:hover a{

  95. color: #2c3e50;

  96. 

  97. }

  98. </style>

  99. </head>

  100. <body>

  101. <div id="mytoby">

  102. <form class="mytoby-form" action="index.html" method="post">

  103. <h1>WelCome</h1>

  104. <input class="txtb" type="password" placeholder="Username">

  105. <input class="txtb" type="password" placeholder="Password">

  106. <input class="txtsub" type="submit" value="Login">

  107. <p class="now-hr"></p>

  108. <ul class="then-other">

  109. <li><a href="index.html">无法验证?</a></li>

  110. <li><a href="index.html">忘记密码?</a></li>

  111. </ul>

  112. </form>

  113. </div>

  114. <canvas id="canvas"></canvas>

  115. <script>

  116. document.body.parentNode.style.overflow = "hidden";

  117. var oCanvas = document.querySelector("#canvas"),

  118. // 获取一下canvas里面所有api（方法）

  119. oCtx = oCanvas.getContext("2d");

  120. //1获取可视区域的宽高 附值给画布

  121. var oWidth = window.innerWidth,

  122. oHeight = window.innerHeight;

  123. oCanvas.width = oWidth,

  124. oCanvas.height = oHeight;

  125. //2准备下落的字母

  126. var thischar = 'QWERTYUIOPASDFGHJKKLZXCVBNM';

  127. //3设置文字大小 

  128. var fontSize = 24;

  129. //4一行多少个

  130. var num = Math.floor(oWidth/fontSize);

  131. //用一个数组去存放字母的y坐标

  132. var drops =[];

  133. for (let index = 0; index < num; index++) {

  134. drops.push(0);

  135. }

  136. function draw() {

  137. oCtx.fillStyle = "rgba(0,0,0,0.1)";

  138. //设置背景颜色

  139. oCtx.fillRect(0,0,oWidth,oHeight);

  140. oCtx.fillStyle="green";

  141. oCtx.font = fontSize+"px";

  142. //造字母

  143. for(var i = 0;i <num;i++){

  144. var oX = i*fontSize,

  145. oY = drops[i]*fontSize;

  146. //绘制坐标

  147. oCtx.fillText(thischar[Math.floor(Math.random()*thischar.length)],oX,oY);

  148. if (oY>oHeight&&Math.random()>0.95) {

  149. drops[i]=0;

  150. }

  151. drops[i]++;

  152. 

  153. }

  154. }

  155. setInterval(() => {

  156. draw();

  157. }, 50); //每隔50毫秒 去执行一次 draw这个函数

  158. </script>

  159. </body>

  160. </html>

  161. <!-- 

  162.     基础

  163.        //线条开始的坐标（x,y）

  164.             // oCtx.moveTo(20,20);

  165.             // //线条终止的地方

  166.             // oCtx.lineTo(200,200);

  167.             // //

  168.             // oCtx.lineTo(400,20);

  169.             // oCtx.lineTo(20,20);

  170.             // //填充颜色

  171.             // oCtx.fillStyle="lightblue";

  172.             // oCtx.fill();

  173.             // //画到画布上去

  174.             // oCtx.stroke();

  175.  -->



欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价

是伍尚金哇_v

2020/7/8 16:28:43

秀儿

回复
剑轩:@是伍尚金哇_v这个拿来整个啥音乐播放还可以

2020/7/8 19:39:59 回复

瑾语

2020/7/10 11:06:41

好看哎

回复
这一世以无限游戏为使命！
博主信息
排名
2
文章
634
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术