<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
100%;/* 配合垂直居中3 */
height: 100%;/* 配合垂直居中4 */
margin: 0;/* 防止出现小幅度的滚动栏 */
padding: 0;/* 防止出现小幅度的滚动栏 */
}
#mybody{
background-color: red;
300px;
height: 350px;
/*问题：布局的居中，内容的居中*/
/* 布局的居中1,水平 */
margin: 0 auto;
/* 配合垂直居中1 *position: relative;/
/* 配合垂直居中2 * top:20%;/
/* 内容的居中 */
text-align: center;/* 内容的水平居中 */
line-height: 350px;/* 内容的垂直居中 */
}
#myBtn{
100px;
height:80px;
margin: 0 auto;
background-color: blue;
text-align: center;/* 内容的水平居中 */
line-height: 100px;/* 内容的垂直居中 */
}
</style>
</head>
<body>
<div id="mybody" v-bind:style="{backgroundColor:bgcolor}">
<div id="myBtn" v-on:click="myclick">点我</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//把style当成是一个字符串来操作是可以的，但是非常不方便更改
//任何赋值，都需要对整个style进行修改
//var myModel={myStyle:' 200px;height: 50px;background-color: red'}
//定义一个全局变量，用于记录上一次执行的时间
var lasttime = new Date();
var myModel = {bgcolor:'green'};
var myViewModel = new Vue({
el:'#mybody',
data:myModel,
methods:{
myclick:function(){
now = new Date();
dif = now - lasttime - 170;
if(dif<150){
alert('你反应速度：'+dif+',如果你不是神，那就是碰巧点了鼠标，不是真正的实力！');
}else if(dif<200){
alert('你反应速度：'+dif+',正常');
}else if(dif<300){
alert('你反应速度：'+dif+',就这样吧，你懂！');
}else if(dif<400){
alert('你反应速度：'+dif+',可以试一下睡一觉，精神好点再来');
}else{
alert('你睡着了吗？');
}
}
}
});
function changeBgColor(){
if(myModel.bgcolor=='green'){
myModel.bgcolor='red';
}else{
myModel.bgcolor='green';
}
//这是,最小极限为3秒，最大极限为12+3秒的算法
time = Math.random()*12*1000+3000;
setTimeout(changeBgColor,time);
lasttime = new Date();
}
//定时函数有2个(settimeout,setInterval)
/**
* settimeout(指定时间，执行1次，但是可以执行结束后，再1次，而且时间可以配置)
* setInterval(固定时间，反复循环执行)
*/
setTimeout(changeBgColor,5000);
</script>
</html>