| HTMLEvent customEvent |
html |
Trigger Custom |
ie9+
//Trigger Custom
if (window.CustomEvent) {
var event = new CustomEvent('my-event', {detail: {some: 'data'}});
} else {
var event = document.createEvent('CustomEvent');
event.initCustomEvent('my-event', true, true, {some: 'data'});
}
//触发事件
el.dispatchEvent(event);
//Trigger Native
// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
//getType
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, "$1").toLowerCase();
|
| css 滚动条样式 |
滚动条 自定义样式 |
CSS设置滚动条样式 |
IE下滚动条
Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}
webkit浏览器css设置滚动条
主要有下面7个属性
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
|
| 如何让整个网页以滤镜filter的灰度黑白显示 |
css 灰度 filter firefox chrome ie |
http://www.zhangxinxu.com/wordpress/?p=2547 |
/* css3 的filter 兼容性，请参考
* http://caniuse.com/#feat=css-filters
*/
html {
-webkit-filter: grayscale(1); // 如果未设置值，默认是100%
filter:gray(); //或者filter : progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
/* http://www.zhangxinxu.com/study/201208/css3-grayscale-filter-use-svg.html */
针对firefox 参照上面css-filters 的兼容性，暂时使用svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
以上svg代码保存为svg文件在css里 加入
filter: url(gray.svg#grayscale);
|
| native JavaScript APIs |
javascript |
How to forget about jQuery and start using native JavaScript APIs |
Native equivalents
Select elements
// jQuery
var els = $('.el');
// Native
var els = document.querySelectorAll('.el');
// Shorthand
var $ = function (el) {
return document.querySelectorAll(el);
}
var els = $('.el');
// Or use regex-based micro-selector lib
// http://jsperf.com/micro-selector-libraries
Create elements
// jQuery
var newEl = $('
'); // Native var newEl = document.createElement('div');
Add event listener
// jQuery
$('.el').on('event', function() {
});
// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
el.addEventListener('event', function() {
}, false);
});
Set/get attribute
// jQuery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');
// Native
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');
Add/remove/toggle class
// jQuery
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');
// Native
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');
Append
// jQuery
$('.el').append($('
')); // Native document.querySelector('.el').appendChild(document.createElement('div'));
Clone
// jQuery
var clonedEl = $('.el').clone();
// Native
var clonedEl = document.querySelector('.el').cloneNode(true);
Remove
// jQuery
$('.el').remove();
// Native
remove('.el');
function remove(el) {
var toRemove = document.querySelector(el);
toRemove.parentNode.removeChild(toRemove);
}
Parent
// jQuery
$('.el').parent();
// Native
document.querySelector('.el').parentNode;
Prev/next element
// jQuery
$('.el').prev();
$('.el').next();
// Native
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;
XHR aka AJAX
// jQuery
$.get('url', function (data) {
});
$.post('url', {data: data}, function (data) {
});
// Native
// get
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function (data) {
}
xhr.send();
// post
var xhr = new XMLHttpRequest()
xhr.open('POST', url);
xhr.onreadystatechange = function (data) {
}
xhr.send({data: data});
|
| socket |
socket |
ORACLE做socket编程 |
create or replace function func_socket(IV_SENDBUF in varchar,
OV_RECVBUF out varchar)
return integer is
Result integer;
/*与服务器通讯
参数从表读取*/
sServIp varchar2(15);
iServPort number(6);
iTimeout number(3);
sStartFlg varchar2(2); --开始标志
sHead varchar2(9); --报文头
SBuf varchar2(2048); --数据区
socket utl_tcp.connection;
iLength number(4);
sqlerr number(6);
iCnt number(2);
iRecvLen number(6);
begin
OV_RECVBUF := '';
Result := 0;
iCnt := 0;
/*读取参数*/
select SERV_IP, SERV_PORT, TIMEOUT
into sServIp, iServPort, iTimeout
from intf_bank_cfg
where cfg_id = 1
and rownum = 1;
/*连接服务器*/
socket := utl_tcp.open_connection(sServIp,
iServPort,
NULL,
NULL,
NULL,
NULL,
NULL,
NULL,
iTimeout);
/*发送数据*/
if utl_tcp.write_text(socket, IV_SENDBUF) <> length(IV_SENDBUF) then
return - 1;
end if;
utl_tcp.flush(socket);
/*接收数据*/
<<nextrecv>>
if iCnt > 3 then
return - 1;
end if;
IF (utl_tcp.available(socket, iTimeout) > 0) THEN
/*处理报文头，如果不是S开头继续接收2次*/
if utl_tcp.read_text(socket, sStartFlg, 1) <> 1 or
substr(sStartFlg, 0, 1) <> 'S' then
--'S开头判断'
iCnt := iCnt + 1;
goto nextrecv;
end if;
/*长度判断*/
if utl_tcp.read_text(socket, sHead, 8) <> 8 then
return - 1;
end if;
iLength := to_number(substr(sHead, 5, 4));
/*接收报文体*/
iRecvLen :=utl_tcp.read_text(socket, SBuf, iLength);
if lengthb(sBuf)<> iLength then
return - 1;
end if;
OV_RECVBUF := sStartFlg || sHead || SBuf;
else
Result := -1;
end if;
/*关闭连接*/
utl_tcp.close_connection(socket);
/*记录交易日志*/
return(Result);
exception
when others then
sqlerr := sqlcode;
utl_tcp.close_connection(socket);
return - 1;
end func_bank_commwithserv;
/
|
| java 当前线程当前类和执行方法 |
java |
|
StackTraceElement thr = Thread.currentThread().getStackTrace()[1];
log.info(thr.getClassName()+ "/" + thr.getMethodName() + "/jdbcname:~~~~~~~~~~~~~" + jdbcName);
|
| java EE7 WebSocket 1.0 |
websocket |
Java EE 7中对WebSocket 1.0的支持 |
Java EE 7中对WebSocket 1.0的支持
1.server端
pom依赖：
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0-b82</version>
<scope>provided</scope>
</dependency>
src/main/java/com/hmkcode/MyServerEndpoint.java
package com.hmkcode;
import java.io.IOException;
import java.util.LinkedList;
import javax.websocket.EncodeException;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint(value="/websocket/{client-id}")
public class MyServerEndpoint {
private static final LinkedList<Session> clients = new LinkedList<Session>();
@OnOpen
public void onOpen(Session session) {
clients.add(session);
}
@OnMessage
public void onMessage(String message,@PathParam("client-id") String clientId) {
for (Session client : clients) {
try {
client.getBasicRemote().sendObject(clientId+": "+message);
} catch (IOException e) {
e.printStackTrace();
} catch (EncodeException e) {
e.printStackTrace();
}
}
}
@OnClose
public void onClose(Session peer) {
clients.remove(peer);
}
}
@ServerEndpoint(value=”/websocket/{client-id}”)是client连接的url地址，{client-id}是每个client连接的名称标识。
@onOpen，@onMessag和@onClose是对应的每个session连接生命周期的回调函数
2. websocket客户端（桌面端）
pom依赖：
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0-b82</version>
</dependency>
<dependency>
<groupId>org.glassfish.tyrus</groupId>
<artifactId>tyrus-client</artifactId>
<version>1.0-rc3</version>
</dependency>
<dependency>
<groupId>org.glassfish.tyrus</groupId>
<artifactId>tyrus-container-grizzly</artifactId>
<version>1.0-rc3</version>
</dependency>
src/main/java/com/hmkcode/MyClient.java
package com.hmkcode;
import java.io.IOException;
import javax.websocket.ClientEndpoint;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
@ClientEndpoint
public class MyClient {
@OnOpen
public void onOpen(Session session) {
System.out.println("Connected to endpoint: " + session.getBasicRemote());
try {
session.getBasicRemote().sendText("Hello");
} catch (IOException ex) {
}
}
@OnMessage
public void onMessage(String message) {
System.out.println(message);
}
@OnError
public void onError(Throwable t) {
t.printStackTrace();
}
}
src/main/java/com/hmkcode/App.java
package com.hmkcode;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URI;
import javax.websocket.ContainerProvider;
import javax.websocket.DeploymentException;
import javax.websocket.Session;
import javax.websocket.WebSocketContainer;
public class App {
public Session session;
protected void start()
{
WebSocketContainer container = ContainerProvider.getWebSocketContainer();
String uri = "ws://localhost:8080/websocket-glassfish-server/websocket/desktop-client";
System.out.println("Connecting to " + uri);
try {
session = container.connectToServer(MyClient.class, URI.create(uri));
} catch (DeploymentException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
public static void main(String args[]){
App client = new App();
client.start();
BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
String input = "";
try {
do{
input = br.readLine();
if(!input.equals("exit"))
client.session.getBasicRemote().sendText(input);
}while(!input.equals("exit"));
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
3. client web客户端
/src/main/webapp/index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Java API for WebSocket (JSR-356)</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="websocket.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<h1>Java API for WebSocket (JSR-356)</h1>
<div>
<span id="status" class="label label-important">Not Connected</span>
</div>
<br/>
<label style="display:inline-block">Message: </label><input type="text" id="message" />
<button id="send" class="btn btn-primary" onclick="sendMessage()">Send</button>
<table id="received_messages" class="table table-striped">
<tr>
<th>#</th>
<th>Sender</th>
<th>Message</th>
</tr>
</table>
</div>
</body>
</html>
/src/main/webapp/websocket.js
var URL = "ws://localhost:8080/websocket-glassfish-server/websocket/web-client";
var websocket;
$(document).ready(function(){
connect();
});
function connect(){
websocket = new WebSocket(URL);
websocket.onopen = function(evnt) { onOpen(evnt) };
websocket.onmessage = function(evnt) { onMessage(evnt) };
websocket.onerror = function(evnt) { onError(evnt) };
}
function sendMessage() {
websocket.send($("#message").val());
}
function onOpen() {
updateStatus("connected")
}
function onMessage(evnt) {
if (typeof evnt.data == "string") {
$("#received_messages").append(
$('<tr/>')
.append($('<td/>').text("1"))
.append($('<td/>').text(evnt.data.substring(0,evnt.data.indexOf(":"))))
.append($('<td/>').text(evnt.data.substring(evnt.data.indexOf(":")+1))));
}
}
function onError(evnt) {
alert('ERROR: ' + evnt.data);
}
function updateStatus(status){
if(status == "connected"){
$("#status").removeClass (function (index, css) {
return (css.match (/\blabel-\S+/g) || []).join(' ')
});
$("#status").text(status).addClass("label-success");
}
}
不过web端需要在支持websokcet的应用服务器上跑。
|
| 服务器端写回本地硬盘图片 |
beacon, 灯标, 图片 |
通过Servlet 将服务器硬盘图片 展示到浏览器 |
package servlet;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* @说明 该Servlet将本地硬盘的图片输入管道中
* @author cuisuqiang
* @version 1.0
* @since
*/
@SuppressWarnings("serial")
public class ImageShowServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
OutputStream os = response.getOutputStream();
File file = new File("C:\\abc.jpg");
FileInputStream fips = new FileInputStream(file);
byte[] btImg = readStream(fips);
os.write(btImg);
os.flush();
}
/**
* 读取管道中的流数据
*/
public byte[] readStream(InputStream inStream) {
ByteArrayOutputStream bops = new ByteArrayOutputStream();
int data = -1;
try {
while((data = inStream.read()) != -1){
bops.write(data);
}
return bops.toByteArray();
}catch(Exception e){
return null;
}
}
}
|
