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)

  • Node.js 全局对象 froginwe11 开发语言
    Node.js全局对象引言Node.js作为一种流行的JavaScript运行环境，以其高性能、轻量级和跨平台的特点，被广泛应用于服务器端编程、网络应用开发等领域。在Node.js中，全局对象是一个重要的概念，它为开发者提供了一系列内置的全局变量和方法，使得编程变得更加便捷。本文将详细介绍Node.js的全局对象，帮助开发者更好地理解和运用它们。Node.js全局对象概述Node.js的全局对象指
  • linux mysql命令行操作
    命令行,linux,命令行操作相关学习资料：https://edu.51cto.com/video/797.htmlhttps://edu.51cto.com/video/1400.htmlhttps://edu.51cto.com/video/3832.htmlLinuxMySQL命令行操作入门指南作为一名刚入行的开发者，掌握Linux系统下的MySQL命令行操作是一项基本技能。本文将带你一步步
  • 深度解析JavaScript 闭包 coding随想 JavaScriptjavascript开发语言ecmascript
    深度解析JavaScript闭包引言：为什么闭包让人又爱又怕？在JavaScript的学习过程中，闭包（Closure）是一个绕不开的“坎”。很多开发者第一次接触闭包时，会感到一头雾水：“为什么函数能记住外部作用域的变量？”、“为什么闭包会导致内存泄漏？”。但另一方面，闭包又是JavaScript最强大的特性之一，它支撑着模块化开发、数据封装、异步编程等核心场景。本文将通过通俗的语言和生动的案例，
  • JavaScript中的函数柯里化（Currying）：从概念到实战 coding随想 JavaScriptjavascriptecmascript开发语言前端
    JavaScript中的函数柯里化（Currying）：从概念到实战在JavaScript开发中，函数式编程（FunctionalProgramming）逐渐成为一种主流思想。而函数柯里化（Currying），正是这一思想中的核心技巧之一。它不仅能提升代码的复用性和灵活性，还能帮助我们构建更优雅、更模块化的解决方案。本文将带你从零开始，深入理解柯里化的原理、实现方式及实际应用场景。一、什么是函数柯
  • webpack和vite区别 PromptOnce webpack前端node.js
    一、Webpack1.概述Webpack是一个模块打包工具，它会递归地构建依赖关系图，并将所有模块打包成一个或多个bundle（包）。2.特点配置灵活：Webpack提供了高度可定制的配置文件，可以根据项目需求进行各种优化。生态系统丰富：Webpack拥有庞大的插件和加载器生态系统，可以处理各种资源类型（JavaScript、CSS、图片等）。支持代码拆分：通过代码拆分和懒加载，Webpack可以
  • uniapp处理后端返回的html字符串 萌新咦～ uni-app
    前言：采用v-html方法处理1.处理前↵↵document.forms[0].submit();2.处理后↵↵document.forms[0].submit();3.跳转页面方法//传参uni.setStorageSync("ICBC_GW_V3_HTML",res.result.payUrl)//跳转uni.navigateTo({url:"/subpages/cashier/webView
  • javascript 动态画心加文字 das白 #javascriptjavascript动态心型线文字
    测试//铺满屏幕varwidth=document.documentElement.clientWidth;varheight=document.documentElement.clientHeight;document.getElementById("gycanvas").setAttribute("width",width);document.getElementById("gycanvas"
  • javascript 动态画心 das白 #javascriptjavascript动态心型线
    测试canvas{background:lawngreen;//画布背景色}//铺满屏幕varwidth=document.documentElement.clientWidth;varheight=document.documentElement.clientHeight;document.getElementById("gycanvas").setAttribute("width",width
  • javascript 画心型线
    测试canvas{background:lawngreen;//画布背景色}//铺满屏幕varwidth=document.documentElement.clientWidth;varheight=document.documentElement.clientHeight;document.getElementById("gycanvas").setAttribute("width",width
  • 掌握Web3开发：从入门到精通 夲奋亻Jay Web3web3
    掌握Web3开发是一个涉及多个步骤和学习阶段的过程。以下是一些关键的步骤和开发案例，以及它们在搜索结果中的索引编号：了解区块链基础：学习区块链的基本概念，如去中心化、加密技术、共识机制等[1]。学习智能合约：学习智能合约的工作原理和它们在区块链上的应用，特别是以太坊平台上的智能合约[1]。掌握Web3.js或Ethers.js：学习如何使用这些JavaScript库与智能合约交互、发送交易和监听事
  • JavaScript性能优化 lyh1344 javascript性能优化开发语言
    JavaScript性能优化方法减少重绘和回流频繁操作DOM会导致浏览器反复计算布局，引发性能问题。使用documentFragment进行批量DOM操作，或通过classList一次性修改多个样式属性。缓存DOM查询结果，避免重复访问。事件委托利用事件冒泡机制，将事件监听器绑定到父元素而非多个子元素。减少内存占用，提升动态内容的事件处理效率。节流与防抖高频事件（如滚动、输入）通过节流（Throt
  • 将图片的base64编码直接嵌入到html文件的css中 Kuo-Teng 软件开发实战htmlcssjavascript
    将图片的base64编码直接嵌入到html文件的css中1.背景2.将图片进行base64编码3.将图片的base64编码写入到css1.背景如果你需要在html中引入一张外部图片，你可能会这样做：如果你将引用的图片保存到本地，你可能会这样做：但是，如果网络延迟较高，或者在jar包中运行Java项目时无法根据路径顺利找到图片呢？那么，将图片的base64编码直接写入html文件便是最好的选择！2.
  • 炫酷3D圆环动态照片墙：打造个性化展示新体验 姚芝舒
    炫酷3D圆环动态照片墙：打造个性化展示新体验【下载地址】3D圆环动态照片墙HTML文件本资源提供了一个精美的3D圆环动态照片墙HTML文件，用户可以通过鼠标自由拖拽照片墙，实现动态展示效果。该文件在某社交平台爆火，内置了30张高质量的JPG图片，用户只需在浏览器中直接打开即可体验，操作简单易上手。效果精致，适合用于个人展示或简单玩乐项目地址:https://gitcode.com/open-sou
  • 什么是Node.js，有什么特点 前端与小赵 node.js
    Node.js简介Node.js是一个基于ChromeV8引擎的JavaScript运行时环境，由RyanDahl于2009年创建。Node.js允许开发者使用JavaScript编写服务器端应用程序，打破了JavaScript仅限于浏览器端的限制。Node.js的设计目标是提供一种简单、高效的方式来构建可伸缩的网络应用。Node.js的特点非阻塞I/O特点：Node.js使用事件驱动的非阻塞I/
  • HTML页面设计——动态照片环
    #前端开发##html超文本标记语言结构学习他的标签##css美化页面其实一部分的网站首页应用了照片环的原理，使得页面看起来更加美观，这里为大家分享一个简单的照片环编写。一、准备好以下素材：二、新建一个HTML文件，这里就取名“01-照片环”好了。三、现在开始编写具体内容，照片环说白了就是几个照片构成的所以body只要写就可以了，编写的时候注意图片的格式是.jpg、.png还是.gif(动态图)。
  • Node.js到底是什么 浪裡遊 杂文node.jsphp开发语言前端javascriptvue.js
    我想像是npm、vite这些名词大家都很熟悉，对它们的作用也有大致印象，但是可能都像我一样不明白Node.js到底是什么，这里给大家带来一个简单介绍。Node.js详解：历史发展、生态构建与底层原理一、Node.js的起源与历史发展诞生背景2009年5月：Node.js由RyanDahl开发并首次发布。其核心目标是解决JavaScript仅限于浏览器端运行的局限性，通过ChromeV8引擎（Jav
  • 使用CSS和HTML实现3D图片环绕效果 码力无边-OEC csshtml3dweb前端
    使用CSS和HTML实现3D图片环绕效果在本篇博客中，将介绍如何使用HTML和CSS实现一个3D图片环绕效果。这个效果不仅具有视觉吸引力，而且具有高度的互动性，鼠标悬停时动画会暂停。接下来将一步步讲解这个效果的实现过程。1.效果2.页面结构与布局首先，我们来看一下HTML的基本结构。该效果的核心是一个元素，它包含了多个图片的，每个div中都设置了不同的背景图片。HTML代码：3D图片环绕效果</
  • html 照片环 - 图片的动态3D环绕 das白 #javascripthtml3djavascript照片环3D环绕
    html照片环-图片的动态3D环绕引言一、源码二、图转base64参考链接引言效果展示：一、源码原始图片的base64编码字符太多了，博客放不下，将图片缩小后的加入html的源码如下：猫咪body{background-color:black;text-align:center;color:#FFF;}.jc{/*设置宽*/width:140px;/*设置高*/height:200px;/*设置背
  • 微信小程序 progress 进度条 内部圆角及内部条渐变色 Bonnie(大宝) 技术小程序
    微信小程序表格微信小程序progress进度条内部圆角及渐变色html:css:.wx-progress-inner-bar{border-radius:8rpx!important;background:linear-gradient(toright,rgb(71,187,254,1),rgba(254,86,77,1))!important;}
  • vue3 实现文件上传 编程（变成）小辣鸡 vuevue
    1、上传文件html上传文件        将文件拖到此处，或点击上传只支持pdf、doc、docx、png、jpg提交import{ref,reactive}from'vue'import{uploadImg}from'@/api/common.js';letuploadFile=ref(false);letfileList=ref([]);constupload=(val)=>{fileLis
  • 【Html实现“心形日出”（附效果+源代码）】| JavaScript面试题：解释一下异步编程中的回调函数、Promise和Async/Await的概念。它们有什么区别？ 追光者♂ html5css3心形日出前端特效JS面试题PromiseAsync/Await
    风会带走你曾经存在过的证明。——虞姬作者主页：追光者♂个人简介：[1]计算机专业硕士研究生[2]2023年城市之星领跑者TOP1(哈尔滨)[3]2022年度博客之星人工智能领域TOP4[4]阿里云社区特邀专家博主[5]CSDN-人工智能领域优质创作者无限进步，一起追光！！！
  • java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw 兮兮科技 javamybatis开发语言
    java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lwjava毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址
  • uniapp内嵌的webview H5与应用通信 printf_824 uniapp分享uni-app
    H5端：1、找到index.html引入依赖2、在需要通讯处发送消息uni.postMessage({data:{code:200,msg:"处理完成"}})uniapp端：使用@message="handlerMessage"回调的event里有所需信息functionhandlerMessage(event){console.log("接收到信息");let{code,msg}=event.d
  • 使用html+css+jquery实现3D轮播图 mini_055 jqueryhtmlcss
    还是先来看看效果图：通过效果图我们先理一下思路：首先就是需要几张图片，但只有一张是显示在我们眼前的第二步：把一张图片分成几等份，这样点击转换的时候就会分开转第三步：就是实现点击按钮切换下一张。HTML部分HTML部分首先我们需要一个盒子显示图片，然后在盒子里装入图片，你想装几张图片就可以写几个li,除了图片我们还需要一个按钮来点击。一个li的图片效果如图所示：div是当你点击下一张的时候一个div
  • 微软全新开源的Agentic Web网络项目：NLWeb详解 kevin luan AI工作流编程microsoft前端网络
    引言在2025年5月的MicrosoftBuild开发者大会上，微软推出了一个全新的开源项目——NLWeb（NaturalLanguageWeb，自然语言网络），被誉为“AgenticWeb（代理网络）”的基石，目标是将传统网页转变为支持自然语言交互的智能AI应用。微软将其比作Web时代的HTML，旨在通过简单的方式为网站添加对话式AI接口，让用户和AI代理能够以自然语言直接查询和交互网站内容。本
  • XSL-FO 块：深入解析与最佳实践 沐知全栈开发 开发语言
    XSL-FO块：深入解析与最佳实践概述XSL-FO（XSLFormattingObjects）是一种用于生成格式化文档的语言，它允许开发者将XML数据转换成PDF、HTML、PostScript等格式。在XSL-FO中，块（Block）是一个重要的概念，它定义了文档中的矩形区域，包括文本、图像、表格等。本文将深入解析XSL-FO块的相关知识，并分享一些最佳实践。XSL-FO块的定义与属性定义XSL
  • HTML中引入JavaScript的三种方式 北冥郇翔 javascripthtml前端
    在HTML中引入JavaScript主要有以下三种方式，每种方式都有其适用场景和注意事项：1.内嵌方式（在标签内直接编写代码）直接在HTML文件的或中使用标签编写JavaScript代码。特点：代码与HTML混合，适用于简单逻辑或快速测试。alert()等函数会阻塞HTML页面渲染（如引用[1]所示）。示例：window.alert("页面加载被阻塞！");//阻塞后续内容渲染2.外部引入方式（推
  • linux网络编程之SCTP套接字常用接口 码莎拉蒂 . Linux网络编程linux网络编程SCTP套接字常用接口
    转载地址：oracle开发帮助文档：http://docs.oracle.com/cd/E19253-01/819-7052/index.htmlSCTP套接字接口当socket()调用为IPPROTO_SCTP创建套接字时，它会调用特定于SCTP的套接字创建例程。针对SCTP套接字执行的套接字调用会自动调用相应的SCTP套接字例程。在一对一套接字中，每个套接字都对应一个SCTP关联。可以通过调用
  • Excel处理控件Aspose.Cells教程：Java 在 Excel 中插入和删除行和列
    Aspose.Cells是Excel电子表格编程API，可加快电子表格的管理和处理任务，支持构建能够生成，修改，转换，呈现和打印电子表格的跨平台应用程序。同时不依赖于MicrosoftExcel或任何MicrosoftOfficeInterop组件，AsposeAPI支持旗下产品覆盖文档、图表、PDF、条码、OCR、CAD、HTML、电子邮件等各个文档管理领域，为全球.NET、Java、C++等1
  • Flask(五) 表单处理 request.form、WTForms @昵称不存在 Flaskflaskpython后端
    文章目录1.基本表单处理，使用request.form（轻量）示例一创建HTML表单处理表单数据示例二HTML表单（login.html）Flask路由处理表单2.使用Flask-WTF扩展安装设置SecretKey（CSRF防护）定义表单类HTML模板（login.html）Flask视图函数✅常用字段类型（WTForms）✅常用验证器（validators）HTML表单字段中的URL验证器总结
  • 微信开发者验证接口开发 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其他