devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端开发——爱心代码&DOM部分学习（一）_前端爱心代码

作者：很楠不爱3 | 2024-02-16 11:23:15

赞

踩

前端爱心代码

前言

很高兴来到csdn！能够和大家一起分享和学习，在接下来的一段时间我将和大家一起学习计算机相关技术，也希望以后能够和大家分享更多（未接触）知识！在接下来的这个寒假期间，我也将更新一些关于我最近一段时间学的知识，还有最近，我正在学习前端，如果有一些大佬可以指点一下我，我会非常欢迎并感谢的！

知识分享

1.爱心代码

插曲

最近一段时间网上最火的一部剧关于点燃了我，温暖了我这部电视剧，剧中主角李峋用用代码实现了动态爱心代码实现，让很多学计算机同学都在深刻的琢磨着，也让很多不是计算机专业的的人，痴迷计算机。

这个图其实是动态的，只是本人目前还不知道如何将动态图展现出来！大家先凑活一下看看吧，如果可以的话大家复制代码去运行就可以看到动态结果了。

 

下面就有关于李峋代码的python实现版：

  1. import random
  2. from math import sin, cos, pi, log
  3. from tkinter import *
  4.  
  5. CANVAS_WIDTH = 640  # 画布的宽
  6. CANVAS_HEIGHT = 480  # 画布的高
  7. CANVAS_CENTER_X = CANVAS_WIDTH / 2  # 画布中心的X轴坐标
  8. CANVAS_CENTER_Y = CANVAS_HEIGHT / 2  # 画布中心的Y轴坐标
  9. IMAGE_ENLARGE = 11  # 放大比例
  10. HEART_COLOR = "red"  # 心的颜色
  11.  
  12.  
  13. def heart_function(t, shrink_ratio: float = IMAGE_ENLARGE):
  14.     """
  15.     “爱心函数生成器”
  16.     :param shrink_ratio: 放大比例
  17.     :param t: 参数
  18.     :return: 坐标
  19.     """
  20.     # 基础函数
  21.     x = 16 * (sin(t) ** 3)
  22.     y = -(13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t))
  23.  
  24.     # 放大
  25.     x *= shrink_ratio
  26.     y *= shrink_ratio
  28.     # 移到画布中央
  29.     x += CANVAS_CENTER_X
  30.     y += CANVAS_CENTER_Y
  31.  
  32.     return int(x), int(y)
  33.  
  34.  
  35. def scatter_inside(x, y, beta=0.15):
  36.     """
  37.     随机内部扩散
  38.     :param x: 原x
  39.     :param y: 原y
  40.     :param beta: 强度
  41.     :return: 新坐标
  42.     """
  43.     ratio_x = - beta * log(random.random())
  44.     ratio_y = - beta * log(random.random())
  45.  
  46.     dx = ratio_x * (x - CANVAS_CENTER_X)
  47.     dy = ratio_y * (y - CANVAS_CENTER_Y)
  48.  
  49.     return x - dx, y - dy
  50.  
  51.  
  52. def shrink(x, y, ratio):
  53.     """
  54.     抖动
  55.     :param x: 原x
  56.     :param y: 原y
  57.     :param ratio: 比例
  58.     :return: 新坐标
  59.     """
  60.     force = -1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.6)  # 这个参数...
  61.     dx = ratio * force * (x - CANVAS_CENTER_X)
  62.     dy = ratio * force * (y - CANVAS_CENTER_Y)
  63.     return x - dx, y - dy
  64.  
  65.  
  66. def curve(p):
  67.     """
  68.     自定义曲线函数，调整跳动周期
  69.     :param p: 参数
  70.     :return: 正弦
  71.     """
  72.     return 4 * (2 * sin(4 * p)) / (2 * pi)
  73.  
  74.  
  75. class Heart:
  76.     """
  77.     爱心类
  78.     """
  79.  
  80.     def __init__(self, generate_frame=20):
  81.         self._points = set()  # 原始爱心坐标集合
  82.         self._edge_diffusion_points = set()  # 边缘扩散效果点坐标集合
  83.         self._center_diffusion_points = set()  # 中心扩散效果点坐标集合
  84.         self.all_points = {}  # 每帧动态点坐标
  85.         self.build(2000)
  86.  
  87.         self.random_halo = 1000
  88.  
  89.         self.generate_frame = generate_frame
  90.         for frame in range(generate_frame):
  91.             self.calc(frame)
  92.  
  93.     def build(self, number):
  94.         # 爱心
  95.         for _ in range(number):
  96.             t = random.uniform(0, 2 * pi)  # 随机不到的地方造成爱心有缺口
  97.             x, y = heart_function(t)
  98.             self._points.add((x, y))
  99.  
  100.         # 爱心内扩散
  101.         for _x, _y in list(self._points):
  102.             for _ in range(3):
  103.                 x, y = scatter_inside(_x, _y, 0.05)
  104.                 self._edge_diffusion_points.add((x, y))
  105.  
  106.         # 爱心内再次扩散
  107.         point_list = list(self._points)
  108.         for _ in range(4000):
  109.             x, y = random.choice(point_list)
  110.             x, y = scatter_inside(x, y, 0.17)
  111.             self._center_diffusion_points.add((x, y))
  112.  
  113.     @staticmethod
  114.     def calc_position(x, y, ratio):
  115.         # 调整缩放比例
  116.         force = 1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.520)
  117.  
  118.         dx = ratio * force * (x - CANVAS_CENTER_X) + random.randint(-1, 1)
  119.         dy = ratio * force * (y - CANVAS_CENTER_Y) + random.randint(-1, 1)
  120.  
  121.         return x - dx, y - dy
  122.  
  123.     def calc(self, generate_frame):
  124.         ratio = 10 * curve(generate_frame / 10 * pi)  # 圆滑的周期的缩放比例
  125.  
  126.         halo_radius = int(4 + 6 * (1 + curve(generate_frame / 10 * pi)))
  127.         halo_number = int(3000 + 4000 * abs(curve(generate_frame / 10 * pi) ** 2))
  128.  
  129.         all_points = []
  130.  
  131.         # 光环
  132.         heart_halo_point = set()  # 光环的点坐标集合
  133.         for _ in range(halo_number):
  134.             t = random.uniform(0, 2 * pi)  # 随机不到的地方造成爱心有缺口
  135.             x, y = heart_function(t, shrink_ratio=11)
  136.             x, y = shrink(x, y, halo_radius)
  137.             if (x, y) not in heart_halo_point:
  138.                 # 处理新的点
  139.                 heart_halo_point.add((x, y))
  140.                 x += random.randint(-11, 11)
  141.                 y += random.randint(-11, 11)
  142.                 size = random.choice((1, 2, 2))  # 控制外围粒子的大小
  143.                 all_points.append((x, y, size))
  144.  
  145.         # 轮廓
  146.         for x, y in self._points:
  147.             x, y = self.calc_position(x, y, ratio)
  148.             size = random.randint(1, 3)
  149.             all_points.append((x, y, size))
  150.  
  151.         # 内容
  152.         for x, y in self._center_diffusion_points:
  153.             x, y = self.calc_position(x, y, ratio)
  154.             size = random.randint(1, 2)
  155.             all_points.append((x, y, size))
  156.  
  157.         self.all_points[generate_frame] = all_points
  158.  
  159.     def render(self, render_canvas, render_frame):
  160.         for x, y, size in self.all_points[render_frame % self.generate_frame]:
  161.             render_canvas.create_rectangle(x, y, x + size, y + size, width=0, fill=HEART_COLOR)
  162.  
  163.  
  164. def draw(main: Tk, render_canvas: Canvas, render_heart: Heart, render_frame=0):
  165.     render_canvas.delete('all')
  166.     render_heart.render(render_canvas, render_frame)
  167.     main.after(160, draw, main, render_canvas, render_heart, render_frame + 1)
  168.  
  169.  
  170. if __name__ == '__main__':
  171.     root = Tk()  # 一个Tk
  172.     root.title('爱心');
  173.     canvas = Canvas(root, bg='black', height=CANVAS_HEIGHT, width=CANVAS_WIDTH)
  174.     canvas.pack()
  175.     heart = Heart()  # 心
  176.     draw(root, canvas, heart)  # 开始画画~
  177.     root.mainloop()

爱心代码（ 前端实现）：

运行效果如下：

这段代码其实也是动态的，大家可以复制代码去看看效果

 代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         html,
  10.         body {
  11.             border: 0;
  12.             padding: 0;
  13.             margin: 0;
  14.             overflow: hidden;
  15.             background: #000;
  16.             }
  17.             
  18.             .info {
  19.             z-index: 999;
  20.             position: absolute;
  21.             left: 0;
  22.             top: 0;
  23.             padding: 10px;
  24.             color: #fff;
  25.             background: rgba(0, 0, 0, 0.5);
  26.             text-transform: capitalize;
  27.         }
  28.     
  29.  
  30.     </style>
  31. </head>
  32. <body>
  33.     <canvas width="300" height="300" style="width:100%;height:100vh;" id="c"></canvas>
  34.     <script>
  35.         var canvas = document.getElementById("c");
  36. var ctx = canvas.getContext("2d");
  37. var height = void 0,
  38.   width = void 0,
  39.   innerpoints = [],
  40.   outerpoints = [],
  41.   particles = [];
  42.  
  43. var noofpoints = 200,
  44.   trashold = 10;
  45. var x = void 0,
  46.   y = void 0,
  47.   p = void 0,
  48.   n = void 0,
  49.   point = void 0,
  50.   dx = void 0,
  51.   dy = void 0,
  52.   color = void 0;
  53. (deltaangle = (Math.PI * 2) / noofpoints), (r = Math.min(height, width) * 0.5);
  54.  
  55. var distance = function distance(x1, y1, x2, y2) {
  56.   return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
  57. };
  58. var mapVal = function mapVal(num, in_min, in_max, out_min, out_max) {
  59.   return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
  60. };
  61. var resize = function resize() {
  62.   height = ctx.canvas.clientHeight;
  63.   width = ctx.canvas.clientWidth;
  64.  
  65.   if (
  66.     ctx.canvas.clientWidth !== canvas.width ||
  67.     ctx.canvas.clientHeight !== canvas.height
  68.   ) {
  69.     console.log("resized");
  70.     canvas.width = width;
  71.     canvas.height = height;
  72.     ctx.translate(canvas.width / 2, canvas.height / 2);
  73.     ctx.rotate(-Math.PI);
  74.     innerpoints = [];
  75.     r = 10;
  76.     for (var i = deltaangle; i <= Math.PI * 2; i += deltaangle) {
  77.       x = r * 16 * Math.pow(Math.sin(i), 3);
  78.       y =
  79.         r *
  80.         (13 * Math.cos(i) -
  81.           5 * Math.cos(2 * i) -
  82.           2 * Math.cos(3 * i) -
  83.           Math.cos(4 * i));
  84.       innerpoints.push({
  85.         x: x,
  86.         y: y,
  87.       });
  88.  
  89.       x = 10 * r * 16 * Math.pow(Math.sin(i), 3);
  90.       y =
  91.         10 *
  92.         r *
  93.         (13 * Math.cos(i) -
  94.           5 * Math.cos(2 * i) -
  95.           2 * Math.cos(3 * i) -
  96.           Math.cos(4 * i));
  97.       outerpoints.push({
  98.         x: x,
  99.         y: y,
  100.       });
  101.  
  102.       var step = random(0.001, 0.003, true);
  103.       particles.push({
  104.         step: step,
  105.         x: x,
  106.         y: y,
  107.       });
  108.     }
  109.   }
  110. };
  111. var random = function random(min, max, isFloat) {
  112.   if (isFloat) {
  113.     return Math.random() * (max - min) + min;
  114.   }
  115.   return ~~(Math.random() * (max - min) + min);
  116. };
  117.  
  118. resize();
  119.  
  120. //particles = [...outerpoints];
  121. ctx.globalAlpha = 0.5;
  122. ctx.globalCompositeOperation = "source-over";
  123. var draw = function draw() {
  124.   ctx.fillStyle = "rgba(0,0,0,0.03)";
  125.   ctx.fillRect(-width, -height, width * 2, height * 2);
  126.   ctx.beginPath();
  127.  
  128.   for (var i = 0; i < innerpoints.length; i++) {
  129.     s = outerpoints[i];
  130.     d = innerpoints[i];
  131.     point = particles[i];
  132.  
  133.     if (distance(point.x, point.y, d.x, d.y) > 10) {
  134.       dx = d.x - s.x;
  135.       dy = d.y - s.y;
  136.  
  137.       point.x += dx * point.step;
  138.       point.y += dy * point.step;
  139.       color = distance(0, 0, point.x, point.y);
  140.       ctx.beginPath();
  141.       ctx.fillStyle = "hsl(" + (color % 360) + ",100%,50%)";
  142.       ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
  143.       ctx.closePath();
  144.       ctx.fill();
  145.     } else {
  146.       point.x = d.x;
  147.       point.y = d.y;
  148.       ctx.beginPath();
  149.       ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
  150.       ctx.closePath();
  151.       ctx.fill();
  152.       particles[i].x = s.x;
  153.       particles[i].y = s.y;
  154.       particles[i].step = random(0.001, 0.003, true);
  155.     }
  156.   }
  157. };
  158.  
  159. var render = function render() {
  160.   resize();
  161.   draw();
  162.   requestAnimationFrame(render);
  163. };
  164.  
  165. requestAnimationFrame(render);
  166.  
  167.     </script>
  168. </body>
  169. </html>

2.DOM学习部分

通过className改变元素属性

代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>通过className来修改元素属性</title>
  8. </head>
  9. <style>
  10.     div{
  11.         height: 50px;
  12.         width: 50px;
  13.         background-color: pink;
  14.         color: #999;
  15.     }
  16.     .change{
  17.         background-color:aqua;
  18.         margin-top: 100px;
  19.         color: green;
  20.     }
  21. </style>
  22. <body>
  23.     <div>文字</div>
  24.     <script>
  25.         var div=document.querySelector('div');
  26.         div.onclick=function(){
  27.             div.className="change";
  28.         }
  29.     </script>
  30. </body>
  31. </html>

密码框验证信息

验证输入密码是否输入字符是否长度满足6~16位，如果满足，则返回

否则，返回 

 代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>密码框验证信息</title>
  8.     <style>
  9.         div{
  10.             width: 600px;
  11.             margin: 100px auto;
  12.         }
  13.         .message{
  14.             display: inline-block;
  15.             size: 12px;
  16.             color: #999;
  17.             background:url(./images/mess.png) no-repeat left center;
  18.             padding-left: 20px;
  19.         }
  20.         .worng{
  21.             color: red;
  22.             background-image: url(./images/wrong.png);
  23.         }
  24.         .right{
  25.             color: green;
  26.             background-image: url(./images/right.png);
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="register">
  32.         <input type="password" class="ipt">
  33.         <p class="message">请输入6~16位密码</p>
  34.         <script>
  35.             var ipt=document.querySelector('.ipt');
  36.             var mag=document.querySelector('.message');
  37.             ipt.onblur=function(){
  38.                 if(this.value.length<6||this.value.length>16){
  39.                     mag.className='message worng';
  40.                     mag.innerHTML="您输入的位数不对要求6~16位"
  41.                 }else{
  42.                     mag.className='message right';
  43.                     mag.innerHTML='您输入的正确';
  44.                 }
  45.             }
  46.         </script>
  47.     </div>
  48. </body>
  49. </html>

下拉选择框 

效果如下：

 代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>下拉选择框</title>
  8. </head>
  9. <style>
  10.     * {
  11.         margin: 0;
  12.         padding: 0;
  13.     }
  14.     li {
  15.             list-style-type: none;
  16.         }
  17.  
  18.         a {
  19.             text-decoration: none;
  20.             font-size: 14px;
  21.         }
  22.  
  23.         .nav {
  24.             margin: 100px;
  25.         }
  26.         .nav > li {
  27.             position: relative;
  28.             float: left;
  29.             width: 80px;
  30.             height: 41px;
  31.             text-align: center;
  32.             border: 1px solid chartreuse;
  33.         }
  34.  
  35.         .nav li a {
  36.             display: block;
  37.             width: 100%;
  38.             height: 100%;
  39.             line-height: 41px;
  40.             color: #333;
  41.         }
  42.         .nav > li > a:hover {
  43.             background-color: #eee;
  44.         }
  45.  
  46.         .nav ul {
  47.             display: none;
  48.             position: absolute;
  49.             top: 41px;
  50.             left: 0;
  51.             width: 100%;
  52.             border-left: 1px solid #FECC5B;
  53.             border-right: 1px solid #FECC5B;
  54.         }
  55.  
  56.         .nav ul li {
  57.             border-bottom: 1px solid #FECC5B;
  58.         }
  59.  
  60.         .nav ul li a:hover {
  61.             background-color: #FFF5DA;
  62.         }
  63. </style>
  64. <body>
  65.     <ul class="nav">
  66.         <li>
  67.             <a href="#">菜单</a>
  68.             <ul>
  69.                 <li>
  70.                     <a href="#">私信</a>
  71.                 </li>
  72.                 <li>
  73.                     <a href="#">评论</a>
  74.                 </li>
  75.                 <li>
  76.                     <a href="#">@我</a>
  77.                 </li>
  78.             </ul>
  79.         </li>
  80.     </ul>
  81.     <script>
  82.         var nav=document.querySelector('.nav');
  83.         var lis=nav.children;
  84.         lis[0].onmouseover=function(){
  85.             this.children[1].style.display='block';
  86.         }
  87.         lis[0].onmouseout=function(){
  88.             this.children[1].style.display='none';
  89.         }
  90.     </script>
  91. </body>
  92. </html>

这篇博客到这已经到末尾了，如果觉得写的好，大家可以关注一下，以后大家可以一起学习！相互进步，后面我也可能为大家更新前端知识或者其它计算相关技术，最后谢谢各位博客的支持，我们下期再见 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/92668
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号