CY耶
CY耶

HTML+CSS+JS实现简单的打字机

HTML+CSS+JS实现简单的打字机

js

/**
 * 动态打字效果函数
 * (select和element只能选择一个)
 * @param {Object} options - 配置选项
 * @param {string} options.select - 选择器，用于定位要显示文本的DOM元素("#id"或".class")
 * @param {Object} options.element - DOM元素（Element对象）
 * @param {string[]} options.strings - 要依次显示的字符串数组
 * @param {boolean} [options.lifeLike=true] - 是否模拟真实打字速度
 * @param {boolean} [options.loop=true] - 是否循环显示字符串
 * @param {number} [options.min_speed=200] - 最小打字速度（毫秒）
 * @param {number} [options.max_speed=500] - 最大打字速度（毫秒）
 * @param {Function} [options.callback_one_txt=null] - 每个字符打字结束后的回调函数
 * @param {Function} [options.callback=null] - 打字结束后的回调函数(不循环时有效)
 * 
 */
function typeit({select=null,element=null, strings, lifeLike = true, loop = false, min_speed = 200, max_speed = 500,callback_one_txt=null,callback=null}) {
    // 获取要显示文本的DOM元素
    let text_dom;
    if (element) {
        text_dom = element;
    }else{
        text_dom = document.querySelector(select);
    }

    // 当前要显示的字符串的第几个字符
    let index = 0;
    // 文本数组的下标
    let xiaBiao = 0;
    // 判断是要实现打字还是删除字效果，初始为真（打字）
    let huan = true;
    // 记录已经完成一轮的次数
    let completedRounds = 0;

    /**
     * 获取一个随机速度值
     * @param {number} min - 最小速度
     * @param {number} max - 最大速度
     * @returns {number} - 随机速度值
     */
    function getRandomSpeed(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    /**
     * 执行下一步操作：打字或删除字符
     */
    function nextStep() {
        if (huan) {
            // 给.text标签添加字符，用.slice方法
            text_dom.innerHTML = strings[xiaBiao].slice(0, ++index);
            // 如果当前字符串的所有字符都已显示，则开始删除字符
            if (index === strings[xiaBiao].length) {
                // 如果数组下标超过了最后一个字符串且不循环，则停止定时器
                if (!loop && xiaBiao >= strings.length-1) {
                    clearInterval(intervalId);
                    text_dom.classList.remove("typeit_text_css");
                    callback && callback();
                    return;
                }
                huan = false;
            }
        } else {
            // 给.text标签删除字符，用.slice方法
            text_dom.innerHTML = strings[xiaBiao].slice(0, index--);
            // 如果所有字符都已删除，则准备显示下一个字符串
            if (index < 0) {
                index = 0;
                huan = true;
                xiaBiao++;
                // 如果数组下标超过最后一个字符串，则重新从第一个字符串开始
                if (xiaBiao >= strings.length) {
                    xiaBiao = 0;
                    completedRounds++;
                }
            }
        }
        callback_one_txt && callback_one_txt();
        text_dom.innerHTML += '';
        // 根据是否需要模拟真实打字速度来设置下次执行的时间间隔
        setTimeout(nextStep, lifeLike ? getRandomSpeed(min_speed, max_speed) : min_speed);
    }
    // 启动定时器，开始执行第一步操作
    let intervalId = setTimeout(nextStep, lifeLike ? getRandomSpeed(min_speed, max_speed) : min_speed);
}

css

.typeit_text_css{
    display: inline-block;
    position: relative;
}

/* 小光标 */
.typeit_text_css::after{
    content: '';
    position: absolute;
    right: -1px;
    height: 15px;
    width: 1px;
    top: 40%;
    transform: translateY(-50%);
    background-color: #ece3e3;
    animation: san 0.5s steps(1) infinite;
}
@keyframes san{
    0%,100%{
        background-color: #727272;
    }
    50%{
       background-color: transparent;
    }
}

使用方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./typeit_cy.js">script>
    <link rel="stylesheet" href="./typeit_cy.css">
head>
<body>
    <h1 id="typeit_text_css">h1>
    <script>
        typeit({
            select: '#typeit_text_css',
            strings: ['你好', '欢迎'],
            lifeLike: true,
            loop: false
        });
    script>
body>
html>

在这里插入图片描述


<link rel="stylesheet" href="./typeit_cy/typeit_cy.css">
<script src="./typeit_cy/typeit_cy.js">script>

/**
 * 动态打字效果函数
 * (select和element只能选择一个)
 * @param {Object} options - 配置选项
 * @param {string} options.select - 选择器，用于定位要显示文本的DOM元素("#id"或".class")
 * @param {Object} options.element - DOM元素（Element对象）
 * @param {string[]} options.strings - 要依次显示的字符串数组
 * @param {boolean} [options.lifeLike=true] - 是否模拟真实打字速度
 * @param {boolean} [options.loop=true] - 是否循环显示字符串
 * @param {number} [options.min_speed=200] - 最小打字速度（毫秒）
 * @param {number} [options.max_speed=500] - 最大打字速度（毫秒）
 * @param {Function} [options.callback_one_txt=null] - 每个字符打字结束后的回调函数
 * @param {Function} [options.callback=null] - 打字结束后的回调函数(不循环时有效)
 */
typeit({
    select: '#title',
    strings: ['你好', '欢迎使用CYAI'],
    lifeLike: true,
    loop: false
});


const messageSpan = document.createElement('span');
messageSpan.className = `message ${type}_message`;
typeit({
    element: messageSpan,
    strings: [text],
    lifeLike: true,
    loop: false,
    min_speed: 0,
    max_speed: 200,
    max_line_length: 1,
    callback_one_txt: () => {
        messageContainer.scrollTop = messageContainer.scrollHeight; // 滚动到底部
    },
    callback: () => {
        messageContainer.scrollTop = messageContainer.scrollHeight; // 滚动到底部
    }
});

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

  • JavaScript Math（算数）详解 lsx202406 开发语言
    JavaScriptMath（算数）详解引言JavaScriptMath对象是JavaScript内置的一个对象，用于执行基本的数学运算。它提供了一系列的静态方法，使得进行数学运算变得非常简单。本文将详细介绍JavaScriptMath对象的各个方法及其应用。Math对象概述Math对象是一个静态对象，意味着它不能被实例化。它包含了一些数学常量和方法，可以用来执行各种数学运算。Math对象的常量M
  • 交叉编译Python-3.6.0到aarch64/aarch32 —— 支持sqlite3
    参考https://datko.net/2013/05/10/cross-compiling-python-3-3-1-for-beaglebone-arm-angstrom/平台主机：ubuntu14.0464bit开发板：qemu+aarch64（参考：http://www.cnblogs.com/pengdonglin137/p/6442583.html）工具链：aarch64-linux-
  • C#上位机实战开发指南 ba_wang_mao
    时隔半个多月，上位机教程终于写完第三章：Windows窗体程序，现开源给大家学习。有任何错误或者修改意见还请回贴指出，谢谢。【第三章】C#上位机实战开发指南.pdfhttps://www.firebbs.cn/thread-14611-1-1.html
  • JavaScript的运行机制
    JavaScript的运行机制基于单线程事件循环（EventLoop），这使得它能在非阻塞的情况下处理异步操作。以下是其核心概念的详细解释：1.单线程特性JavaScript是单线程的，意味着它一次只能执行一个任务。这是因为浏览器中的JavaScript主要用于操作DOM，如果允许多线程同时修改页面，会导致冲突和竞态条件。2.执行栈（CallStack）所有同步代码都在执行栈中执行。当调用一个函数
  • 前端开发问题：SyntaxError: “undefined“ is not valid JSON 我命由我12345 前端-问题清单json前端javascriptvue.js开发语言ecmascriptjs
    在JavaScript开发，遇到如下问题SyntaxError:"undefined"isnotvalidJSON#翻译SyntaxError："undefined"不是有效的JSON问题原因当使用JSON.parse()时，传入了一个undefined或字符串"undefined"，而它不是有效的JSON字符串问题复现传入一个undefinedconstjsonStr=undefined;con
  • Vue.js前端开发实战-----常用UI组件
    1.进入命令行界面，执行yarncreatevite命令，输入项目名称，选择Vue框架，选择JavaScript，完成vue项目创建。2.在完成创建之后在其目录下通过yarn安装ElementPius，具体命令如下：[email protected].在VSCode中创建一个新的vue文件，文件名称命名分别为MyInfo.vue，RoommateDetail.vue
  • Markdown 安装使用教程 小奇JAVA面试 安装使用教程markdown
    一、Markdown简介Markdown是一种轻量级标记语言，语法简洁、易读易写，广泛用于编写博客、文档、README文件等。它可以导出为HTML、PDF等格式，兼容各种平台如GitHub、Typora、VSCode等。二、Markdown编辑器推荐2.1桌面端编辑器平台特点TyporaWindows/macOS/Linux所见即所得，简洁高效VSCode+插件跨平台强大可扩展，开发者首选Mark
  • jEasyUI 创建自定义视图 沐知全栈开发 开发语言
    jEasyUI创建自定义视图引言jEasyUI是一款流行的jQueryUI扩展库，它提供了丰富的UI组件和交互效果，帮助开发者快速构建美观、响应式的网页应用。在jEasyUI中，创建自定义视图是一个常见的需求，本文将详细介绍如何使用jEasyUI创建自定义视图，包括视图的结构、样式和交互。视图结构在jEasyUI中，一个自定义视图通常由以下几个部分组成：容器：用于承载视图内容的HTML元素，通常是
  • 华为十年 weixin_30871905 数据库面试操作系统
    http://hi.baidu.com/xujiajundd/blog/item/0192e23ba3bd9bef15cecb7c.html上周，我正式提交了离职报告，准备给自己的职业生涯一个很大的转折，这是我长时间的思考最后所做的决定。但真的提出离职后，回想在公司的十年，还是百感交集。1997年7月16日，我只身提着一个包从深圳宝安机场下飞机，走出机场，天是那么蓝、白云那么低、空气那么潮，仰头望
  • Subversion简单常用问题解决方案列表 lddongyu maven/ant/svnsubversiontortoisesvnsvn服务器apacheeclipse
    ----------------------------------------eclipse使用subclipse导致jvm崩溃将环境变量APR_ICONV_PATH改为APR_ICONV1_PATH或者下载Subversion1.4.3的zip包，将环境变量APR_ICONV_PATH指向解压后的iconv文件夹。http://doc.iusesvn.com/show-35-1.html---
  • SVN 安装使用教程 小奇JAVA面试 安装使用教程svn
    一、SVN简介SVN（Subversion）是一个流行的集中式版本控制系统，用于跟踪文件的更改历史，常用于软件开发项目的代码管理。虽然Git更加流行，但SVN仍在很多传统企业和大型项目中被广泛使用。二、SVN安装2.1Windows安装（使用TortoiseSVN）下载地址：https://tortoisesvn.net/downloads.html安装后系统右键菜单会添加SVN功能；推荐安装中文
  • Nginx、Spring Cloud Gateway 与 Higress 的应用场景及核心区别 拂晓神剑zzz nginx运维
    Nginx、SpringCloudGateway与Higress的应用场景及核心区别一、应用场景对比1.Nginx：传统Web服务与高性能反向代理典型场景：静态资源服务器（图片、CSS、JS）高并发Web服务反向代理（如JavaTomcat前端）简单负载均衡（轮询、IP哈希）传统企业网站、电商平台入口层优势：轻量级、低资源消耗，单机可处理万级并发稳定可靠，适合长期运行的静态服务社区成熟，插件生态丰
  • JavaScript基础语法之运算符和控制流 AA-代码批发V哥 JavaScriptjavascript
    JavaScript基础语法之运算符和控制流一、运算符1.1算术运算符：数值计算的基石1.1.1字符串拼接陷阱1.2比较运算符：条件判断的起点1.2.1严格比较（`===`）vs松散比较（`==`）1.2.2其他比较运算符1.3逻辑运算符：复杂条件的组合1.3.1短路逻辑（重要特性）1.3.2实战：表单验证1.4赋值运算符：数据存储的桥梁1.4.1基础赋值（`=`）1.4.2解构赋值（ES6新增）
  • JavaScript基础语法之变量声明和数据类型 AA-代码批发V哥 JavaScriptjavascript
    JavaScript基础语法之变量声明和数据类型一、变量声明1.1变量声明的本质1.2三种声明方式对比（var/let/const）1.2.1var：函数作用域的“老派选手”1.2.2let：块级作用域的“新生代”1.2.3const：常量声明的“守护者”二、数据类型2.1原始数据类型（PrimitiveTypes）2.1.1字符串（String）2.1.2数值（Number）2.1.3布尔（Bo
  • DeepSeek AI全面应用：AI时代的高效办公与创意生产指南 Want595 人工智能deepseek
    京东链接：https://item.jd.com/15045868.html当当链接：https://product.dangdang.com/29893005.html文章目录写在前面核心亮点1.直击痛点：从“低效搬砖”到“智能掌控”2.创意觉醒：让AI成为你的“灵感引擎”3.跨平台协作：无缝衔接AI生态4.实战驱动：130+案例，即学即用5.超值资源包：扫码即得适合谁读1.职场人2.创作者/自
  • python炫酷烟花表白源代码,html代码烟花特效python liuyifan0 pygamepython开发语言
    大家好，小编来为大家解答以下问题，python绘制烟花特定爆炸效果，python炫酷烟花表白源代码，今天让我们一起来看看吧！代码实现：importpygameimportrandomimportmath#屏幕宽度SCREEN_WIDTH=1350SCREEN_HEIGHT=800#烟花颜色COLORS=[(255,0,0),(0,255,0),(0,0,255),(255,255,0),(255,
  • 基于esbuild封装类似tsup工具 aiguangyuan 前端架构前端开发系统架构
    在现代前端开发中，构建工具的选择直接影响着项目的开发效率和最终产物的性能。随着TypeScript的普及，开发者对高效、快速的TypeScript构建工具的需求日益增长。esbuild作为一款新兴的JavaScript打包器，以其惊人的构建速度引起了广泛关注，而tsup则是基于esbuild的一个优秀封装，专门为TypeScript库开发提供了零配置的便捷体验。本文将探讨如何基于esbuild核心
  • 前端开发核心：HTML、CSS与JavaScript学习指南 Randy Rhoads
    本文还有配套的精品资源，点击获取简介：HTML、CSS和JavaScript是前端开发的基础，分别负责网页的结构、样式和动态行为。学习这三种技术需要理解它们之间的关系及其协同工作的机制。本笔记提供了一个全面的复习资料，包括标签使用、CSS布局技巧、JavaScript基础语法和DOM操作，旨在帮助巩固知识点和发现潜在的学习盲点。同时，介绍了响应式设计、Web组件、ServiceWorker等现代前
  • Vue动态绑定Class与Style
    一、动态绑定Class1.1对象语法v-bind:class指令是Vue.js中用于动态绑定CSS类的指令。它可以根据Vue实例中的数据来动态添加或移除HTML元素的类。这样可以根据数据的变化来动态改变元素的样式，实现更灵活的样式控制。语法class-name:要绑定的CSS类名condition:一个表达式，当为true时，class-name会被添加；当为false时，class-name会被
  • 常见构建工具使用与原理浅析
    1.初版构建工具1.1.GruntGrunt是前端第一个正式的构建工具，它基于Node.js开发。Grunt同样是基于插件实现功能拓展增强，但对于像Webpack上很多能力，如HMR、ScopeHoisting等都是不支持的，可以作为学习Webpack前的了解。Grunt更像是一种自动化的配置工具集，就如官方所说，Grunt是TheJavaScriptTaskRunner，每个Grunt任务通常必
  • element ui表格data搜索重置功能 q249859693 elementuivue.js前端
    elementui表格搜索重置功能本地1.html搜索重置...2.datadata(){return{tabledata:[{name:1,id:1},{name:2,id:2}],//你的数据tabledata2:[],//空数据，后面会把筛选的数据加进去loading:false,//重置出现loading加载}}3.methodsgetsearch(){this.tabledata2=th
  • TextTipsPlus 多行省略 + Tooltip 提示组件 JaysonJin 实用组件库vue.jsjavascript前端
    TextTipsPlus多行省略+Tooltip提示组件✅功能亮点功能说明多行省略通过line-clamp控制显示行数，默认单行动态宽度支持传入width（数值或百分比/字符串）Tooltip超出显示自动判断是否超出容器，超出后显示完整tooltip插槽支持支持插入复杂结构（文本、图标、HTML等）i18n支持插槽和text均可支持$t()组件源码（TextTipsPlus.vue）{{$t(te
  • css滑块开关的使用,CSS3制作滑块按钮
    滑块按钮-渣图.gif查看demo结构先整理一下，这个按钮的层。分层.gif样式body{background:#eee;}/*--用绝对定位让整个按钮在页面垂直居中--*/.toggle-wrapper{position:absolute;;left:50%;top:50%;overflow:hidden;margin-left:-60px;／*--按钮向左移动一半的宽度--*／margin-t
  • html 滑块按钮,纯css的滑块开关按钮 吴君君 html滑块按钮
    之前在项目中使用滑块开关按钮，纯css写的，不考虑兼容低版本浏览器，先说下原理：使用checkbox的选中checked属性改变css伪类样式，一定要使用-webkit-appearance:none;先清除checkbox的默认样式，否则写其他的样式不起作用；好，不多说，直接上代码：css滑块开关.checke{position:relative;-webkit-appearance:none;
  • 纯CSS实现有趣emoji切换开关 南城FE 前端CSS那些事南城前端专栏css前端
    这是一个纯CSS创建的动画切换开关，它不仅能够在视觉上吸引用户，还能通过交互提供即时反馈。本文将解析源码的核心实现逻辑，这个项目的核心是使用CSS变量、3D变换和过渡效果来实现一个动态的、响应式的用户界面元素。关键技术点CSS变量：用于动态调整样式。3D变换：用于创建翻转动画效果。过渡效果：用于平滑地改变元素的样式。emoji：并不是真正的emoji而是通过CSS绘制。实现步骤1.HTML首先需要
  • Python之聚合函数 _AndyLau 手把手学pythonpython
    Python聚合函数文章目录Python聚合函数聚合函数使用多个聚合函数结合`annotate`和`values`进行分组聚合注意事项F表达式和Q表达式F表达式Q表达式注意事项视图HTML中的表单概述Django中表单概述ModelForm关键点使用示例创建ModelForm在视图中使用ModelForm模板总结Cookie和SessionDjango中的Cookie操作Django中的Sessi
  • 一：以理论结合实践方式梳理前端 React 框架 ——— 初识 React 框架 十三餍 React专栏javascriptes6前端
    初识React框架假设我们并不了解node&npm的情况下，使用最被大家熟知的方法：脚本引入方式，来开始学习react框架。官方文档：https://react.docschina.org/创建第一个应用管他三七二十一，先整一个项目再说：在你习惯放置学习代码的地方，建个目录（例：F:\wwwroot\react-demo），并建一个demo01.html，搭好html5格式：DocumentRea
  • 使用Node.js命令行进行编程 翠绿探寻 node.jsvim编辑器编程
    Node.js是一个基于ChromeV8JavaScript引擎构建的运行时环境，它可以让开发者使用JavaScript语言编写服务器端代码。Node.js命令行界面（CLI）是一个强大的工具，它提供了与Node.js交互和执行JavaScript代码的能力。在本文中，我们将介绍如何在Node.js命令行中使用JavaScript进行编程，并提供相应的源代码示例。1.安装Node.js首先，我们需
  • 反向遍历--当你修改一个元素的outerHTML时，该元素会被从 DOM 中移除 专注VB编程开发20年 htmljavascript
    varspans=editor.querySelectorAll('span[mytag]');//将NodeList转换为数组//varspansArray=Array.from(spans);varid=0spans.forEach(span=>{span.outerhtml这里无法直接修改吗?}在JavaScript中，outerHTML是一个可写属性，但你需要注意以下几点：1.属性名大小写
  • VUE2双向绑定的原理 许先森森 VUE2javascript前端vue.jsvue双向绑定vue
    文章目录VUE2双向绑定的原理1.什么是双向绑定2.双向绑定的原理2.1ViewModel的重要作用2.2双向绑定的流程3.双向绑定的实现3.1data响应化处理3.2Compile编译3.3依赖收集VUE2双向绑定的原理1.什么是双向绑定讲双向绑定先讲单项绑定，啥叫单项绑定，就是一句话就是通过Model去改变View，再直白点，就是通过js代码把数据改变后，html视图也跟着变化那双项绑定就很好
  • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
    前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
  • 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
    下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
  • web缓存基础：术语、http报头和缓存策略 dalan_123 Web
    对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
  • crontab 问题 周凡杨 linuxcrontabunix
      一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
  • 让tomcat支持2级域名共享session g21121 session
    tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
  • web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
      ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
  • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
    #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
  • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
    如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
  • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
    来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
  • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
        创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
  • 多线程基础知识 bijian1013 java多线程threadjava多线程
    一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
  • fastjson简单使用实例 bijian1013 fastjson
    一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
  • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
    Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
  • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
    1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
  • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
    linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
  • java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
    public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
  • linux 系统相关命令 candiio linux
    系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
  • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
         一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
  • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
    几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
  • java乱码问题 dashuaifu java乱码问题js中文乱码
    swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
  • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
    cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
  • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
    2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
  • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
    转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
  • 手势滑动销毁Activity gundumw100 android
    老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
  • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
    效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
  • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
    最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
  • Calender不是单例 men4661273 单例Calender
             在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
  • 线程内存和主内存之间联系 qifeifei java thread
    1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
  • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
    原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
  • erlang 部署 wudixiaotie erlang
    1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他