白超华
白超华

原生JavaScript 全特效微博发布面板效果实现

javaScript实现微博发布面板效果.采用的js知识有：

  1. 正则表达式区分中英文字节、随机数生成等函数
  2. 淡入淡出、缓冲运动。闪动等动画函数
  3. onfocus、onblur、oninput、onpropertychange等事件
  4. 动态添加元素，获取设置动态属性

基本思路：

当内容为空时，发布按钮为灰色，点击时候文本框会闪动，输入文字会提示还可以输入多少文字，超出会提示，且不能发布，要注意的是，判断文本框内容的长度，不能直接来，因为英文属于一个字节，中文占两个，要用正则处理一下！

获取到所有头像的src之后，存入到一个变量中，当点击头像时候，将头像的src赋予添加元素的img，动态创建日期对象，手机型号，姓名存到数组，采用生成随机数的方式获取，当文本框有了内容并且选取头像后，可以发布成功，发布时候淡出效果，创建一个li，添加li的时候 不能直接采用 appendChild,这回直接添加到已有元素的后边,而微博效果是插入到前头，这是需要判断一下，当有元素时候采用 insertBefore方法，当没有元素时候采取appendChild。

原生JavaScript 全特效微博发布面板效果实现_第1张图片

 

html代码,因为不是同一天做的，后续的后头添加的，所以js代码的可读性不是很好，请谅解。不过尽量注释的很明白了，如有疑问请留言！

下面附源码下载地址！

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博发布</title>
    <link rel="stylesheet" href="style.css">
    <script>
        window.onload = function(){
            var text = document.getElementsByTagName('textarea')[0];
            var p  = document.getElementsByTagName('p')[0];
            var btn = document.getElementsByTagName('span')[0];
            var conUl = document.getElementById('con-ul');
            var aLi = conUl.getElementsByTagName('li');
            var icon = document.getElementById('icon');
            var iconUl = icon.getElementsByTagName('ul')[0];
            var iconLi = iconUl.getElementsByTagName('li');
            var prevBtn = document.getElementById('prev');
            var nextBtn = document.getElementById('next');
            var imgs = icon.getElementsByTagName('img');
            var btnNow = 0;
            var timer2 = null;         //头像区无缝滚动
            var num = 0;
            var timer1 = null;        //当输入内容为空或者输入字符超过，文本框闪动
            var iNow = 0;
            var selectIcon = '';     //用于保存所选择图片的路径
            var date = new Date();            
            var str = toDou(date.getHours())+':'+toDou(date.getMinutes());    //获取当前时间            
            var str2 = toDou(date.getMonth()+1)+'-'+date.getDate();        //获取当前日期            
            var userName = ['周杰伦','哆啦A梦','牛尔','郭德纲','孙燕姿','柴碧云','冯昆鹏','奥巴马','赵本山'];
            var userPhone = ['Xperia Z3','iPhone7s','一加one plus','小米5s','8848钛金','三星s8','锤子T3'];

            iconUl.style.width = iconLi.length*iconLi[0].offsetWidth+'px';
            timer2 = setInterval(iconPlay,3000); //头像区块无缝滚动

            text.onfocus = function(){
                p.innerHTML = '还可以输入<em>'+(num-140)+'</em> 个字';
                p.className = 'dis';
                change();
                text.oninput = text.onpropertychange = change;
            }
            text.onblur = function(){
                if(text.value == ''){
                    p.innerHTML = '把你交给我牵手秀恩爱！你要来虐狗还是进来被虐？(图)　热门微博';
                    p.className = '';                    
                }
            }
            //点击发布按钮
            btn.onclick = function(){
                var randomNum = Math.floor(Math.random()*userName.length);
                var randomNum2 = Math.floor(Math.random()*userPhone.length);
                if(text.value==''||num>140){
                    clearInterval(timer1);
                    timer1 = setInterval(function(){
                        if(iNow==5){
                            clearInterval(timer1);
                            iNow=0;
                        }else {
                            iNow++;
                        }            
                        if(iNow%2){
                            text.style.background = '#ff9797';
                        }else{
                            text.style.background = '';
                        }                    
                    },100);
                }else {
                    //判断是否选择头像
                    if(selectIcon==''){
                        alert('请先选择头像');
                    }else {
                        //动态添加li
                        var newLi = document.createElement('li');
                        newLi.innerHTML += '<div class="icon"><img src="'+selectIcon+'" alt=""></div><h2>'+userName[randomNum]+'</h2><p class="text">'+text.value+'</p><div class="li-footer"><span>'+str2+'</span><span>&nbsp;'+str+'&nbsp;</span>来自&nbsp;<span>'+userPhone[randomNum2]+'</span></div>';
                        if(aLi.length){
                            conUl.insertBefore(newLi,aLi[0]);
                        }else {
                            conUl.appendChild(newLi);
                        }
                        newLi.style.opacity = 0;
                        fadeOut(newLi,100);            
                    }
                    change();
                }
                text.value = '';
            }
            //判断输入字符的多少
            function change(){
                var mark = document.getElementsByTagName('em')[0];
                var tValue = text.value;
                num = Math.ceil(getLength(tValue)/2);

                if(num<140){
                    mark.innerHTML = 140-num;
                    mark.style.color = 'green';
                }else {
                    p.innerHTML = '已超出<em style="color:red">'+(num-140)+'</em> 个字';
                }

                if(text.value == ''||num>140){
                    btn.className = 'con-go';
                }else {
                    btn.className = 'con-go active';
                }
            }
            for(var i=0; i<iconLi.length; i++){
                iconLi[i].index = i;
                iconLi[i].onclick = function(){
                    for(var i=0; i<iconLi.length; i++){
                        iconLi[i].style.borderRadius = 0;
                    }
                    this.style.borderRadius = '140px';
                    selectIcon = imgs[this.index].getAttribute('src');                    
                }
            }
            nextBtn.onclick = iconPlay;
            prevBtn.onclick = function(){
                if(btnNow > 0){
                    btnNow--;
                    startMove(iconUl,-iconLi[0].offsetWidth*btnNow);                    
                }            
            }
            function iconPlay(){
                if(btnNow < iconLi.length-6){
                    btnNow++;
                    startMove(iconUl,-iconLi[0].offsetWidth*btnNow);                    
                }
                if(btnNow > iconLi.length-7){
                    btnNow = 0;
                    startMove(iconUl,-iconLi[0].offsetWidth*btnNow);
                }
            }
            iconUl.onmouseover = function(){
                clearInterval(timer2);
            }
            iconUl.onmouseout = function(){
                timer2 = setInterval(iconPlay,3000);
            }
        }
        //正则：用于区分中文为两个字节
        function getLength(str){
            return String(str).replace(/[^\x00-\xff]/g,'aa').length;
        }
        //头像区滚动动画
        function startMove(obj,tarrget){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var speed = (tarrget-obj.offsetLeft)/8;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if(obj.offsetLeft == tarrget){
                    clearInterval(obj.timer);
                }else {
                    obj.style.left = obj.offsetLeft+speed+'px';
                }
            },30);
        }
        //淡入淡出
        function fadeOut(obj,tarrget){
            obj.alpha = 0;
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var current = parseInt(current*100);
                var speed = (tarrget-obj.alpha)/30;
                if(obj.alpha==tarrget){
                    clearInterval(timer);
                }else {
                    obj.alpha+=speed;
                    obj.style.opacity=obj.alpha/100;
                }
            },30);
        }
        //补0函数
        function toDou(n){
            if(n<10){
                return '0'+n;
            }else {
                return ''+n;
            }
        }
    </script>
</head>
<body style="overflow: scroll;">
    <div id="container">
        <div id="header">
            <h1>有什么新鲜事想告诉大家？</h1>
            <p>把你交给我牵手秀恩爱！你要来虐狗还是进来被虐？(图)　热门微博</p>
        </div>
        <textarea placeholder="说点儿什么吧"></textarea>
        <div>
            <i>小提示:请先选择头像 再进行发布</i>
            <span class="con-go">发布</span>
        </div>
    </div>
    <div id="icon">
        <span id="prev" class="icon-btn"><</span>
        <div class="wrap-ul">
            <ul>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/10.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/6.jpg" alt=""></li>
                <li><img src="img/7.jpg" alt=""></li>
                <li><img src="img/8.jpg" alt=""></li>
                <li><img src="img/9.jpg" alt=""></li>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/12.jpg" alt=""></li>
                <li><img src="img/13.jpg" alt=""></li>
                <li><img src="img/14.jpg" alt=""></li>
            </ul>            
        </div>

        <span id="next" class="icon-btn">></span>
    </div>
    <div id="content">
        <ul id="con-ul">
            <li>
                <div class="icon">
                    <img src="img/12.jpg" alt="">
                </div>
                <h2>白超华</h2>
                <p class="text">今天又过去了，今天过得怎么样？梦想是不是越远了？</p>
                <div class="li-footer">
                    <span>03-10</span><span>&nbsp;20:30&nbsp;</span>来自&nbsp;<span>Xperia Z6</span>    
                </div>
                
            </li>
            <li>
                <div class="icon">
                    <img src="img/6.jpg" alt="">
                </div>
                <h2>金庸</h2>
                <p class="text">飞雪连天射白鹿，笑书神侠倚碧鸳。金庸小说中涌现出无数金句，九阳真经写到：他强由他强，清风拂山岗；他横由他横，明月照大江。他自狠来他自恶，我自一口真气足。当你想到金庸时，你会想到哪句话呢？转发，祝金老福如东海，寿比南山！</p>
                <div class="li-footer">
                    <span>03-10</span><span>&nbsp;20:24&nbsp;</span>来自&nbsp;<span>iPhone 6s plus</span>    
                </div>                
            </li>
            <li>
                <div class="icon">
                    <img src="img/8.jpg" alt="">
                </div>
                <h2>财经网</h2>
                <p class="text">【李克强来到新疆团：我要和每位代表握握手】10日上午，李克强参加十二届全国人大四次会议新疆维吾尔自治区代表团审议。？</p>
                <div class="li-footer">
                    <span>03-10</span><span>&nbsp;20:10&nbsp;</span>来自&nbsp;<span>8848 钛金手机</span>    
                </div>                
            </li>
        </ul>
    </div>
</body>
</html>

下载地址：（百度云）

  • http://pan.baidu.com/s/1o6Usz6y

备用地址: http://pan.baidu.com/s/1dEl5SHV   密码:9xwg

博客主页：http://www.cnblogs.com/bc8web/

欢迎拍砖交流！

 

你可能感兴趣的:(原生JavaScript 全特效微博发布面板效果实现)

  • 苹果折叠屏iPhone突破折痕难题 或将在2026年发布 北京自在科技 iphoneiosfindmy库克折叠屏
    （2025年2月26日）据供应链最新消息，苹果联合三星与美国安费诺公司，在折叠屏核心技术上取得重大突破，首款折叠屏iPhone样品已接近理想水平，最快将于2026年底上市。屏幕采用三星供应的内折OLED柔性屏，搭配蓝思科技研发的UTG超薄玻璃（厚度仅30微米），通过中央减薄技术实现10万次折叠无破损。安费诺提供新型铰链结构，结合苹果自研的"指状物+月牙槽"专利设计，使折痕几乎不可见，折叠厚度控制在
  • 科技快讯 | DeepSeek宣布开源DeepGEMM；多个团队开发AI论文反识别技术；OpenAI GPT 4.5现身Android测试版，即将发布 最新科技快讯 科技
    DeepSeek宣布开源DeepGEMM财联社2月26日电，Deepseek于开源周第三天宣布开源DeepGEMM。DeepGEMM是一个专为简洁高效的FP8通用矩阵乘法（GEMM）设计的库，具有细粒度缩放功能，如DeepSeek-V3中所提出。它支持普通和混合专家（MoE）分组的GEMM。该库采用CUDA编写，在安装过程中无需编译，通过使用轻量级的即时编译（JIT）模块在运行时编译所有内核。FP
  • 介绍下pdf打印工具类 JasperPrint 东方巴黎～Sunsiny webjava数据库开发语言
    JasperPrint工具类深度解析JasperPrint是JasperReports框架中实现PDF打印的核心载体类，其本质是填充数据后的可打印报表对象，承担着从模板编译、数据填充到格式输出的全流程控制。以下从7个维度展开深度解析：一、核心定位与生命周期中间态实体角色JasperPrint处于报表生成流程的中间阶段（生命周期模型）：JRXML（设计模板）→Jasper（编译模板）→JasperP
  • 计算机文件丢失不能正常启动,电脑说文件丢失或损坏开不了机怎么办？ 一只做梦的瓶子 计算机文件丢失不能正常启动
    电脑说文件丢失或损坏开不了机怎么办？以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！电脑说文件丢失或损坏开不了机怎么办？1替换损坏的文件(使用光盘或启动U盘替换文件)2重新安装系统了。电脑开不了机说文件丢失你的电脑里有没有重要的文件，要是有的话你就要去电脑店去弄。如果要是没有重要的文件，你就可以买一张系统盘重新做一下系统
  • Google Play提交应用审核时有哪些注意细节？ Android出海 GooglePlayAndroid出海投放用户运营流量运营内容运营产品运营新媒体运营
    本文为GooglePlay企业账号申请&上架应用的经验分享帖，纯为个人经验，仅供参考。◾前言本文基于GooglePlay官方政策与实战经验，系统梳理公司账号申请、应用上架的全流程细节，分享开发者常见的“踩坑点”，并提供可落地的方案解答。分享预告：影响公司新账号权重的信号量有哪些？（上期）GooglePlay开发者账号申请时的注意细节解答（上期）GooglePlay提交应用审核时的注意细节解答（本期
  • 家居行业全渠道零售技术解决方案架构指南 cstech_deep 零售架构科技产品运营
    家居行业全渠道零售技术解决方案架构指南行业数字化转型挑战体验断层线上渠道商品认知度不足，退货率高达35-42%物流成本高企大件商品平均物流成本占比达18%，破损率超行业标准2.3倍决策周期长客户平均决策周期达12.7天，需构建全链路交互体系核心系统技术实现一、沉浸式体验引擎3D场景化展示WebGL模型轻量化处理defoptimize_model(obj_file):apply_decimation
  • 清华北大相继推出DeepSeek教学手册，手把手教你学习DeepSeek，从入门到精通。 AI小魔女 学习AIGCpdf
    DeepSeek资料链接：https://pan.quark.cn/s/862e3c3fcdbf前段时间，清华大学推出重磅资料《DeepSeek：从入门到精通》发布首日，就冲上热搜，热度居高不下。作为一份面向大众公开免费的ai学习资料，其质量缺丝毫不输网上绝大多数付费教程。一时间，成为了广大ai爱好者内部互相推崇的“ai宝藏秘籍”。没过多久，北大也出品了自己的DeepSeek学习手册，AI时代正在
  • 什么是全链路压测？ 程序员雷叔 压力测试测试用例功能测试单元测试jmeterselenium测试工具
    全链路压测（End-to-End（E2E）PerformanceTesting）是指对软件系统或服务进行综合性能测试的一种方法。它模拟了真实的用户场景和环境，从用户端到服务器端的整个链路进行测试，包括用户界面、网络传输、服务器处理、数据库访问等环节。全链路压测的目标是评估系统在高负载和复杂场景下的性能表现，找出性能瓶颈和潜在的问题，以便优化系统的性能和稳定性。通过模拟大量的并发用户访问、持续高负载
  • 【压力测试】要不要做全链路压测？ 自动化测试老司机 安全测试自动化测试软件测试压力测试selenium测试工具软件测试jmeter自动化测试测试工程师
    浅谈行业现状在开始全链路压测学习前，我们先来简单介绍一下当前全链路压测行业现状。在互联网行业中，我发现一个很有趣的现象：熟悉或者了解性能测试的人，大概有50%；而在这50%人群中，精通性能测试的，仅仅有20%；而在这20%的性能测试人中，做过全链路压测不足的5%。这是一个很尴尬的结果。我曾经介绍过，性能测试是一个综合性学科，一个人是做不来的。而全链路测试呢，我们或多或少在网上搜索关于全链路压测的文
  • 全渠道小程序引流指南 爱分享的程序员 微信小程序小程序
    一、微信生态内部渠道1.会话场景1.1好友会话点击查看商品详情onShareAppMessage(){return{title:'爆款特惠',path:'/pages/goods?id=123',imageUrl:'/images/share.jpg'}}1.2微信群//获取群ID实现群场景服务wx.getGroupEnterInfo({success(res){console.log('群ID:
  • 英特尔开发板试用：结合OAK深度相机进行评测 OAK中国_官方 数码相机
    最近英特尔官方发布了一篇文章：主要介绍了如何将英特尔开发板（小挪吒）与OAK深度相机结合使用，并通过OpenVINO™工具套件进行开发和性能评测OAK相机：作为深度数据采集的核心设备，其深度测距功能与OpenVINO™推理相结合，实现了高效的目标检测和深度信息处理。OpenVINO™：作为英特尔的深度学习推理框架，为开发板和OAK相机提供了强大的推理支持。性能优化：通过模型转换和硬件加速，去实现高
  • Pinia第二章：Pinia 安装与基础配置 道不尽世间的沧桑 vue.js前端javascript
    2.1安装流程全解析#使用npm安装（推荐用于标准项目）npminstallpinia--save#使用yarn安装（推荐用于Monorepo项目）yarnaddpinia#针对Vite项目的优化安装（自动处理Tree-shaking）npminstallpinia@next-D安装注意事项：需要Vue3运行时环境（要求Vue>=3.2）与VueRouter无版本冲突生产环境会自动启用Tree-s
  • Spring MVC流程 zhujilisa Springspring
    SpringMVC启动流程启动流程父子容器请求处理MultipartFile解析参数传递返回值处理HandlerInterceptor启动流程启动Tomcat解析web.xml创建DispatcherServlet调用DIspatcherServlet的init方法4.1创建Spring容器4.2发布ContextRefresheEvent4.3在OnRefreshed方法中触发initStrat
  • DeepSeek R2要来了？“下一代推理王者”能否再掀AI浪潮？ that's boy 人工智能chatgptopenaiDeepSeekDeepSeek-R2DeepSeek-R1AI编程
    DeepSeekR2要来了？“下一代推理王者”能否再掀AI浪潮？最近，AI圈内最火的话题，莫过于DeepSeek即将推出的R2模型了。继今年1月发布的R1推理模型大获成功之后，DeepSeek似乎并没有停下脚步，而是马不停蹄地投入到了R2的研发之中。更让人兴奋的是，根据多方消息，DeepSeek正在加速R2的推出计划，原本预计在5月初亮相的时间表，现在被提前到了“尽可能快的速度”！为什么DeepS
  • Git 分支策略详解: 助力团队高效协作与快速交付! DevOps探索者 DevOpsgitdevopsci/cd
    Git分支策略概述在现代软件开发中，Git已成为团队协作和版本管理的首选工具。而分支策略作为代码管理的核心部分，直接影响着团队开发效率、代码质量以及产品的交付速度。一套合理的分支策略，不仅能够帮助团队高效协作，还能确保代码集成与发布过程的规范性和可控性。不同类型的软件项目（例如小型团队项目、大型企业级应用）和开发模式（如敏捷开发、DevOps）对分支策略的需求各有不同。因此，制定分支策略需要综合考
  • Visual Studio Code配置Python开发环境 ai74583 python开发工具json
    1.安装Python插件在VScode界面按Crtl+Shift+P或者F1输入extinstall直接安装Python，也就是点击它，然后等待，安装好后会提示你重启2.配置运行Python程序同样的打开命令面板（Crtl+Shift+P或F1），然后输入Tasks:ConfigureTaskRunner（中文输入：任务，然后选择任务：配置任务运行程序），选择Other此时VScode会自动生成.
  • 头文件和源文件 刘慈欣让你写 算法c语言c++
    C语言头文件和源文件：从原理到实践一、为什么需要头文件和源文件分离？模块化开发将代码按功能拆分，避免代码臃肿多人协作时降低代码冲突概率代码复用通过头文件声明接口，避免重复编写声明（后续会发布如何如何将函数声明放在头文件）示例：math.h声明数学函数，多个文件可调用编译效率修改源文件时只需重新编译对应模块大型项目避免全量编译的耗时问题二、头文件(.h)与源文件(.c)的区别特性头文件(.h)源文件
  • 苹果又要强制我换电脑了？开发者的“硬件危机”来临！ GeniuswongAir 电脑
    作为一名开发者，我们每天都在与代码和设备打交道，苹果的最新政策却让我不得不面对一个艰难的选择——换电脑！最近，我发版本的时候，收到了一条苹果的issue，表示从2025年4月24日起，所有iOS和iPadOS应用必须使用iOS18SDK，并且必须在Xcode16中构建。看似是技术升级的要求，但对我来说，这也意味着我的2017年款iMac27寸已经被“判决”退休了。苹果的强制升级苹果每年都会发布新的
  • CES 2025：AR技术的突破与未来生活的无限可能 Jeffrey Tao 未来科技与生活arxrvr虚拟现实
    在2025年1月的CES展会上，AR（增强现实）技术成为了瞩目的焦点。无论是硬件的轻量化，还是智能化功能的进一步提升，都让人看到了AR技术在未来生活中的巨大潜力。今天，我们来聊聊CES上那些让人眼前一亮的AR设备，以及它们将如何影响我们的日常生活。CES2025上的AR设备亮点1.ThundercommSmartGlasses：轻便且智能的伙伴创通联达（Thundercomm）发布了一款重量仅40
  • 【探商宝】DeepSeek开源周第四弹：双向流水并行与专家负载均衡技术解析 探熵科技 数据分析人工智能
    引言在千亿级大模型训练领域，计算资源利用率与通信效率是制约训练速度的核心瓶颈。DeepSeek开源周第四日重磅发布的DualPipe双向流水并行算法与EPLB专家并行负载均衡器（ExpertParallelismLoadBalancer），为解决这些难题提供了创新方案。本文将从技术原理、性能优势、应用场景三个维度深度解读这两项技术。一、DualPipe：重新定义流水线并行效率1.1传统流水线并行的
  • Eclipse极速安装指南：3分钟掌握Java开发环境 三流搬砖艺术家 javajavaeclipseide
    目录为什么要选Eclipse？️准备工具清单步骤一：下载安装包⚙️步骤二：安装与配置步骤三：界面优化步骤四：创建第一个项目必装效率插件推荐❗常见问题排雷效率对比表为什么要选Eclipse？✅跨平台神器：Windows/Mac/Linux全支持✅免费开源：IBM开发，全球开发者共同维护✅插件生态强大：支持Java/Python/C++等20+语言✅智能代码提示：媲美IDEA的代码补全能力️准备工具清
  • 基于 Pytorch 的全卷积网络人脸表情识别：从数据到部署的实战之旅 那年一路北 Pytorch理论+实践pytorch网络人工智能
    前言：本文将详细介绍基于Pytorch框架，利用全卷积网络进行人脸表情识别的完整过程，涵盖从数据集的准备、模型的设计与训练，再到模型的部署与预测，通过代码实现以及详细讲解，帮助读者深入理解并掌握这一技术。一、引言人脸表情是人类情感交流的重要方式，不同的表情能够传达出丰富的情感信息。人脸表情识别在智能交互、安防监控、心理健康分析等众多领域有着广泛的应用前景。随着深度学习技术的发展，基于卷积神经网络的
  • WPS office根目录在哪?_WPS加载项深入开发代码解析-2 weixin_39942726 WPSoffice根目录在哪?
    这个系列的上一篇是一个不短的视频，是我们财应同学的出镜，这一篇我找个比较典型的场景从代码层面讲讲怎么利用ribbon控制WPS加载项和WPS自身功能。ribbon是什么Ribbon是一种以面板及标签页为架构的用户界面，原先出现在MicrosoftOffice2007后续版本的Word、Excel和PowerPoint等组件中，后来也被运用到Windows7的一些附加组件等其它软件中，如画图和写字板
  • WGCLOUD 和 WGCAT 有什么区别
    WGCLOUD是运维监控软件，WGCAT是工单管理软件不过，这两个产品都是同一个团队(WGCLOUD团队)开发的，WGCAT是团队近期发布的一款工单管理系统
  • 互联网医院实时数据监测智能分析系统设计概述（上） Allen_LVyingbo 医疗高效编程研发python健康医疗python互联网医院人工智能
    研究背景近年来，随着互联网技术的飞速发展，互联网医疗作为一种新兴的医疗模式，正逐渐改变着传统的医疗服务方式。互联网医疗借助互联网、大数据、人工智能等技术手段，实现了医疗服务的线上化、智能化和便捷化，为患者提供了更加高效、优质的医疗服务。根据中国互联网络信息中心（CNNIC）发布的报告显示，我国互联网医疗用户规模达4.18亿人，较2023年12月增长372万人，占网民整体的37.7%，这表明互联网医
  • Unity子弹反弹效果实现 什么奇怪的称昵 unity游戏引擎
    依旧是用那万年不变的场景和人物......先来看看大概的效果：想要实现子弹反弹其实还是相当容易的，在2D界面控制子弹的旋转只有z轴，而如果想要在3D中实现则要对三个轴进行修改，本次是针对2D的效果实现，可能之后会在此页增加3D反弹效果。当子弹在物体发生碰撞时，要使得子弹沿着想要的方向上反弹需要获得子弹和物体在接触面的法向量，然后子弹的运动方向与法向量进行轴对称，然后将返回给过修改为子弹的运动方向即
  • wordpress使用CorePress主题设置项总结 linlinlove2 wordpress二次开发wordpress主题开发
    宝塔面板设置软件商店中安装的软件有：（宝塔网站加速3.1）（Nginx1.18.0）（MySql5.6.50）（PHP-5.6）（phpMyAdmin4.4）（Python项目管理器1.9）（又拍云存储4.5）（Linux工具箱1.4）（宝塔SSH终端1.0）（Nginx免费防火墙5.3）网站：首次添加站点选择自动创建数据库网站–>SSL：申请免费Let’sEncrypt证书，并开启强制https
  • 西工大航海学院，新一代电子信息复试资料911电子版！资料全 weixin_aaa722509 电子信息复试资料西工大航海学院
    西工大航海学院已上岸，出新一代电子信息复试资料911(电子版！资料全)，西工大911重点题型资料资料完整齐全，复习学习用这套足够，通过无忧！点此获取资料：https://www.yiwanma.com/product/view1679.html911大纲与真题信号检测与估值知识点总结数字信号处理本校PPT数字信号处理真题和本校期末考试题数字信号处理知识点与问答题纸质资料拍照汇总通信原理PPT通信原
  • 单卡挑战千亿模型！深度求索MoE架构实战指南：从理论到开源工具全解析 小诸葛IT课堂 架构
    引言：为什么需要单GPU训练千亿参数模型？随着大模型参数规模突破千亿级别，训练成本与算力需求呈指数级增长。传统密集架构（DenseModel）在单卡训练中面临显存不足、计算效率低等问题。**混合专家模型（MixtureofExperts,MoE）**通过稀疏激活机制，成为突破单卡训练瓶颈的关键技术。本文将结合深度求索（DeepSeek）的MoE架构实战经验，详解如何用单个GPU训练千亿参数模型，并
  • 利用 AI 技术监控测试环境运行状态全解析 北陌宝宝 行业研究发展人工智能
    在当今数字化时代，测试环境的稳定运行对于软件开发和业务流程的顺畅推进至关重要。传统的监控方式在面对复杂多变的系统时，往往显得力不从心，而AI技术的崛起为测试环境监控带来了新的曙光。作为一名在技术领域摸爬滚打的CSDN博主，今天就来和大家深入探讨一下如何利用AI技术监控测试环境的运行状态。AI在测试环境监控中的应用场景资源监控测试环境中的CPU、内存、存储和网络等硬件资源，就如同人体的各个器官，任何
  • 312个免费高速HTTP代理IP（能隐藏自己真实IP地址） yangshangchuan 高速免费superwordHTTP代理
        124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20
  • pull解析和json编码 百合不是茶 androidpull解析json
    n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]   pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu>     <name>java
  • [能源与矿产]石油与地球生态系统 comsci 能源
          按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....       那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
  • 类与对象浅谈 沐刃青蛟 java基础
           类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是
  • 新站开始被收录后，我们应该做什么？ IT独行者 PHPseo
    新站开始被收录后，我们应该做什么？         百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。       至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百
  • oracle 连接碰到的问题 文强chu oracle
    Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案 作者：草根IT网 来源：未知 人气：813标签： 导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
  • Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据） 小桔子 java继承swing接口监听
            都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。 编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea
  • linux常用的命令 aichenglong linux常用命令
    1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间 语法：date [OPTION]... [+FORMAT]
  • eclipse内存优化 AILIKES javaeclipsejvmjdk
    一 基本说明      在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。     1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人
  • 关键字的使用探讨 百合不是茶 关键字
    //关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final   类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖，但可以继承 final 变量 只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()
  • JS中定义对象的几种方式 bijian1013 js
        1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object();
  • 表驱动法实例 bijian1013 java表驱动法TDD
    获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T
  • LInux启停重启常用服务器的脚本 bit1129 linux
    启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改   #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo
  • 【HBase六】REST操作HBase bit1129 hbase
    HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作   1. 启动和停止HBase REST 服务 1.1 启动REST服务 前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start   后台启动 hbase-daemon.sh start rest   启动时指定
  • 大话zabbix 3.0设计假设 ronin47
    What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个：          :: Performance improvements::Trigger related da
  • http错误码大全 byalias http协议javaweb
    响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。 响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求
  • J2EE设计模式-Intercepting Filter bylijinnan java设计模式数据结构
    Intercepting Filter类似于职责链模式 有两种实现 其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;
  • 修改jboss端口 chicony jboss
    修改jboss端口   %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml   中找到 <!-- The ports-default bindings are obtained by taking the base bindin
  • c++ 用类模版实现数组类 CrazyMizzz C++
    最近c++学到数组类，写了代码将他实现，基本具有vector类的功能 #include<iostream> #include<string> #include<cassert> using namespace std; template<class T> class Array { public: //构造函数
  • hadoop dfs.datanode.du.reserved 预留空间配置方法 daizj hadoop预留空间
    对于datanode配置预留空间的方法 为：在hdfs-site.xml添加如下配置  <property>     <name>dfs.datanode.du.reserved</name>     <value>10737418240</value>    
  • mysql远程访问的设置 dcj3sjt126com mysql防火墙
    第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1
  • ios 使用特定的popToViewController返回到相应的Controller dcj3sjt126com controller
    1、取navigationCtroller中的Controllers NSArray * ctrlArray = self.navigationController.viewControllers; 2、取出后，执行， [self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
  • Linux正则表达式和通配符的区别 eksliang 正则表达式通配符和正则表达式的区别通配符
    转载请出自出处：http://eksliang.iteye.com/blog/1976579 首先得明白二者是截然不同的 通配符只能用在shell命令中,用来处理字符串的的匹配。 判断一个命令是否为bash shell(linux 默认的shell)的内置命令 type -t commad 返回结果含义 file  表示为外部命令 alias  表示该
  • Ubuntu Mysql Install and CONF gengzg Install
    http://www.navicat.com.cn/download/navicat-for-mysql Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz
  • 批处理，删除文件bat huqiji windowsdos
    @echo off ::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。 ::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。 ::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log） rem 指定待删除文件的存放路径 set SrcDir=C:/Test/BatHome rem 指定天数 set DaysAgo=1
  • 跨浏览器兼容的HTML5视频音频播放器 天梯梦 html5
    HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。   How to enable <video> and <audio> tags in
  • Bundle自定义数据传递 hm4123660 androidSerializable自定义数据传递BundleParcelable
          我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity   把数据放到Intent
  • C＃：异步编程和线程的使用（.NET 4.5 ） powertoolsteam .net线程C#异步编程
    异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。 本文中涉及关键知识点 1. 异步编程 2. 线程的使用 3. 基于任务的异步模式 4. 并行编程 5. 总结 异步编程 什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序
  • spark 查看 job history 日志 Stark_Summer 日志sparkhistoryjob
    SPARK_HOME/conf 下: spark-defaults.conf 增加如下内容 spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true spark-env.sh 增加如下内容 export SP
  • SSH框架搭建 wangxiukai2015eye springHibernatestruts
    MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。    选择Struts2 Core Libraries -<MyEclipes-Library>      点击Finish。src目录下多了struts
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他