weixin_45644430
weixin_45644430

黑客帝国代码雨的实现

效果预览

从上至下，依次是阿拉伯语、甲骨文、日语、彝语、藏语、希伯来语、 小篆、印地语、大篆、西里尔字母。

gif预览








具体代码


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>黑客帝国代码雨效果实现title>
head>

<body>
    <script>
        const Arab = 'ابتثجحخدذرزسشضصضطظعغفقكلمنهويء'; // 阿拉伯语
        const Hebrew = 'אבגדהוזחטיךכלםמןנסעףפץצקרשתבכפּתּוּואֽאֿשׁשׂוֹ'; // 希伯来语
        const Hindi = 'अआएईऍऎऐइओऑऒऊऔउबभचछडढफफ़गघग़हजझकखख़'
            +'लळऌऴॡमनङञणऩॐपक़रऋॠऱसशषटतठदथधड़ढ़वयय़ज़'; // 印地语
        const Japanese = 'あいうえおアイウエオかきくけこカキクケコさし'
            +'すせそサシスセソたちつてとタチツテトなにぬねのナニヌネノは'
            +'ひふへほハヒフヘホまみむめもマミムメモやゆよヤユヨらりるれ'
            +'ろラリルレロわゐゑをワヰヱヲんンがぎぐげごガギグゲゴざじず'
            +'ぜぞザジズゼゾだぢづでどダヂヅデドばびぶべぼバビブベボぱぴ'
            +'ぷぺぽパピプペポ'; // 日语
        const Cyrillic = 'ЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪ'
            +'ЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥ'
            +'ѦѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҇҈҉ҊҋҌҍҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥ'
            +'ҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠ'
            +'ӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿ'; // 西里尔字母
        const Tibetan = 'ཀཁགངཅཆཇཉཏཐདནཔཕབམཙཚཛཝཞཟའཡརལཤསཧཨ'; // 藏语
        const Yi = 'ꀀꀖꀸꁖꁶꂑꂮꃍꃢꄀꄚꄶꅑꅨꅽꆗꆷꇚꇸꈔꉆꉮꊍꊮꋐꋭꌉꌪꏠꏼꐘꐱꑊꑝꑱꀁꀗꀹꁗꁷꂒꂯ'   
            + 'ꃎꃣꄁꄛꄷꅒꅩꅾꆘꆸꇛꇹꈕꉇꊎꊯꋑꋮꌊꌫꏡꏽꐙꐲꑋꑞꑲꀂꀘꀺꁘꁸꂓꂰꃏꃤꄂꄜꄸꅓꅪꅿꆙꆹꇜꇺ' 
            + 'ꈖꉈꊏꊰꋒꋯꌋꌬꏢꏾꐚꐳꑌꑟꑳꀃꀙꀻꁙꁹꂔꂱꃐꃥꄃꄝꄹꅔꅫꆀꆚꆺꇝꇻꉉꊐꊱꋓꋰꌌꌭꏣꏿꐛꐴꑍ' 
            + 'ꑠꑴꀄꀚꁚꃦꅬꆻꇞꉊꊲꋔꏤꐀꐜꐵꑎꑡꑵꀅꀛꀼꁛꁺꂕꂲꃧꄄꄞꄺꅕꅭꆁꆛꆼꇟꇼꈗꈰꉋꉝꉯꊑꊳꋕꋱ'
            + 'ꌍꌮꏥꐁꐝꐶꑏꑢꑶꀆꀜꀽꁜꁻꂖꂳꃨꄅꄟꄻꅖꅮꆂꆜꆽꇠꇽꈘꈱꉌꉞꉰꊒꊴꋖꋲꌎꌯꏦꐂꐞꐷꑐꑣꑷꀇ'
            + 'ꀝꀾꁝꁼꂗꂴꃩꄆꄠꄼꅯꆃꆝꆾꇡꇾꈙꉍꉟꊓꊵꋗꋳꌏꌰꏧꐃꐟꐸꑑꑤꑸꀈꀞꀿꁞꁽꂘꂵꃑꃪꄇꄡꄽꅗꅰ' 
            + 'ꆞꆿꇢꇿꈚꈲꉎꉠꉱꊀꊔꊶꋘꋴꌐꌱꍆꍡꎔꎫꏆꀉꀟꁀꁟꁾꂙꂶꃒꃫꄈꄢꄾꅘꅱꆄꆟꇀꇣꈀꈛꈳꉏꉡꉲꊁ' 
            + 'ꊕꊷꋙꋵꌑꌲꍇꍢꍼꎕꎬꏇꀊꀠꁁꁠꁿꂚꂷꃓꃬꄉꄣꄿꅙꅲꆅꆠꇁꇤꈁꈜꈴꉐꉢꉳꊂꊖꊸꋚꋶꌒꌳꍈꍣꍽ'
            + 'ꎖꎭꏈꀋꀡꁂꁡꂀꂛꂸꃔꃭꄊꄤꅀꅚꅳꆆꆡꇂꇥꈂꈝꈵꉑꉣꉴꊃꊗꊹꋛꋷꌓꌴꍉꍤꎗꎮꏉꂹꄥꇃꇦꈞꉒꉤ' 
            + 'ꉵꍥꏨꐄꑹꀌꀢꁃꁢꂜꂺꄋꄦꅁꅴꆇꆢꇄꇧꈃꈟꈶꉓꉥꉶꊄꊘꊺꋸꌔꍊꍦꍾꎯꏊꏩꐅꐠꐹꑒꑥꑺꀍꀣꁄꁣ'
            + 'ꂝꂻꄌꄧꅂꅵꆈꆣꇅꇨꈄꈠꈷꉔꉦꉷꊅꊙꊻꋹꌕꍋꍧꍿꎰꏋꏪꐆꐡꐺꑓꑦꑻꀎꀤꁅꁤꂞꂼꄨꅃꆉꆤꇆꇩꈅ' 
            + 'ꈡꈸꉕꉸꊆꊚꊼꌖꍌꍨꎱꏌꏫꐇꐢꑔꑼꀏꀥꁆꁥꂁꂟꂽꃮꄍꄩꅄꅛꅶꆊꇇꇪꈆꈢꈹꉖꉧꉹꊛꊽꌗꌵꍍꍩꎀ' 
            + 'ꎲꏍꏬꐈꐣꐻꑕꑧꑽꀐꀦꁇꁦꂂꂠꂾꃕꃯꄎꄪꅅꅜꅷꆋꆥꇈꇫꈇꈣꈺꉗꉨꉺꊇꊜꊾꋜꋺꌘꌶꍎꍪꎁꎘꎳꏎ' 
            + 'ꏭꐉꐤꐼꑖꑨꑾꀑꀧꁈꁧꂃꂡꂿꃖꃰꄏꄫꅆꅝꆌꆦꇉꇬꈈꈤꈻꉘꉩꉻꊈꊝꊿꋝꌙꌷꍏꍫꎂꎙꎴꏏꏮꐊꐥꐽ'
            + 'ꑗꑩꑿꀒꀨꁉꁨꂄꂢꃀꃗꃱꄐꄬꅇꅞꅸꆍꆧꇊꇭꈉꈥꈼꉙꉪꉼꊉꊞꋀꋞꋻꌚꌸꍐꍬꎃꎚꎵꏐꏯꐋꐦꐾꑘꑪ' 
            + 'ꒀꇮꈊꈦꍑꍭꎄꎛꎶꀓꀩꁩꃁꃲꄑꄭꅈꅟꅹꆎꆨꇋꇯꈋꈧꈽꉚꉫꉽꊊꊟꋁꋟꋼꌛꌹꍒꍮꎅꎜꎷꏑꀔꀪꁪꃂ'
            + 'ꄒꄮꅉꅠꅺꆏꆩꇌꇰꈌꈨꈾꉛꉬꉾꊋꊠꋂꋠꋽꌜꌺꍓꍯꎆꎝꎸꏒꀫꁫꃳꄓꄯꅊꅡꅻꆐꆪꇍꇱꈍꈩꈿꉜꉭꉿ' 
            + 'ꊌꊡꋃꋡꌝꌻꍔꍰꎇꎞꎹꏓꀬꁊꁬꂅꂣꃃꃘꃴꄔꄰꅋꅢꅼꆑꆫꇎꇲꈎꈪꉀꊢꋄꌞꌼꍕꎈꎟꎺꏔꏰꐌꐧꑙꒁ'
            + 'ꀭꁋꁭꂆꂤꃄꃙꃵꄕꄱꅌꅣꆒꆬꇏꇳꈏꈫꉁꊣꋅꋢꋾꌟꌽꍖꍱꎉꎠꎻꏕꏱꐍꐨꐿꑚꒂꀮꁌꁮꂇꂥꃅꃚꃶꄖ' 
            + 'ꄲꅍꅤꆓꆭꇐꇴꈐꈬꉂꊤꋆꋣꋿꌠꌾꍗꍲꎊꎡꎼꏖꏲꐎꐩꑀꑛꒃꀯꁍꁯꂈꂦꃆꃛꃷꄗꄳꅎꅥꆔꆮꇑꇵꈑꈭ' 
            + 'ꉃꊥꋇꋤꌀꌡꌿꍘꍳꎋꎢꎽꏗꏳꐏꐪꑁꑜꒄꀰꁎꁰꂉꂧꃇꃜꃸꄘꄴꅏꅦꆕꆯꇒꇶꈒꈮꉄꊦꋈꋥꌁꌢꍙꍴꎌ' 
            + 'ꎣꎾꏘꏴꐐꐫꑂꒅꀱꁏꁱꂊꂨꃈꃝꃹꄙꄵꅐꅧꆖꆰꇓꇷꈓꈯꉅꊧꋉꋦꌂꌣꍚꍵꎍꎤꎿꏙꏵꐑꐬꑃꒆꀲꁐꁲ' 
            + 'ꂋꃉꃞꃺꆱꇔꊨꋊꋧꌃꌤꍀꍛꍶꎎꎥꏀꏚꏶꐒꐭꑄꑫꒇꀳꁑꁳꂌꂩꃊꃟꃻꆲꇕꊩꋋꋨꌄꌥꍁꍜꍷꎏꎦꏁꏛ' 
            + 'ꏷꐓꐮꑅꑬꒈꀴꁒꁴꂍꂪꃋꃠꃼꆳꇖꊪꋌꋩꌅꌦꍂꍝꍸꎐꎧꏂꏜꏸꐔꐯꑆꑭꒉꀵꁓꁵꂎꂫꃌꃡꃽꆴꇗꊫꋍ'
            + 'ꋪꌆꌧꍃꍞꍹꎑꎨꏃꏝꏹꐕꐰꑇꑮꒊꀶꁔꂏꂬꃾꆵꇘꊬꋎꋫꌇꌨꍄꍟꍺꎒꎩꏄꏞꏺꐖꑈꑯꒋꀷꁕꂐꂭꃿꆶ'
            + 'ꇙꊭꋏꋬꌈꌩꍅꍠꍻꎓꎪꏅꏟꏻꐗꑉꑰꒌ'; // 彝语
        const Chinese = "一丁七万三上下不丑且丘丙中丰丹乃之乎乘乙九乳事二于"
            + "云五井亘亡亥亦京人今介从令以任企伊伏伐休何余俘保允元兄先光克兔"
            + "入八公六兮共其典兹册冬凡出刀分刖初利力勹匕化北十千午南卜卯印即" 
            + "去又及取受口召可史右各合吉名向君吹告周咸品唐唯商喜嘉四因囿圉"
            + "土在壬夕夙多大天夫夷奚奠女好如妣妥妹妻妾姬娥子季宀它宅安宗"
            + "官宜宣室宫小少尸尹山川州工巫己巳帚帝年并幽庚弓弗彘彝彭往征得御" 
            + "宰家寅寮射尊微心恒戈戊戍成我戒户才承折攴攸改敦文斗新方旁旅旋族" 
            + "日旦旨旬昃明昏易昔星暮曾月有朋服朕木未析枚柳桑楚止正步武死母每"
            + "毓比水永沈河泉洹涂涉涎火灾炎焚熊熹燮爵父爻爿牛牝牡牢牧犬率玉"
            + "王珏甘生用甫田甲申男畏疑癸登白百皿盂益目翌老耳聿肉肘育膏臣臧自" 
            + "相眉矢示祀祖祝祭禾秉秋穆立竹簋米羊羌美羞臬臭至舂舌舞般良若莽"
            + "萑蒿虎虹血行衣裘角言谷豆豕豚象豹赤身辛辟雪非食首高鬯鬼鹿麇麋麓" 
            + "追逐通遣邑郭酉酒采重阜降陟隹雀集雇雉雍雨雩黍鼎鼓龠";

        const width = window.innerWidth;
        const height = window.innerHeight;
        const fontSize = 20; // 修改这里可以设置字号
        const fontName = 'arial'; // 修改这里可以设置字体，如'甲骨文'、'小篆'、'大篆'
        const characterSet = Arab; // 修改这里可以设置字符集

        let img = document.createElement('img');
        // 修改这里可以修改背景图片
        img.src = 'https://cdn.jsdelivr.net/gh/Qiu-Weidong/pictures/images/hacker/hacker0.jfif'; 
        img.alt = '您要的图碎了';
        const canvas = document.createElement("canvas");
        canvas.style.cssText = 'width:100%;';
        const context = canvas.getContext("2d");

        canvas.width = width;
        canvas.height = height;

        img.onload = function () {
            let scale_x = width / this.width;
            let scale_y = height / this.height;

            if (scale_x < scale_y) {
                context.drawImage(this, (this.width * scale_y - width) / 2, 0, width / scale_y, this.height, 0, 0, width, height);
            }
            else {
                context.drawImage(this, 0, (this.height * scale_x - height) / 2, this.width, height / scale_x, 0, 0, width, height);
            }
        }
        document.body.appendChild(canvas);

        let colunms = Math.floor(width / fontSize);
        let drops = [];
        for (let i = 0; i < colunms; i++) {
            drops.push(Math.ceil(canvas.height / fontSize) + 1);
        }

        context.font = `700 ${fontSize}px ${fontName}`;
        setInterval((function () {
            let scale_x = width / img.width;
            let scale_y = height / img.height;
            context.globalAlpha = 0.13;
            if (scale_x < scale_y) {
                context.drawImage(img, (img.width * scale_y - width) / 2, 0, width / scale_y, img.height, 0, 0, width, height);
            }
            else {
                context.drawImage(img, 0, (img.height * scale_x - height) / 2, img.width, height / scale_x, 0, 0, width, height);
            }

            context.globalAlpha = 1;
            context.fillStyle = "#00cc33";
            for (let j = 0; j < colunms; j++) {
                const index = Math.floor(Math.random() * characterSet.length), x = j * fontSize, y = drops[j] * fontSize;
                context.fillText(characterSet[index], x, y);
                if (y >= canvas.height && Math.random() > .99) { drops[j] = 0 } drops[j]++
            }
        }), 120);

    script>
body>
<style>
    @font-face {
        font-family: '甲骨文';
        font-display: swap;
        src: url('https://cdn.jsdelivr.net/gh/Qiu-Weidong/pictures/fonts/FZJiaGW.TTF') format('truetype');
    }

    @font-face {
        font-family: '小篆';
        font-display: swap;
        src: url('https://cdn.jsdelivr.net/gh/Qiu-Weidong/pictures/fonts/FZXZTFW.TTF');
    }

    @font-face {
        font-family: '大篆';
        font-display: swap;
        src: url('https://cdn.jsdelivr.net/gh/Qiu-Weidong/pictures/fonts/STFJinWDZFU.TTF');
    }
style>

html>

你可能感兴趣的:(html,javascript,html5)

  • 对 Electron 架构的理解 北海屿鹿 前端electron前端
    Electron的架构可以分为三层：Chromium、Node.js和应用程序层。Electron是一种基于Chromium和Node.js的开源框架，可以用于快速构建跨平台的桌面应用程序。Chromium层：Chromium是一种开源的浏览器引擎，能够渲染HTML、CSS和JavaScript等web技术栈。在Electron中，Chromium负责绘制应用程序的主窗口和所有的web视图内容，并
  • Electron----桌面应用开发框架 暖阳浅笑-嘿 前端框架electron桌面应用
    Electron是一个开源框架，旨在使用Web技术（如HTML、CSS和JavaScript）开发跨平台的桌面应用。它结合了Chromium和Node.js，使开发者能够构建具有原生应用体验的桌面应用程序，同时使用熟悉的Web开发工具和技术。1.什么是Electron？定义：Electron是一个跨平台的桌面应用开发框架，由GitHub开发并维护。它允许使用Web技术（HTML、CSS和JavaS
  • 深入理解Electron一Electron架构介绍 weixin_43188769 前端框架开发语言
    深入理解Electron（一）Electron架构介绍Electron是什么引用来自官网的解释：Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。通过将Chromium和Node.js嵌入到它的二进制文件中，Electron允许你维护一个JavaScript代码库，并创建可以在Windows、macOS和Linux上运行的跨平台应用程序ーー不需要本地开发经验。
  • java爬虫jsoup_Java爬虫框架Jsoup学习记录 weixin_33638349
    Jsoup的作用当你想获得某网页的内容，可以使用此框架做个爬虫程序，爬某图片网站的图片(先获得图片地址，之后再借助其他工具下载图片)或者是小说网站的小说内容我使用Jsoup写出的一款小说下载器，小说下载器Jsoup导入1.使用gradle导入compile'org.jsoup:jsoup:1.11.1'2.第三方包导入Jsoup使用1.获得Document本地html文件或者使用javaIO流，则
  • Vue.js 如何塑造现代网络体验 清风孤客 vue.js网络前端
    Vue.js已迅速成为JavaScript框架中的热门之选，以其简洁的设计、灵活性和强大功能而闻名。全球的开发者被Vue.js所吸引，是因为它能极为轻松地构建动态且引人入胜的用户界面。但Vue.js究竟有何用途，又为何如此受欢迎呢？本文将探讨Vue.js及其在各个领域的关键应用。我们将展示开发者如何利用它构建从交互式网络应用、单页应用（SPA）到复杂电子商务网站等各种项目。我们还将讨论其核心特性、
  • Electron 框架详解与最新动态 海豹工匠 electronjavascript前端
    什么是Electron？Electron是由GitHub开发并维护的一个开源框架，旨在使用Web技术（如HTML、CSS和JavaScript）来构建跨平台的桌面应用程序。它嵌入了Chromium和Node.js，使开发者能够使用这些Web技术在桌面环境中构建应用。Electron的核心优势在于其跨平台兼容性，允许开发者编写一次代码，运行在Windows、macOS和Linux平台上。常见的基于E
  • Java简单爬虫 jsoup工具包 ax阿楠 java爬虫开发语言前端
    首先导入一个爬虫的工具包:jsoup-1.13.1.jar//测试爬虫的网址(爬取王者荣耀英雄的网址)staticStringurl="https://pvp.qq.com/web201605/herolist.shtml";//文件存放的地址staticStringpath="D://爬虫测试/";publicstaticvoidgetImgs(Stringurl){//加载对应网址上的Html
  • Linux: Apache 安全设定 iteye_5904 Ubuntu/Mac/Github/Aptana/Nginx/Shell/Linux数据库操作系统系统安全
    1.AutoIndex预设安装好Apache之后，其预设目录是在/var/www/html/，如果没有设定index.html的话，那么就会印出目前目录里的所有档案和目录，基於安全理由，希望把AutoIndex这个取消，如此在别人打入网址后，就会出现403的存取权限不足，只有在很“明确”的指出档案时才可以浏览。关闭/var/www/html里（含子目录）的自动印出首页功能[root@rhelcon
  • Toxoid Engine：下一代Web游戏引擎的先锋 施刚爽
    ToxoidEngine：下一代Web游戏引擎的先锋toxoidAmodern,cross-platform,highlymodular/decoupled,data-driven,ECS-basedgameenginewritteninRustwithscriptingsupportforC#,JavaScriptandRusttoRust(WASM),hot-reloading,WebGPUr
  • java爬虫工具Jsoup学习 Future_yzx java爬虫学习
    目录前言一、基本使用二、爬取豆瓣电影的案例三、Jsoup能做什么？四、Jsoup相关概念五、Jsoup获取文档六、定位选择元素七、获取数据八、具体案例前言JSoup是一个用于处理HTML的Java库，它提供了一个非常方便类似于使用DOM，CSS和jquery的方法的API来提取和操作数据。一、基本使用org.jsoupjsoup1.13.1二、爬取豆瓣电影的案例publicclassDouBan{
  • boostrap组件 柒染‍ csshtml5html
    Bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML，css，JavaScript的，它简洁灵活，使得web开发更加快速。框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制的样式库，组件和插件。使用者要按照框架所规定的某种规范进行开发。这是我所学到的用CSS基础，所以我要分享给你们，希望可以帮助到你们。组
  • 嵌入式Rust小探 weixin_40437029 rust
    说明现在很多项目都在从C++/C迁移到Rust,这是一种内存管理更安全的语言,从根本上可以防止一些指针操作的问题既然如此,那我们也尝试一下如何在嵌入式开发当中使用Rust,然后再慢慢迁移到更多代码https://doc.rust-lang.org/reference/introduction.htmlhttps://zhuanlan.zhihu.com/p/628575325https://www
  • HTTPS安全版预告页面设计与实施指南 魔都财观
    本文还有配套的精品资源，点击获取简介：本文深入探讨了网站即将上线时，如何使用HTTPS协议创建一个安全且吸引人的预告页面。HTTPS是HTTP的安全版本，利用SSL/TLS协议提供数据加密、身份验证和数据完整性，对于保护用户隐私和提升网站信任度至关重要。文章详细阐述了构建预告页面时所需的基础HTML、CSS和JavaScript技术，并且讨论了如何配置HTTPS以及进行测试和SEO优化的重要性。1
  • 在 Linux (aarch64) 编译 OpenJDK 8 不搞数学的汤老师 linux运维服务器
    环境信息操作系统：RockyLinux9.4(aarch64)OpenJDK：OpenJDK8u422BootJDK：jdk8u421-linux-aarch64编译OpenJDK需要有一个JDK。解压后当前目录结构如下：/opt/├──jdk1.8.0_421│├──COPYRIGHT│├──LICENSE│├──README.html│├──THIRDPARTYLICENSEREADME.tx
  • Wayland开发入门系列3：Wayland架构 幽迷狂 Wayland开发入门waylandlinuxdesktop
    本文译自https://wayland.freedesktop.org/architecture.html。翻译时间：2021.09.27Wayland架构理解Wayland架构以及它与X不同的好方法是跟踪一个事件从输入设备到它所影响的变化出现在屏幕上的程度。下面是与X的架构：1.内核从输入设备获取一个事件，并通过evdev输入驱动程序将其发送给X。内核通过驱动设备并将不同设备特定的事件协议转换为
  • i9 9880h参数配置 m0_51380603 cpu
    英特尔似乎为i9-9880H使用了“两杯咖啡”，因为该CoffeeLakeCPU具有16MB的超大缓存大小，是AMD的两倍。与往常一样，现代Zen2CPU具有更高的内存支持频率–DDR4-3200MHz；LPDDR4-4266MHz与DDR4-2666，适用于Intel的LPDDR3-2133。选i99880h这些点很重要!看完你就知道了https://list.jd.com/list.html?
  • 深入解析Vue3响应式系统：从Proxy实现到依赖收集的核心原理 荆州克莱 面试题汇总与解析springcloudspringbootspring技术css3
    深入解析Vue3响应式系统：从Proxy实现到依赖收集的核心原理响应式系统的基本原理作为一个热门的JavaScript框架，Vue在3.x版本中引入了基于Proxy的响应式系统。这个系统的核心思想是利用Proxy对象拦截对数据的访问和修改，从而实现数据的自动更新。当我们改变一个被代理的对象时，相关的视图会自动更新，无需手动干预。这一创新的设计让Vue3在性能和开发体验上都有了大幅度的改进。如何实现
  • 构建级联下拉列表：AJAX和jQuery实战教程 不胖的羊
    本文还有配套的精品资源，点击获取简介：级联下拉列表是网页交互中常见的元素，用于根据用户的选择动态更新后续选项。本文通过示例展示如何利用AJAX和jQuery技术实现级联下拉列表，并简单介绍了Prototype框架和jquery.jar文件的可能用途。详细步骤包括HTML结构设置、事件监听、AJAX请求构建、服务器响应处理以及界面更新，同时提供了提高用户体验的额外功能。1.级联下拉列表概念及应用场景
  • 前端开发实战：创建简易HTML计算器 不胖的羊
    本文还有配套的精品资源，点击获取简介：计算器是执行基本数学运算的应用程序，通常在IT和前端开发领域中通过HTML、CSS和JavaScript实现。HTML定义页面结构和布局，JavaScript赋予计算器动态交互功能，例如监听按钮点击事件、执行计算和更新结果显示。该项目涉及HTML的元素结构、JavaScript的事件处理和DOM操作，是学习Web开发基础的理想练习。1.计算器的基本概念和应用1
  • Go语言开发项目文件规范 liberty030706 golang开发语言后端
    1.controllers存放控制器结构体接收请求：从HTTP请求中解析数据（如路径参数、查询参数、请求体等）。调用业务逻辑：与服务层（ServiceLayer）或模型层（ModelLayer）交互，处理业务逻辑。返回响应：根据处理结果返回HTTP响应（如JSON、HTML页面等）。代码示例：packageadminimport"github.com/gin-gonic/gin"typeArtic
  • 用HTML写一首绝句古诗,《绝句二首》_杜甫的诗词_诗词名句网 Artemis Lee 用HTML写一首绝句古诗
    作品赏析迟日江山丽，春风花草香。泥融飞燕子，沙暖睡鸳鸯。清代的诗论家陶虞开在《说杜》一书中指出，杜集中有不少“以诗为画”的作品。这一首写于成都草堂的五言绝句，就是极富诗情画意的佳作。诗一开始，就从大处着墨，描绘出在初春灿烂阳光的照耀下，浣花溪一带明净绚丽的春景，用笔简洁而色彩浓艳。“迟日”即春日，语出《诗经·豳风·七月》“春日迟迟”。这里用以突出初春的阳光，以统摄全篇。同时用一“丽”字点染“江山”
  • php ip获取邮政编码,地理位置-如何从IP地址确定邮政编码和城市？ 哈士奇爱深海鱼 phpip获取邮政编码
    以下是我发现的使用[http://ipinfodb.com/ip_locator.php]来获取其信息的代码段的修改版本。请记住，您也可以向他们申请API密钥，并直接使用API来获取您认为合适的信息。如您所见[http://ipinfodb.com/ip_location_api.php，]他们提供了从PHP到JavaScript到ASP.Net的所有示例。如前所述，下面不需要密钥，因为它可以拉动
  • java毕业设计校园共享单车管理系统源码+lw文档+mybatis+系统+mysql数据库+调试 好好吃肉 mybatismysql数据库
    java毕业设计校园共享单车管理系统源码+lw文档+mybatis+系统+mysql数据库+调试java毕业设计校园共享单车管理系统源码+lw文档+mybatis+系统+mysql数据库+调试本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据
  • Nginx的常用模块 入眼皆含月 nginx运维
    一、概述Nginx是一款高性能的开源Web服务器和反向代理服务器，它通过模块化架构提供了丰富的功能。二、模块介绍1、autoindex模块1.1、位置：http、server、location1.2、开启autoindexserver{listen80;server_name_;location/{root/code;indexindex.html;autoindexon;#开启列表功能}}1.3
  • 掌握 npm 登录与登出：使用 npm login 和 npm logout 命令 2401_85743969 npm前端node.js
    npm（NodePackageManager）是JavaScript编程语言的包管理器，广泛用于Node.js项目中管理依赖。npm提供了丰富的功能，包括包的安装、版本管理、发布等。使用npmlogin和npmlogout命令可以与npm仓库进行身份验证和登出操作。本文将详细介绍这两个命令的使用方法和相关场景。一、npmlogin命令的使用npmlogin命令用于在终端中向npm仓库进行身份验证，
  • selenium+pytest自动化脚本生成报告乱码问题 xiaobawang001 seleniumpytest自动化
    在运行pytest生成报告的时候，中文会显示为？如下图尝试多种修改conftest的编码格式后，未能成功，最终直接修改python路径\Lib\site-packages\pytest_html内的html_report.py将这句head=html.head(html.meta(charset="utf-8"),html.title(self.title),html_css)修改为：head=h
  • 网页文件下载的各种方式 怪咖学生 前端javascript开发语言
    1.直接通过HTML标签实现文件下载最常见且简便的文件下载方式是使用HTML的标签，配合download属性，允许用户下载文件。适用于静态文件和指定的文件路径。方法：下载文件href:指定文件路径，可以是相对路径或绝对路径。download:指定下载时文件的名称。如果省略，会使用文件的默认名称。优点：简单易用，不需要JavaScript。浏览器原生支持。可用于静态资源的下载。缺点：仅限于文件已经存
  • XML解析 千禧年@ xml前端html
    一、XML概述1，什么是XML？XML即为可扩展的标记语言(eXtensibleMarkupLanguage)XML是一套定义语义标记的规则，这些标记将文档分为许多部件并对这些部件加以标识2.XML和HTML不同之处XML主要用于说明文档的主题，而HTML侧重描述文本的显示格式。XML文档数据和格式分离，文档=文档数据+文档结构+文档样式XML是一种元标记语言，用户可以自己定义标记集，从而使数据具
  • npm、cnpm、pnpm、yarn的区别 迷途小码农零零发 前端知识库npm前端node.js
    npm,cnpm,pnpm,和yarn都是JavaScript的包管理工具，用于自动化处理包的安装、更新、配置和管理。它们之间的主要区别在于它们各自的实现方式、性能优化、以及一些特有的功能。npmnpm(NodePackageManager)是Node.js的默认包管理器，也是最早被广泛接受和使用的JavaScript包管理工具。它允许用户从npm公共仓库中安装、共享和分发代码包。npm在项目中创
  • 数据分析系列----beautifulsoup4模块 羽晨同学 Python数据分析前端服务器
    个人主页：羽晨同学个人格言:“成为自己未来的主人~”beautifulSoup4是一个用于从HTML或XML文件中提取数据的Python模块。使用BeautifulSoup模块，你可以提取到需要的任何信息。BeautifulSoup4是BeautifulSoup系列模块的第四个大版本。在使用这个模块之前，先要确保我们拿到了网页的源代码，怎么拿到网页的源代码，我们在上一篇文章中有说到，不会的同学可以
  • 微信开发者验证接口开发 362217990 微信 开发者 token 验证
    微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置 第二步：验证服务器地址的有效性 第三步：依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个
  • 一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
            今天群友出了一题：         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &
  • linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义linux关于减号“-”的用途linux关于“-”的含义linux关于减号的含义
        转载请出自出处： http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
  • Unix(3) 18289753290 unix ksh
    1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容 什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and  ||代表or&nbs
  • 关于ListView中性能优化中图片加载问题 酷的飞上天空 ListView
    ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识，然后设置图
  • 德国总理默多克：给国人的一堂“震撼教育”课 永夜-极光 教育
    http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　 安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！ 　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
  • 关于Java继承的一个小问题。。。 随便小屋 java
    今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
  • 23种基本的设计模式 aijuans 设计模式
    Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 　　Builder：将一个复杂对象的构建与它的表示分离，使得同
  • 《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
    从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
  • JavaScript动态改变样式访问技术 百合不是茶 JavaScriptstyle属性ClassName属性
      一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l
  • jQuery的deferred对象详解 bijian1013 jquerydeferred对象
            jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。         每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb
  • 淘宝开放平台TOP Bill_chen C++c物流C#
    淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform， 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为：    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务；  &
  • 【大型网站架构一】大型网站架构概述 bit1129 网站架构
    大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题： 1.对于订单系统这种事务型系统，如
  • eclipse插件hibernate tools安装 白糖_ Hibernate
    eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
  • Jquery easyui Form表单提交注意事项 bozch jquery easyui
    jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下：         1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
  • Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
    import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
  • html css 鼠标形状样式汇总 chenbowen00 htmlcss
    css鼠标手型cursor中hand与pointer  Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example：CSS鼠标手型效果 <a href="#" style=&qu
  • [IT与投资]IT投资的几个原则 comsci it
          无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    
  • oracle with语句详解 daizj oraclewithwith as
    oracle with语句详解 转 在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用 例子:注意，这是sql语句，不是pl/sql语句， 可以直接放到jdbc执行的 ----------------------------------------------------------------
  • hbase的简单操作 deng520159 数据库hbase
    近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表   # 语法：create <table>, {NAME => <family&g
  • C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
    /* 2013年3月11日20:37:32 地点：北京潘家园 功能：完成用户格式化输入多个值 目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
  • 2015越来越好 dcj3sjt126com 歌曲
    越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显
  • java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
    数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu
  • Ehcache（07）——Ehcache对并发的支持 234390216 并发ehcache锁ReadLockWriteLock
    Ehcache对并发的支持          在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
  • mysql中blob,text字段的合成索引 jackyrong mysql
      在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能， 但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找 则速度快 比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
  • 逻辑运算与移位运算 latty 位运算逻辑运算
    源码：正数的补码与原码相同例+7 源码：00000111 补码 ：00000111 （用8位二进制表示一个数） 负数的补码： 符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。   -7 源码： 10000111 ，其绝对值为00000111  取反加一：11111001 为-7补码 已知一个数的补码，求原码的操作分两种情况：
  • 利用XSD 验证XML文件 newerdragon javaxmlxsd
    XSD文件 （XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。 具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持，使用起来也很方便。 以下代码可用在J
  • 搭建 CentOS 6 服务器(12) - Samba rensanning centos
    （1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
  • Learn Nodejs 01 toknowme nodejs
    （1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     （2）安装nodejs 安装的方式比较多，请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 （1）上传服务器 （2）解压 tar -zxvf  node-v0.12.
  • jquery控制自动刷新的代码举例 xp9802 jquery
    1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他