某乎的登录界面代码--JS

最新推荐文章于 2022-12-13 13:19:59 发布
最新推荐文章于 2022-12-13 13:19:59 发布
阅读量970 收藏
点赞数
分类专栏： Web前端

原地址 . http://www.qdfuns.com/notes/25573/c983d0def24ac412b22d53a9bec3ae89.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<style type="text/css">
		body{
			text-align: center;
			background: #F7FAFC;
			overflow: hidden;
			background: #fff;
			}
	</style>
</head>
<body>
	<canvas id="Mycanvas"></canvas>
	
  
  

   
   

    
    <
    
    script
    
    >
   
   

   
   

    
            
    
    //
    
    定义画布宽高和生成点的个数
   
   

   
   

    
            
    
    var 
    
    WIDTH 
    
    = 
    
    window.
    
    innerWidth,
   
   

   
   

    
                
    
    HEIGHT 
    
    = 
    
    window.
    
    innerHeight,
   
   

   
   

    
                
    
    POINT 
    
    = 
    
    35;
   
   


   
   

    
            
    
    var 
    
    canvas 
    
    = 
    
    document.
    
    getElementById(
    
    '
    
    Mycanvas
    
    ');
   
   

   
   

    
            
    
    canvas.
    
    width 
    
    = 
    
    WIDTH,
   
   

   
   

    
                
    
    canvas.
    
    height 
    
    = 
    
    HEIGHT;
   
   

   
   

    
            
    
    var 
    
    context 
    
    = 
    
    canvas.
    
    getContext(
    
    '
    
    2d
    
    ');
   
   

   
   

    
            
    
    context.
    
    strokeStyle 
    
    = 
    
    '
    
    rgba(0,0,0,0.02)
    
    ',
   
   

   
   

    
                
    
    context.
    
    strokeWidth 
    
    = 
    
    1,
   
   

   
   

    
                
    
    context.
    
    fillStyle 
    
    = 
    
    '
    
    rgba(0,0,0,0.05)
    
    ';
   
   

   
   

    
            
    
    var 
    
    circleArr 
    
    = [];
   
   


   
   

    
            
    
    //
    
    线条：开始xy坐标，结束xy坐标，线条透明度
   
   

   
   

    
            
    
    function 
    
    Line(
    
    x, 
    
    y, 
    
    _x, 
    
    _y, 
    
    o) {
   
   

   
   

    
                
    
    this.
    
    beginX 
    
    = 
    
    x,
   
   

   
   

    
                    
    
    this.
    
    beginY 
    
    = 
    
    y,
   
   

   
   

    
                    
    
    this.
    
    closeX 
    
    = 
    
    _x,
   
   

   
   

    
                    
    
    this.
    
    closeY 
    
    = 
    
    _y,
   
   

   
   

    
                    
    
    this.
    
    o 
    
    = 
    
    o;
   
   

   
   

    
            }
   
   

   
   

    
            
    
    //
    
    点：圆心xy坐标，半径，每帧移动xy的距离
   
   

   
   

    
            
    
    function 
    
    Circle(
    
    x, 
    
    y, 
    
    r, 
    
    moveX, 
    
    moveY) {
   
   

   
   

    
                
    
    this.
    
    x 
    
    = 
    
    x,
   
   

   
   

    
                    
    
    this.
    
    y 
    
    = 
    
    y,
   
   

   
   

    
                    
    
    this.
    
    r 
    
    = 
    
    r,
   
   

   
   

    
                    
    
    this.
    
    moveX 
    
    = 
    
    moveX,
   
   

   
   

    
                    
    
    this.
    
    moveY 
    
    = 
    
    moveY;
   
   

   
   

    
            }
   
   

   
   

    
            
    
    //
    
    生成max和min之间的随机数
   
   

   
   

    
            
    
    function 
    
    num(
    
    max, 
    
    _min) {
   
   

   
   

    
                
    
    var 
    
    min 
    
    = 
    
    arguments[
    
    1] 
    
    || 
    
    0;
   
   

   
   

    
                
    
    return 
    
    Math.
    
    floor(
    
    Math.
    
    random() 
    
    * (
    
    max 
    
    - 
    
    min 
    
    + 
    
    1) 
    
    + 
    
    min);
   
   

   
   

    
            }
   
   

   
   

    
            
    
    //
    
     绘制原点
   
   

   
   

    
            
    
    function 
    
    drawCricle(
    
    cxt, 
    
    x, 
    
    y, 
    
    r, 
    
    moveX, 
    
    moveY) {
   
   

   
   

    
                
    
    var 
    
    circle 
    
    = 
    
    new 
    
    Circle(
    
    x, 
    
    y, 
    
    r, 
    
    moveX, 
    
    moveY)
   
   

   
   

    
                
    
    cxt.
    
    beginPath()
   
   

   
   

    
                
    
    cxt.
    
    arc(
    
    circle.
    
    x, 
    
    circle.
    
    y, 
    
    circle.
    
    r, 
    
    0, 
    
    2 
    
    * 
    
    Math.
    
    PI)
   
   

   
   

    
                
    
    cxt.
    
    closePath()
   
   

   
   

    
                
    
    cxt.
    
    fill();
   
   

   
   

    
                
    
    return 
    
    circle;
   
   

   
   

    
            }
   
   

   
   

    
            
    
    //
    
    绘制线条
   
   

   
   

    
            
    
    function 
    
    drawLine(
    
    cxt, 
    
    x, 
    
    y, 
    
    _x, 
    
    _y, 
    
    o) {
   
   

   
   

    
                
    
    var 
    
    line 
    
    = 
    
    new 
    
    Line(
    
    x, 
    
    y, 
    
    _x, 
    
    _y, 
    
    o)
   
   

   
   

    
                
    
    cxt.
    
    beginPath()
   
   

   
   

    
                
    
    cxt.
    
    strokeStyle 
    
    = 
    
    '
    
    rgba(0,0,0,
    
    ' 
    
    + 
    
    o 
    
    + 
    
    '
    
    )
    
    '
   
   

   
   

    
                
    
    cxt.
    
    moveTo(
    
    line.
    
    beginX, 
    
    line.
    
    beginY)
   
   

   
   

    
                
    
    cxt.
    
    lineTo(
    
    line.
    
    closeX, 
    
    line.
    
    closeY)
   
   

   
   

    
                
    
    cxt.
    
    closePath()
   
   

   
   

    
                
    
    cxt.
    
    stroke();
   
   


   
   

    
            }
   
   

   
   

    
            
    
    //
    
    初始化生成原点
   
   

   
   

    
            
    
    function 
    
    init() {
   
   

   
   

    
                
    
    circleArr 
    
    = [];
   
   

   
   

    
                
    
    for (
    
    var 
    
    i 
    
    = 
    
    0; 
    
    i 
    
    < 
    
    POINT; 
    
    i
    
    ++) {
   
   

   
   

    
                    
    
    circleArr.
    
    push(
    
    drawCricle(
    
    context, 
    
    num(
    
    WIDTH), 
    
    num(
    
    HEIGHT), 
    
    num(
    
    15, 
    
    2), 
    
    num(
    
    10, 
    
    -
    
    10) 
    
    / 
    
    40, 
    
    num(
    
    10, 
    
    -
    
    10) 
    
    / 
    
    40));
   
   

   
   

    
                }
   
   

   
   

    
                
    
    draw();
   
   

   
   

    
            }
   
   


   
   

    
            
    
    //
    
    每帧绘制
   
   

   
   

    
            
    
    function 
    
    draw() {
   
   

   
   

    
                
    
    context.
    
    clearRect(
    
    0, 
    
    0, 
    
    canvas.
    
    width, 
    
    canvas.
    
    height);
   
   

   
   

    
                
    
    for (
    
    var 
    
    i 
    
    = 
    
    0; 
    
    i 
    
    < 
    
    POINT; 
    
    i
    
    ++) {
   
   

   
   

    
                    
    
    drawCricle(
    
    context, 
    
    circleArr[
    
    i].
    
    x, 
    
    circleArr[
    
    i].
    
    y, 
    
    circleArr[
    
    i].
    
    r);
   
   

   
   

    
                }
   
   

   
   

    
                
    
    for (
    
    var 
    
    i 
    
    = 
    
    0; 
    
    i 
    
    < 
    
    POINT; 
    
    i
    
    ++) {
   
   

   
   

    
                    
    
    for (
    
    var 
    
    j 
    
    = 
    
    0; 
    
    j 
    
    < 
    
    POINT; 
    
    j
    
    ++) {
   
   

   
   

    
                        
    
    if (
    
    i 
    
    + 
    
    j 
    
    < 
    
    POINT) {
   
   

   
   

    
                            
    
    var 
    
    A 
    
    = 
    
    Math.
    
    abs(
    
    circleArr[
    
    i 
    
    + 
    
    j].
    
    x 
    
    - 
    
    circleArr[
    
    i].
    
    x),
   
   

   
   

    
                                
    
    B 
    
    = 
    
    Math.
    
    abs(
    
    circleArr[
    
    i 
    
    + 
    
    j].
    
    y 
    
    - 
    
    circleArr[
    
    i].
    
    y);
   
   

   
   

    
                            
    
    var 
    
    lineLength 
    
    = 
    
    Math.
    
    sqrt(
    
    A 
    
    * 
    
    A 
    
    + 
    
    B 
    
    * 
    
    B);
   
   

   
   

    
                            
    
    var 
    
    C 
    
    = 
    
    1 
    
    / 
    
    lineLength 
    
    * 
    
    7 
    
    - 
    
    0.009;
   
   

   
   

    
                            
    
    var 
    
    lineOpacity 
    
    = 
    
    C 
    
    > 
    
    0.03 
    
    ? 
    
    0.03 
    
    : 
    
    C;
   
   

   
   

    
                            
    
    if (
    
    lineOpacity 
    
    > 
    
    0) {
   
   

   
   

    
                                
    
    drawLine(
    
    context, 
    
    circleArr[
    
    i].
    
    x, 
    
    circleArr[
    
    i].
    
    y, 
    
    circleArr[
    
    i 
    
    + 
    
    j].
    
    x, 
    
    circleArr[
    
    i 
    
    + 
    
    j].
    
    y, 
    
    lineOpacity);
   
   

   
   

    
                            }
   
   

   
   

    
                        }
   
   

   
   

    
                    }
   
   

   
   

    
                }
   
   

   
   

    
            }
   
   


   
   

    
            
    
    //
    
    调用执行
   
   

   
   

    
            
    
    window.
    
    onload 
    
    = 
    
    function () {
   
   

   
   

    
                
    
    init();
   
   

   
   

    
                
    
    setInterval(
    
    function () {
   
   

   
   

    
                    
    
    for (
    
    var 
    
    i 
    
    = 
    
    0; 
    
    i 
    
    < 
    
    POINT; 
    
    i
    
    ++) {
   
   

   
   

    
                        
    
    var 
    
    cir 
    
    = 
    
    circleArr[
    
    i];
   
   

   
   

    
                        
    
    cir.
    
    x 
    
    += 
    
    cir.
    
    moveX;
   
   

   
   

    
                        
    
    cir.
    
    y 
    
    += 
    
    cir.
    
    moveY;
   
   

   
   

    
                        
    
    if (
    
    cir.
    
    x 
    
    > 
    
    WIDTH) 
    
    cir.
    
    x 
    
    = 
    
    0;
   
   

   
   

    
                        
    
    else 
    
    if (
    
    cir.
    
    x 
    
    < 
    
    0) 
    
    cir.
    
    x 
    
    = 
    
    WIDTH;
   
   

   
   

    
                        
    
    if (
    
    cir.
    
    y 
    
    > 
    
    HEIGHT) 
    
    cir.
    
    y 
    
    = 
    
    0;
   
   

   
   

    
                        
    
    else 
    
    if (
    
    cir.
    
    y 
    
    < 
    
    0) 
    
    cir.
    
    y 
    
    = 
    
    HEIGHT;
   
   


   
   

    
                    }
   
   

   
   

    
                    
    
    draw();
   
   

   
   

    
                }, 
    
    16);
   
   

   
   

    
            }
   
   

   
   

    
        
    
    <
    
    /
    
    script
    
    >
   
   

  
  

</body>
</html>


Kaier_Chou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS登录界面代码
Anqky的博客
02-06 3630
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RalUOHAq-1612313980072)(dd
js中的input 显示与隐藏
llt299022的博客
02-06 3866
<!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>Do
asp登录页面跳转到注册页面_自己动手做一个很酷的登录页面
weixin_39701861的博客
11-29 1518
登录页面静态效果登录页面动态效果登录页面是项目开发中最常用的。今天教大家手写一个登录页面，最终效果见上图。本页面的的开发运用了HTML，CSS和JavaScript的知识。首先创建一个空的CSS文件(style.css)，页面的样式代码将写到这个文件中。然后创建HTML文件，并引入style.css和jquery.min.js。在html文件中引入style.css和jquery.min.js在b...
使用原生js写一个简单的注册登录页面
热门推荐
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
js-仿京东显示隐藏密码
qq_41670147的博客
11-21 1106
<!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-...
js代码-js项目：1
07-16
【标题】"js代码-js项目：1" 涉及的是JavaScript编程的一个项目，这个项目的重点在于使用JavaScript语言进行开发。JavaScript是一种广泛应用于Web开发的脚本语言，它主要用于客户端的网页交互，增强用户界面。在现代...
js代码-华为2016 js
07-16
由于没有更具体的信息，我们可以推测这些代码可能涉及前端开发，如网页界面的交互功能、数据通信、用户界面的动态效果，或者也包括一些后端JavaScript（如Node.js）用于服务器端的处理。 【标签】"代码" 这个标签...
某程序的登陆界面(仿制)-易语言
06-12
此界面并非自绘,而是由各种控件拼装而成。
JavaScript应用实例-登陆界面.js
12-09
JavaScript应用实例-登陆界面.js
js代码-hangzhoujiakao
07-15
这个项目的重点是JavaScript代码的编写和实现，可能涉及到前端交互、数据处理、用户界面等功能。 【描述】"js代码-hangzhoujiakao" 没有提供具体的项目细节，但我们可以推测这可能是一个针对杭州地区考试的Web应用...
登录页面源码
04-22
好玩的登录页面 ReadMe.io : Crowdsource Your Developer Hubwindow.heap=window.heap||[],heap.load=function(t,e){window.heap.appid=t,window.heap.config=e;var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.heapanalytics.com/js/heap.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(t){return function(){heap.push([t].concat(Array.prototype.slice.call(arguments,0)))}},p=["identify","track"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])}; heap.load('1752122866');Toggle NavigationReadMe.ioPricingExamplesBlogLog InSign UpForgot password?Sign UpLogin(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-52479696-1', 'auto'); ga('send', 'pageview');
漂亮的后台登陆界面管理页面源码html+js
09-12
自己精心收集漂亮的后台登陆界面管理页面源码html+js，可以结合到ASP.NET（C#),asp,PHP,JSP语言，编写后台功能源码。界面主要包括登陆和管理界面。
html，css和js写的登录与注册界面
10-18
html，css和js写的登录与注册界面。本人菜水平，希望对初学者有帮助
css3+js制作漂亮动态登录界面设计
01-20
css3+js制作漂亮动态登录界面设计 直接可以下载使用
登录界面html源码
02-04
html代码 漂亮的页面源码 javascript css
JS实现登陆界面
qq_46232829的博客
11-19 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{
编码计算金指针
m0_74047582的博客
12-13 323
热门频道 首页 博客 研修院 VIP APP 问答 下载 社区 推荐频道 活动 招聘 专题 打开CSDN APP Copyrigh 周边推荐 公交站 生活服务 美食 银行 营业厅 电影院 KTV 按摩 洗浴 医院 学校 公共厕所 请选择分类 查看64个商户 铁西街 G271路  到这去 铁
用JS制作登录界面
qq_45284063的博客
06-09 1万+
效果图如下：
JS注册页面全代码
xiaoweids的博客
09-16 4580
性别：男女。确认密码：
html登陆界面代码设计
最新发布
09-23
但是，如果你正在寻找HTML登录界面的代码设计，你可以尝试以下方法： 1. 使用HTML和CSS手动设计登录界面： - 创建一个HTML文件，并使用表单元素和样式来设计登录界面。 - 使用CSS样式来美化表单元素和背景。 - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值