`
yanzhihong23
  • 浏览: 57820 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
odometer
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
	<style type="text/css">
	.odometer {
		font-size: 40px;
	}
	</style>
</head>
<body>
<div id="odometer" class="odometer">123</div>

<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<script type="text/javascript">
	setInterval(function(){
	    odometer.innerHTML = (new Date()).getTime()%100*3;
	}, 1000);
</script>
</body>
</html>
Steps navigator bar
<!DOCTYPE html>
<html>
<head>
	<title>Steps nav bar</title>
	<style type="text/css">
		*{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		.container{
			width: 960px;
			text-align: center;
			clear: both;
			margin: 30px;
		}
		.step{		
			width: 25%;
			float: left;
			border-right: solid 1px #fff;
		}
		.step:last-child{
			border-right: none;
		}
		.rectangle{
			position: relative;
			width: 100%;
			height: 50px;
			border: solid 15px #fff;
			border-left: none;
			border-right: none;
			background: #999; 
		}
		.circle{
			position: absolute;
			width: 50px;
			height: 50px;
			line-height: 50px;
			border-radius: 25px;
			margin: 0 auto;
			background: #999;
			color: #fff;
			font-weight: bolder; 
			font-size: 36px;
			left: 95px;
			top: -15px;
		}
		.active .rectangle, .active .circle{
			background: blue;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="step">
			<div class="rectangle">
				<div class="circle">1</div>
			</div>
			<label>First</label>
		</div>
		<div class="step active">
			<div class="rectangle">
				<div class="circle">2</div>
			</div>
			<label>Second</label>
		</div>
		<div class="step">
			<div class="rectangle">
				<div class="circle">3</div>
			</div>
			<label>Third</label>
		</div>
		<div class="step">
			<div class="rectangle">
				<div class="circle">4</div>
			</div>
			<label>Fourth</label>
		</div>
	</div>
</body>
</html>
css traingle
<!DOCTYPE html>
<html>
<head>
	<title>css Traingle</title>
	<style type="text/css">
	.traingle, .traingle:after{
		width: 0;
		height: 0;
		border-top: 28px solid transparent;
		border-bottom: 28px solid transparent;
	}
	.left{
		position: relative;
		border-right: 38px solid #2e332f;
	}
	.right{
		position: relative;
		border-left: 38px solid #2e332f;
	}
	.left:hover{
		border-right-color: #f4ba37;
		-webkit-transition: border-right-color .5s linear;
	}
	.right:hover{
		border-left-color: #f4ba37;
		-webkit-transition: border-left-color .5s linear;
	}
	.left:after{
		position: absolute;
		right: -38px;
		top: -28px;
		content: "";
		border-right: 10px solid white;
		z-index: 2;
	}
	.right:after{
		position: absolute;
		left: -38px;
		top: -28px;
		content: "";
		border-left: 10px solid white;
		z-index: 2;
	}
	</style>
</head>
<body>
<div class="traingle left"></div>
<div class="traingle right"></div>
</body>
</html>
function
b();// b
a();// undefined is not a function
var a= function(){
    console.log("a");
};
function b(){
    console.log("b");
}
Global eval
var geval = eval; // Using another name does a global eval
var x = "global", y = "global"; // Two global variables
function f() { // This function does a local eval
    var x = "local"; // Define a local variable
    eval("x += 'changed';"); // Direct eval sets local variable
    return x; // Return changed local variable
}
function g() { // This function does a global eval
    var y = "local"; // A local variable
    geval("y += 'changed';"); // Indirect eval sets global variable
    return y; // Return unchanged local variable
}
console.log(f(), x); // Local variable changed: prints "localchanged global": 
console.log(g(), y); // Global variable changed: prints "local globalchanged":
wrapper objects
var s = "test"; // string
s.len = 4; // refer to property of string, js calls as if new String(s) to create a new object. Once the property has been resolved, the new object is discarded
console.log(s.len); // undefined

var s= new String("test'); // String Object
s.len = 4;
console.log(s.len); // 4
Capture command exec output string
import java.io.ByteArrayOutputStream;
import org.apache.commons.exec.CommandLine;
import org.apache.commons.exec.DefaultExecutor;
import org.apache.commons.exec.Executor;
import org.apache.commons.exec.PumpStreamHandler;

public String execToString(String command) throws Exception {
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
    CommandLine commandline = CommandLine.parse(command);
    DefaultExecutor exec = new DefaultExecutor();
    PumpStreamHandler streamHandler = new PumpStreamHandler(outputStream);
    exec.setStreamHandler(streamHandler);
    exec.execute(commandline);
    return(outputStream.toString());
}
Global site tag (gtag.js) - Google Analytics