夜`尽、祭
夜`尽、祭

JS demo3.钟表

这里是作者学习JS的小demo3.钟表
参考来源
JSdemo

实现效果

JS demo3.钟表_第1张图片

学习笔记

CSS3 transform 属性：
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：transform: none|transform-functions;
示例：

<html>
<html>
<head>
<style> 
#div1
{
      
width:120px;
height:100px;
background-color:yellow;
border:1px solid black;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
style>

<script>
function rotate(value)
{
      
document.getElementById('div1').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.msTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.OTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.transform="rotate(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
script>

head>
<body>

<p>Rotate the yellow div element:p>

<div id="div1">HELLOdiv>

Rotate: <br>
<input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)" /><br>
transform: rotate(<span id="span1">7degspan>);

body>
html>

JS demo3.钟表_第2张图片
CSS3 :nth-of-type() Selector：
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式。
示例：


<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
<style> 
p:nth-of-type(3n+0)
{
      
	background:#ff0000;
}
style>
head>
<body>

<h1>This is a headingh1>
<p>The first paragraph.p>
<p>The second paragraph.p>
<p>The third paragraph.p>
<p>The fourth paragraph.p>
<p>The fifth paragraph.p>
<p>The sixth paragraph.p>
<p>The seventh paragraph.p>
<p>The eight paragraph.p>
<p>The ninth paragraph.p>

body>
html>

JS demo3.钟表_第3张图片

body部分

<body>
    <div id="box">//放钟的盒子
        <ul id="list">ul>//每个小点
        <div id="hour">div>//时针
        <div id="min">div>//分针
        <div id="sec">div>//秒针
        <div id="ico">div>//中间的转轴
    div>
body>

获取对象

 var list=document.getElementById("list");
            var hour=document.getElementById("hour");
            var min=document.getElementById("min");
            var sec=document.getElementById("sec");
            var css=document.getElementById("css");
            var lis="";

生成60个点

 for(var i=0;i<60;i++)
            {
     
                lis+="
  • "    ;
                
                css.innerHTML+="#list li:nth-of-type("+(i+1)+"){transform:rotate( "+i*6+"deg );-moz-transform:rotate( "+i*6+"deg );-webkit-transform:rotate( "+i*6+"deg );-o-transform:rotate( "+i*6+"deg ); }";
            }
            list.innerHTML=lis;

    获取时间

     function toTime(){
     
                var date=new Date();
                var s=date.getSeconds();
                var m=date.getMinutes()+s/60;
                var h=date.getHours()+m/60;
                hour.style.webkitTransform="rotate("+h*30+"deg)";
                min.style.webkitTransform="rotate("+m*6+"deg)";
                sec.style.webkitTransform="rotate("+s*6+"deg)";
            }

    每秒执行一次

     toTime();
 setInterval(toTime,1000);

    全部代码

    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钟表title>
    <link rel="icon" type="image/x-icon" href="xzy.jpg" >
    <style id="css">
       #box{
      
           width: 200px;
           height: 200px;
           border:1px solid black;
           position: relative;
           border-radius: 50%;
           margin: 100px auto;
       }
       #list{
      
           list-style: none;
           position: relative;
           height:100%;
           margin: 0;
           padding: 0;
       }
       #list li{
      
           width: 1px;
           height: 6px;
           background: #000000;
           position:absolute;
           left: 99px;
           top:0;
           transform-origin: center 100px;
           -moz-transform-origin:center 100px;
           -webkit-transform-origin:center 100px;
           -o-transform-origin:center 100px;
       }
       #list li:nth-child(5n+1){
      
           width: 2px;
           height: 10px;
       }
       #ico,#hour,#min,#sec{
      
           position: absolute;
           background: #000000;
       }
       #ico{
      
           width: 10px;
           height: 10px;
           border-radius: 50%;
           left:95px;
           top:95px;
       }
       #hour{
      
           width: 4px;
           height: 50px;
           left: 98px;
           top:50px;
           transform-origin: bottom;
           -moz-transform-origin:bottom;
           -webkit-transform-origin:bottom;
           -o-transform-origin:bottom;
       }
       #min{
      
           width: 3px;
           height: 70px;
           left: 99px;
           top:30px;
           transform-origin: bottom;
           background-color:blue;
           -moz-transform-origin:bottom;
           -webkit-transform-origin:bottom;
           -o-transform-origin:bottom;
       }
       #sec{
      
           width: 1px;
           height: 90px;
           left: 99px;
           top:10px;
           background-color: red;
           transform-origin: bottom;
           -moz-transform-origin:bottom;
           -webkit-transform-origin:bottom;
           -o-transform-origin:bottom;
       }
    style>
    <script>
        window.onload=function(){
      
            var list=document.getElementById("list");
            var hour=document.getElementById("hour");
            var min=document.getElementById("min");
            var sec=document.getElementById("sec");
            var css=document.getElementById("css");
            var lis="";
            for(var i=0;i<60;i++)
            {
      
                lis+="
  • "    ;
                
                css.innerHTML+="#list li:nth-of-type("+(i+1)+"){transform:rotate( "+i*6+"deg );-moz-transform:rotate( "+i*6+"deg );-webkit-transform:rotate( "+i*6+"deg );-o-transform:rotate( "+i*6+"deg ); }";
            }
            list.innerHTML=lis;
            toTime();
            setInterval(toTime,1000);

            function toTime(){
      
                var date=new Date();
                var s=date.getSeconds();
                var m=date.getMinutes()+s/60;
                var h=date.getHours()+m/60;
                hour.style.webkitTransform="rotate("+h*30+"deg)";
                min.style.webkitTransform="rotate("+m*6+"deg)";
                sec.style.webkitTransform="rotate("+s*6+"deg)";
            }

        }
        script>
head>
<body>
    <div id="box">
        <ul id="list">ul>
        <div id="hour">div>
        <div id="min">div>
        <div id="sec">div>
        <div id="ico">div>
    div>
body>
html>

    你可能感兴趣的:(JS,css,css3,html,html5,js)

    • 在Ubuntu上安装MEAN Stack的4个步骤 ubuntu
      在Ubuntu上安装MEANStack的4个步骤为：1.安装MEAN；2.安装MongoDB；3.安装NodeJS，Git和NPM；4.安装剩余的依赖项。什么是MEANStack？平均堆栈一直在很大程度上升高为基于稳健的基于JavaScript的开发堆栈。名称的意思是指其组件;MongoDB，ExpressJS，Angularjs和NodeJS。第1步：安装MEAN对于此安装，我们将在本指南中使用
    • React 相关插件之 Redux 基本使用入门 前端reactredux
      引入和定义首先，你需要创建Store实例并暴露出来：//stores/login.store.jsconstloginInstance=(preState,action)=>{switch(action.type){//修改状态case"changeLoginState":preState.isLogin=action.loginFlag=='YES'?true:falsereturnpreSta
    • 初探 Threejs 物理引擎CANNON，解锁 3D 动态魅力 伶俜Monster Threejswebgl前端3dthreejscannon.js
      简介Cannon.js是一个基于JavaScript的物理引擎，它可以在浏览器中模拟物理效果。它支持碰撞检测、刚体动力学、约束等物理效果，可以用于创建逼真的物理场景和交互。参考文档官方示例原理Cannon.js使用了欧拉角来表示物体的旋转，而不是四元数。这使得它在处理旋转时更加直观和易于理解。Cannon.js还支持多种碰撞检测算法，包括离散碰撞检测和连续碰撞检测。Cannon.js还支持多种约束
    • 用 Vue 3.5 TypeScript 重新开发3年前甘特图的核心组件 云烟，不再年轻 Vuetypescriptvue.js甘特图
      回顾3年前曾经用Vue2.0开发了一个甘特图组件，如今3年过去了，计划使用Vue3.5TypeScript把组件重新开发，有机会的话再开发一个React版本。关于之前的组件以前文章Vue2.0甘特图组件下面录屏是是用Vue3.5TypeScript开发的目前进展，不再使用Vue2里用过的snapsvg-cjs库，主要是对TypeScript支持的不太好，使用SVG.js库代替snapsvg-cjs
    • Java 处理 json 格式数据解析为 csv 格式 李昊哲小课 数据分析Java大数据javajson开发语言大数据数据分析
      Java处理json格式数据解析为csv格式如果不使用JSON工具库，你可以手动解析JSON格式字符串并将其转换为CSV格式字符串。以下是一个简单示例，展示如何实现这一功能。示例代码下面的示例代码手动处理JSON字符串，将其转换为CSV格式字符串：/***接收JSON字符串，去掉开头和结尾的方括号，按对象划分。*通过extractKeys方法提取字段名，添加到CSV的第一行。*逐项解析JSON对象
    • 设备树学习（二十三、番外篇-中断子系统之softirq） 奔跑的小刺猬 设备树设备树原理和实现
      既然开始学了，那么还是一次把中断的所有知识都系统的学一下。刚好有蜗窝大神的博客做指引。http://www.wowotech.net/irq_subsystem/soft-irq.html一、前言对于中断处理而言，linux将其分成了两个部分，一个叫做中断handler（tophalf），是全程关闭中断的，另外一部分是deferabletask（bottomhalf），属于不那么紧急需要处理的事情
    • 【Apache Storm】 茉菇 apachestorm大数据
      一、Storm简介1、概述官网地址：https://storm.apache.org/index.htmlApacheStorm是一个开源的、分布式的实时计算系统，专为处理流式数据而设计。它能够处理大量数据流并在极低的延迟下提供实时的结果。相比于传统的批处理系统，Storm具有处理无限数据流的能力，支持非常高的可扩展性和容错机制。Storm可以适用于多种编程语言，具有高度的灵活性。2、核心功能分布
    • vue3+springboot电影院售票选座管理系统 qq_3166678367 springboot后端java
      目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示：文章底部获取博主联系方式！！！！本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现：在Java的开发过程中，可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻
    • Node.js系列（4）--微服务架构实践 一进制ᅟᅠ        ‌‍‎‏  Node.js架构node.js微服务
      Node.js微服务架构实践引言微服务架构已成为构建大规模Node.js应用的主流选择。本文将深入探讨Node.js微服务架构的设计与实现，包括服务拆分、服务治理、通信机制等方面，帮助开发者构建可扩展的微服务系统。微服务架构概述Node.js微服务架构主要包括以下方面：服务拆分：业务领域划分与服务边界服务治理：服务注册、发现与负载均衡通信机制：同步与异步通信方案数据管理：分布式事务与数据一致性可观
    • vue3当中使用Pinia的store的组件化开发模式 堕落年代 vuevue.js
      一、安装与初始化安装Pinianpminstallpinia#或yarnaddpinia目的：引入Pinia核心库，为状态管理提供基础支持。挂载Pinia实例在main.js中初始化并注入Vue应用：import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'constapp=createApp(A
    • vue3使用swiper7 我承认都是月亮惹的祸 使用第三方库vue.js前端javascript
      vue3中使用swiper7基本使用swiper导入Swiper导入组件import{Swiper,SwiperSlide}from'swiper/vue/swiper-vue.js';导入需要使用到swiper的组件模块importSwiperCore,{Navigation,A11y}from'swiper';这里导入了Navigation模块,也就是使用左右箭头来导航.与A11y是一个无障碍
    • AIGC时代品牌突围战：10招玩转DeepSeek内容推荐（深度扩展版） 白雪讲堂 人工智能大数据机器学习
      一、认知革命：从SEO到GEO的生死迭代案例对比：传统SEO困境：某家电品牌2023年投入200万SEO优化，关键词排名TOP3但流量下降42%（SEMrush数据）GEO突破案例：某母婴品牌通过结构化数据改造，AI推荐量从日均300次飙升至1.2万次（来源：DeepSeek官方案例库）实战要点：内容形态改造：将产品参数表升级为JSON-LD格式（某手机品牌实现参数类问题100%引用）流量分配逻辑
    • HTML音频、视频--课后作业实践 Heetun html5
      浅学了web一段时间，用浅显的知识做了一个小小的实践，各位大佬们多多包涵，指正。主要知识重现：标记语法：src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值，true为自动播放；false为不自动播放loop:逻辑值，true自动循环播放；false不循环播放2.CSS的内部样式表选择器1{属性1：属性值1；属性2：属性值2；......}选择器2
    • H3C Network命令详解 weixin_30471561
      转载于:https://www.cnblogs.com/fanweisheng/p/11156926.html
    • CSS中的伪类与伪元素：让样式更加灵活优雅 程序员
      CSS中的伪类与伪元素：让样式更加灵活优雅在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。一、伪类（Pseudo-classes）1.1什么是伪类？伪类用于定义元素的特殊状态。它们以单个冒号（:）开头，就像给元素添加了一个虚拟的类，但无需修改HTML结构。1.2常用伪类/*鼠标悬停状态*/butto
    • 如何创建HTML自定义元素：使用 Web Component 的最佳实践 乐闻x WebComponent学习记录前端htmlwebcomponent
      什么是WebComponent？WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素，从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分：CustomElements（自定义元素）：允许开发者定义自己的HTML标签。ShadowDOM（影子DOM）：为元素提供封装的DOM和样式，让组件内部的
    • 创建在线工具来测量 PDF图纸 程序员
      在线处理PDF文件时，能够直接在浏览器中测量尺寸和内容可以显著提高工作效率。本指南将引导您完成使用ComPDFKit的WebSDK构建在线PDF测量工具的简单过程。先决条件首先，您需要访问我们的“WebSDK指南”页面来检查您是否满足这些要求：Node.js的最新稳定版本。与npm兼容的包管理器。应用许可证密钥如何获取30天免费许可证ComPDFKit为每个人提供30天免费许可证密钥，以测试他们的
    • css知识点总结 吃橘子的Crow csshtml前端
      1.css概述css是CascadingStyleSheets(级联样式表)css是一种样式表语言,用于为HTML文档控制外观,定义布局.可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)2.基本语法1.行内样式表行内样式表,又称内联样式、行间样式、内嵌样式。是
    • 【css酷炫效果】纯CSS实现动态云雾效果 冰夏之夜影 css前端
      【css酷炫效果】纯CSS实现动态云雾效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式body{margin:0;min-height:100vh;}.cloud-bg{position:relative;height:100vh;background:ra
    • 【css酷炫效果】纯CSS实现流动岩浆纹理效果 冰夏之夜影 css前端
      【css酷炫效果】纯CSS实现流动岩浆纹理效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式.lava-texture{position:relative;width:400px;height:300px;overflow:hidden;border-radi
    • 【css酷炫效果】实现鱼群游动动态效果 冰夏之夜影 web前端css前端
      【css酷炫效果】实现小鱼游动动态效果缘创作背景css代码创建div容器引入jquery引入鱼群js完整代码效果图成品资源下载链接：点击下载缘在开发系统功能的时候，无意间看到了小鱼游动特效，感觉很有意思，就在网上找了相关教程，分享给大家。创作背景刚看到csdn出活动了，赶时间，直接上代码。css代码.container{background-color:transparent;position:f
    • 数据库 + Spring Boot + Vue 全栈交互逻辑详解 代码CC Java项目-开发springbootvue.jsmysql数据库开发语言
      目录整体架构概述技术栈说明数据库设计规范SpringBoot后端架构Vue前端架构完整交互流程关键技术实现细节安全与性能优化异常处理机制整体架构概述graphTDA[Vue前端]-->|HTTP请求|B(SpringBoot后端)B-->|JDBC/ORM|C[(数据库)]C-->|返回数据|BB-->|JSON响应|AA-->|状态管理|D[VuexStore]B-->|缓存|E[Redis]B
    • 使用 Vue 2.x + Element UI 搭建后台管理系统详解 不知名靓仔 vue.jsui前端
      引言Vue.js是一个非常流行的前端框架，而ElementUI是基于Vue2.x的一套完整的UI组件库，非常适合用来构建企业级的后台管理系统。本文将详细介绍如何使用Vue2.x和ElementUI来搭建一个后台管理系统，包括项目初始化、路由配置、状态管理、权限验证等关键步骤。vue2后台管理项目源码合集下载地址见最下方1.环境准备确保你的开发环境中已安装Node.js和npm。接下来，我们将使用V
    • Vue.js + Element UI 实战：手把手教你实现评论关键词过滤功能，新手必学！》 《前端开发必备技能：Vue 2 + Element UI 实现评论敏感词过滤，完整代码分享》 《新手友 南北极之间 vue.jsui前端敏感词关键词敏感词过滤
      效果图【定制化开发服务，让您的项目领先一步】如有需求，直接私信留下您的联系方式。谢谢。我的邮箱：[email protected]以下是基于Vue2和ElementUI的评论关键词过滤功能实现，使用CDN引入Vue和ElementUI，方便在浏览器中直接预览。在线预览：Vue2+ElementUI实现评论关键词过滤功能目录需求场景技术选型实现步骤引入Vue2和ElementUI创建评论界面实现关键
    • 深入探索 dubbo-rpc-jsonrpc：跨语言服务调用的高效桥梁 郁铎舒
      深入探索dubbo-rpc-jsonrpc：跨语言服务调用的高效桥梁dubbo-rpc-jsonrpcApacheDubbo-rpc-jsonrpc是一个用于ApacheDubbo的JSON-RPC协议实现项目。它提供了一个用于ApacheDubbo的JSON-RPC协议实现库和工具。适合用于在应用程序中处理分布式服务。项目地址:https://gitcode.com/gh_mirrors/dub
    • C#搭建Json RPC2.0 Server/Client Flora*.* rpcc#
      写在前面这篇文章写了改，改了写，中间耽搁好长时间，最终还是决定坚持写下来，因为我自己在学习这部分开发时也花了很长时间去理解，所以这篇文章也相当于是对我这部分开发和学习的一个总结，希望它能给你带来帮助。因为本人能力有限，所以文中有些写的不明白或者有错误的地方还请大佬批评指正，我也会不断在项目中进行总结，更新这篇文章，让其更加通俗易懂！背景介绍在MES项目开发中，我们不希望经常改动主程序，但因为不同客
    • 基于 Python 将 PDF 转 Markdown 并拆解为 JSON，支持自定义标题处理 drebander pythonpdfjson
      在日常工作中，我们经常需要将PDF文件转换为可编辑、可结构化的数据格式，比如Markdown和JSON。但实际操作中，自动化工具往往会出现标题识别不准确的问题，尤其是PDF转换过程中，缺乏明确的标题标识。这篇文章将教你如何使用Python将PDF转换为Markdown，并通过自定义规则精准识别标题，最终将内容按标题结构拆解为JSON，方便后续快速检索与使用。1.实现目标将PDF文件转换为Markd
    • deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师... CoderBin_ 与deepseek的对话前端
      一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）
    • web端 -- RPC - 通用方案 扁舟·TF 爬虫爬虫
      背景当一个目标站加密字段特别多，而且我们对其并不需要大规模爬取时，考虑到时间成本，我们就可以使用RPC来获取加密数据。原理：搭建一个后端服务器，然后在浏览器中hook加密函数，注册到web.js端中，最后通过client端来回调加密函数，实现rpc远程调用以上就是整个RPC获取加密数据的流程。自己封装了一个通用框架，使用时只需修改一个点就行：自定义client端的type自定义web端typecl
    • Storm实战常见问题及解决方案 Lzy失控的 storm-分布式流式计算bigdata-大数据
      原文seehttp://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html1关于Storm集群1.1关于storm集群的环境变量配置问题安装好JDK后，需要配置环境变量，通常情况下出于经验，我们往往会修改/etc/profile的值进行环境变量配置，但这在安装JDK以及后面安装的storm集群、zookeeper集群以及metaq集群时会出问题，这时候我们需
    • 解读Servlet原理篇二---GenericServlet与HttpServlet 周凡杨 javaHttpServlet源理GenericService源码
      在上一篇《解读Servlet原理篇一》中提到，要实现javax.servlet.Servlet接口（即写自己的Servlet应用），你可以写一个继承自javax.servlet.GenericServletr的generic Servlet ，也可以写一个继承自java.servlet.http.HttpServlet的HTTP Servlet（这就是为什么我们自定义的Servlet通常是exte
    • MySQL性能优化 bijian1013 数据库mysql
              性能优化是通过某些有效的方法来提高MySQL的运行速度，减少占用的磁盘空间。性能优化包含很多方面，例如优化查询速度，优化更新速度和优化MySQL服务器等。本文介绍方法的主要有：         a.优化查询         b.优化数据库结构  
    • ThreadPool定时重试 dai_lm javaThreadPoolthreadtimertimertask
      项目需要当某事件触发时，执行http请求任务，失败时需要有重试机制，并根据失败次数的增加，重试间隔也相应增加，任务可能并发。 由于是耗时任务，首先考虑的就是用线程来实现，并且为了节约资源，因而选择线程池。 为了解决不定间隔的重试，选择Timer和TimerTask来完成 package threadpool; public class ThreadPoolTest {
    • Oracle 查看数据库的连接情况 周凡杨 sqloracle 连接
      首先要说的是，不同版本数据库提供的系统表会有不同，你可以根据数据字典查看该版本数据库所提供的表。 select * from dict where table_name like '%SESSION%'; 就可以查出一些表，然后根据这些表就可以获得会话信息 select sid,serial#,status,username,schemaname,osuser,terminal,ma
    • 类的继承 朱辉辉33 java
      类的继承可以提高代码的重用行，减少冗余代码；还能提高代码的扩展性。Java继承的关键字是extends 格式:public class 类名（子类）extends 类名（父类）{ } 子类可以继承到父类所有的属性和普通方法，但不能继承构造方法。且子类可以直接使用父类的public和 protected属性，但要使用private属性仍需通过调用。 子类的方法可以重写，但必须和父类的返回值类
    • android 悬浮窗特效 肆无忌惮_ android
      最近在开发项目的时候需要做一个悬浮层的动画，类似于支付宝掉钱动画。但是区别在于，需求是浮出一个窗口，之后边缩放边位移至屏幕右下角标签处。效果图如下：   一开始考虑用自定义View来做。后来发现开线程让其移动很卡，ListView+动画也没法精确定位到目标点。   后来想利用Dialog的dismiss动画来完成。   自定义一个Dialog后，在styl
    • hadoop伪分布式搭建 林鹤霄 hadoop
      要修改4个文件    1: vim hadoop-env.sh  第九行    2: vim core-site.xml            <configuration>     &n
    • gdb调试命令 aigo gdb
      原文：http://blog.csdn.net/hanchaoman/article/details/5517362   一、GDB常用命令简介   r run 运行.程序还没有运行前使用 c             cuntinue 
    • Socket编程的HelloWorld实例 alleni123 socket
      public class Client { public static void main(String[] args) { Client c=new Client(); c.receiveMessage(); } public void receiveMessage(){ Socket s=null; BufferedRea
    • 线程同步和异步 百合不是茶 线程同步异步
      多线程和同步 : 如进程、线程同步，可理解为进程或线程A和B一块配合，A执行到一定程度时要依靠B的某个结果，于是停下来，示意B运行；B依言执行，再将结果给A；A再继续操作。 所谓同步，就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回，同时其它线程也不能调用这个方法   多线程和异步:多线程可以做不同的事情,涉及到线程通知     &
    • JSP中文乱码分析 bijian1013 javajsp中文乱码
              在JSP的开发过程中，经常出现中文乱码的问题。         首先了解一下Java中文问题的由来：         Java的内核和class文件是基于unicode的，这使Java程序具有良好的跨平台性，但也带来了一些中文乱码问题的麻烦。原因主要有两方面，
    • js实现页面跳转重定向的几种方式 bijian1013 JavaScript重定向
              js实现页面跳转重定向有如下几种方式： 一.window.location.href <script language="javascript"type="text/javascript"> window.location.href="http://www.baidu.c
    • 【Struts2三】Struts2 Action转发类型 bit1129 struts2
       在【Struts2一】 Struts Hello World http://bit1129.iteye.com/blog/2109365中配置了一个简单的Action，配置如下   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configurat
    • 【HBase十一】Java API操作HBase bit1129 hbase
      Admin类的主要方法注释：   1. 创建表 /** * Creates a new table. Synchronous operation. * * @param desc table descriptor for table * @throws IllegalArgumentException if the table name is res
    • nginx gzip ronin47 nginx gzip
      Nginx GZip 压缩 Nginx GZip 模块文档详见：http://wiki.nginx.org/HttpGzipModule 常用配置片段如下： gzip on; gzip_comp_level 2; # 压缩比例，比例越大，压缩时间越长。默认是1 gzip_types text/css text/javascript; # 哪些文件可以被压缩 gzip_disable &q
    • java-7.微软亚院之编程判断俩个链表是否相交 给出俩个单向链表的头指针，比如 h1 ， h2 ，判断这俩个链表是否相交 bylijinnan java
      public class LinkListTest { /** * we deal with two main missions: * * A. * 1.we create two joined-List(both have no loop) * 2.whether list1 and list2 join * 3.print the join
    • Spring源码学习-JdbcTemplate batchUpdate批量操作 bylijinnan javaspring
      Spring JdbcTemplate的batch操作最后还是利用了JDBC提供的方法，Spring只是做了一下改造和封装 JDBC的batch操作： String sql = "INSERT INTO CUSTOMER " + "(CUST_ID, NAME, AGE) VALUES (?, ?, ?)";
    • [JWFD开源工作流]大规模拓扑矩阵存储结构最新进展 comsci 工作流
          生成和创建类已经完成,构造一个100万个元素的矩阵模型,存储空间只有11M大,请大家参考我在博客园上面的文档"构造下一代工作流存储结构的尝试",更加相信的设计和代码将陆续推出.........     竞争对手的能力也很强.......,我相信..你们一定能够先于我们推出大规模拓扑扫描和分析系统的....
    • base64编码和url编码 cuityang base64url
      import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.io.StringWriter; import java.io.UnsupportedEncodingException;
    • web应用集群Session保持 dalan_123 session
      关于使用 memcached 或redis 存储 session ，以及使用 terracotta 服务器共享。建议使用 redis，不仅仅因为它可以将缓存的内容持久化，还因为它支持的单个对象比较大，而且数据类型丰富，不只是缓存 session，还可以做其他用途，一举几得啊。1、使用 filter 方法存储这种方法比较推荐，因为它的服务器使用范围比较多，不仅限于tomcat ，而且实现的原理比较简
    • Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式'] dcj3sjt126com 数据库
          public function getMinLimit () {        $sql = "...";        $result = yii::app()->db->createCo
    • solr StatsComponent（聚合统计） eksliang solr聚合查询solr stats
      StatsComponent 转载请出自出处：http://eksliang.iteye.com/blog/2169134 http://eksliang.iteye.com/ 一、概述        Solr可以利用StatsComponent 实现数据库的聚合统计查询，也就是min、max、avg、count、sum的功能   二、参数
    • 百度一道面试题 greemranqq 位运算百度面试寻找奇数算法bitmap 算法
      那天看朋友提了一个百度面试的题目：怎么找出{1,1,2,3,3,4,4,4,5,5,5,5}  找出出现次数为奇数的数字.   我这里复制的是原话，当然顺序是不一定的，很多拿到题目第一反应就是用map,当然可以解决，但是效率不高。   还有人觉得应该用算法xxx,我是没想到用啥算法好...！   还有觉得应该先排序...   还有觉
    • Spring之在开发中使用SpringJDBC ihuning spring
        在实际开发中使用SpringJDBC有两种方式：   1. 在Dao中添加属性JdbcTemplate并用Spring注入；     JdbcTemplate类被设计成为线程安全的，所以可以在IOC 容器中声明它的单个实例，并将这个实例注入到所有的 DAO 实例中。JdbcTemplate也利用了Java 1.5 的特定(自动装箱，泛型，可变长度
    • JSON API 1.0 核心开发者自述 | 你所不知道的那些技术细节 justjavac json
      2013年5月，Yehuda Katz 完成了JSON API(英文，中文) 技术规范的初稿。事情就发生在 RailsConf 之后，在那次会议上他和 Steve Klabnik 就 JSON 雏形的技术细节相聊甚欢。在沟通单一 Rails 服务器库—— ActiveModel::Serializers 和单一 JavaScript 客户端库——&
    • 网站项目建设流程概述 macroli 工作
      一.概念 网站项目管理就是根据特定的规范、在预算范围内、按时完成的网站开发任务。 二.需求分析 项目立项 　　我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。项目实行项目经理制。 客户的需求说明书 　　第一步是需
    • AngularJs 三目运算 表达式判断 qiaolevip 每天进步一点点学习永无止境众观千象AngularJS
      事件回顾：由于需要修改同一个模板，里面包含2个不同的内容，第一个里面使用的时间差和第二个里面名称不一样，其他过滤器，内容都大同小异。希望杜绝If这样比较傻的来判断if-show or not，继续追究其源码。 var b = "{{", a = "}}"; this.startSymbol = function(a) {
    • Spark算子：统计RDD分区中的元素及数量 superlxw1234 sparkspark算子Spark RDD分区元素
      关键字：Spark算子、Spark RDD分区、Spark RDD分区元素数量     Spark RDD是被分区的，在生成RDD时候，一般可以指定分区的数量，如果不指定分区数量，当RDD从集合创建时候，则默认为该程序所分配到的资源的CPU核数，如果是从HDFS文件创建，默认为文件的Block数。   可以利用RDD的mapPartitionsWithInd
    • Spring 3.2.x将于2016年12月31日停止支持 wiselyman Spring 3
                    Spring 团队公布在2016年12月31日停止对Spring Framework 3.2.x（包含tomcat 6.x）的支持。在此之前spring团队将持续发布3.2.x的维护版本。          请大家及时准备及时升级到Spring
    • fis纯前端解决方案fis-pure zccst JavaScript
      作者：zccst FIS通过插件扩展可以完美的支持模块化的前端开发方案，我们通过FIS的二次封装能力，封装了一个功能完备的纯前端模块化方案pure。 1，fis-pure的安装 $ fis install -g fis-pure $ pure -v 0.1.4 2，下载demo到本地 git clone https://github.com/hefangshi/f
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他