|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
|
|
<%
|
|
|
String path = request.getContextPath();
|
|
|
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
|
|
%>
|
|
|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
|
<html>
|
|
|
<head>
|
|
|
<base href="<%=basePath%>">
|
|
|
|
|
|
<title>My JSP 'aaa.jsp' starting page</title>
|
|
|
|
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
|
<meta http-equiv="cache-control" content="no-cache">
|
|
|
<meta http-equiv="expires" content="0">
|
|
|
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
|
|
|
<meta http-equiv="description" content="This is my page">
|
|
|
<!--
|
|
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
|
|
-->
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<style>
|
|
|
.div {
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
border: 1px solid black;
|
|
|
margin: 10px;
|
|
|
float: left;
|
|
|
padding: 30px;
|
|
|
text-align: center;
|
|
|
background-color: lightgray;
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
.p {
|
|
|
background-color: white;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<div class="div" onmousemove="myMoveFunction()">
|
|
|
<p>onmousemove: <br> <span id="demo">鼠标移动到我这!</span></p>
|
|
|
</div>
|
|
|
<div class="div"onmouseenter="myEnterFunction(this)" onmouseleave="l(this)">
|
|
|
<p>onmouseenter: <br> <span id="demo2">鼠标移动到我这!</span></p>
|
|
|
</div>
|
|
|
<div class="div"onmouseover="myOverFunction()">
|
|
|
<p>onmouseover: <br> <span id="demo3">鼠标移动到我这!</span></p>
|
|
|
</div>
|
|
|
<script>
|
|
|
x = 0;
|
|
|
y = 0;
|
|
|
z = 0;
|
|
|
function myMoveFunction() {
|
|
|
document.getElementById("demo").innerHTML = z+=1;
|
|
|
}
|
|
|
function myEnterFunction(t) {
|
|
|
document.getElementById("demo2").innerHTML = x+=1;
|
|
|
t.style.width="10px";
|
|
|
}
|
|
|
function l(t) {
|
|
|
document.getElementById("demo2").innerHTML = x+=1;
|
|
|
t.style.width="20px";
|
|
|
|
|
|
}
|
|
|
function myOverFunction() {
|
|
|
document.getElementById("demo3").innerHTML = y+=1;
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<input type="text" id="test1">
|
|
|
<script src="./laydate/laydate.js"></script> <!-- 改成你的路径 -->
|
|
|
<script>
|
|
|
//执行一个laydate实例
|
|
|
laydate.render({
|
|
|
elem: '#test1' //指定元素
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="ctrl">
|
|
|
<div style="display: none" id="myss"> <img id="img" src="">
|
|
|
<div style="height: 20px"></div>
|
|
|
</div>
|
|
|
<input id="file" type="file" onchange="compress()" name="file">
|
|
|
<input type="hidden" value="" name="image" id="image">
|
|
|
<script>
|
|
|
|
|
|
// 对图片进行压缩
|
|
|
function compress() {
|
|
|
let fileObj = document.getElementById('file').files[0] //上传文件的对象
|
|
|
let reader = new FileReader()
|
|
|
reader.readAsDataURL(fileObj)
|
|
|
reader.onload = function(e) {
|
|
|
let image = new Image() //新建一个img标签（还没嵌入DOM节点)
|
|
|
image.src = e.target.result
|
|
|
image.onload = function() {
|
|
|
let canvas = document.createElement('canvas'),
|
|
|
context = canvas.getContext('2d'),
|
|
|
may=300/image.width,
|
|
|
imageWidth =300, //压缩后图片的大小
|
|
|
imageHeight = image.height*may,
|
|
|
data = ''
|
|
|
|
|
|
canvas.width = imageWidth
|
|
|
canvas.height = imageHeight
|
|
|
|
|
|
context.drawImage(image, 0, 0, imageWidth, imageHeight)
|
|
|
data = canvas.toDataURL('image/jpeg')
|
|
|
|
|
|
|
|
|
//压缩完成
|
|
|
document.getElementById('img').src = data
|
|
|
document.getElementById('image').value =data
|
|
|
|
|
|
var div = document.getElementById("myss");
|
|
|
div.style.setProperty('display','block');
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<option value="请选择">请选择</option>
|
|
|
<select class="form-control" id="cmbProvince" name="cmbProvince" ></select>
|
|
|
<select class="form-control" id="cmbCity" name="cmbCity" ></select>
|
|
|
<select class="form-control" id="cmbArea" name="cmbArea" ></select>
|
|
|
|
|
|
<script type="text/javascript" src="./Address.js" charset="utf-8"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
$(document).ready(function(){
|
|
|
addressInit('cmbProvince', 'cmbCity', 'cmbArea');
|
|
|
});
|
|
|
</script>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="jquery-2.1.4.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<form method="post" action="">
|
|
|
<ul>
|
|
|
|
|
|
<li>输入你要使用的帐号：<input class="easyui-validatebox" required="true" missingMessage="姓名必须填写" size="20"
|
|
|
type="text" name="id"></input></li>
|
|
|
<li>输入你要使用的密码：<input class="easyui-validatebox" required="true" missingMessage="密码必须填写" size="20" type="password" name="passwd" id="pwd1"></input></li>
|
|
|
<li>重新输入一样的密码：<input class="easyui-validatebox" required="true" missingMessage="密码必须填写" size="20" type="password" name="passwd" id="pwd2" onkeyup="validate()"/><span id="tishi"></span></input></li>
|
|
|
<li><input id="submit" type="submit" disabled="disabled" value="提交"><input type="reset" value="重新输入"></li>
|
|
|
</ul>
|
|
|
</form>
|
|
|
<a href="index.html">返回主菜单</a>
|
|
|
|
|
|
<script>
|
|
|
function validate() {
|
|
|
var pwd1 = document.getElementById("pwd1").value;
|
|
|
var pwd2 = document.getElementById("pwd2").value;
|
|
|
console.log(pwd1);
|
|
|
|
|
|
if(pwd1 == pwd2) {
|
|
|
document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
|
|
|
if(document.getElementById("submit").disabled==null)
|
|
|
console.log("null");
|
|
|
else console.log("not null");
|
|
|
document.getElementById("submit").disabled = false;
|
|
|
console.log("same");
|
|
|
}
|
|
|
else {
|
|
|
console.log("same");
|
|
|
|
|
|
document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
|
|
|
document.getElementById("submit").disabled=true;
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
|
|
|
|
<ul class="onn">
|
|
|
|
|
|
<li v-on:click="onn">111111</li>
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
var on = new Vue({
|
|
|
el:'.onn',
|
|
|
methods:{
|
|
|
onn:function(){
|
|
|
console.log(11);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
body {
|
|
|
background-color: #eee
|
|
|
}
|
|
|
|
|
|
.wrap {
|
|
|
margin: 50px auto 0 auto;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: space-around;
|
|
|
max-width: 1200px;
|
|
|
}
|
|
|
|
|
|
.tile {
|
|
|
width: 380px;
|
|
|
height: 380px;
|
|
|
margin: 10px;
|
|
|
background-color: #99aeff;
|
|
|
display: inline-block;
|
|
|
background-size: cover;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.4s ease-out;
|
|
|
box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
|
|
|
overflow: hidden;
|
|
|
color: white;
|
|
|
font-family: 'Roboto';
|
|
|
}
|
|
|
|
|
|
.tile img {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 0;
|
|
|
transition: all 0.4s ease-out;
|
|
|
}
|
|
|
|
|
|
.tile .text {
|
|
|
z-index: 99;
|
|
|
position: absolute;
|
|
|
padding: 30px;
|
|
|
height: calc(100% - 60px);
|
|
|
height: calc(100% - 60px);
|
|
|
}
|
|
|
|
|
|
.tile h1 {
|
|
|
font-weight: 300;
|
|
|
margin: 0;
|
|
|
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
.tile h2 {
|
|
|
font-weight: 100;
|
|
|
margin: 20px 0 0 0;
|
|
|
font-style: italic;
|
|
|
transform: translateX(200px);
|
|
|
}
|
|
|
|
|
|
.tile p {
|
|
|
font-weight: 300;
|
|
|
margin: 20px 0 0 0;
|
|
|
line-height: 25px;
|
|
|
/* opacity:0; */
|
|
|
transform: translateX(-200px);
|
|
|
transition-delay: 0.2s;
|
|
|
}
|
|
|
|
|
|
.animate-text {
|
|
|
opacity: 0;
|
|
|
transition: all 0.6s ease-in-out;
|
|
|
}
|
|
|
|
|
|
.tile:hover {
|
|
|
/* background-color:#99aeff; */
|
|
|
box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64);
|
|
|
transform: scale(1.05);
|
|
|
}
|
|
|
|
|
|
.tile:hover img {
|
|
|
opacity: 0.2;
|
|
|
}
|
|
|
|
|
|
.tile:hover .animate-text {
|
|
|
transform: translateX(0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
.dots {
|
|
|
position: absolute;
|
|
|
bottom: 20px;
|
|
|
right: 30px;
|
|
|
margin: 0 auto;
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
color: currentColor;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
}
|
|
|
|
|
|
.dots span {
|
|
|
width: 5px;
|
|
|
height: 5px;
|
|
|
background-color: currentColor;
|
|
|
border-radius: 50%;
|
|
|
display: block;
|
|
|
opacity: 0;
|
|
|
transition: transform 0.4s ease-out, opacity 0.5s ease;
|
|
|
transform: translateY(30px);
|
|
|
}
|
|
|
|
|
|
.tile:hover span {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0px);
|
|
|
}
|
|
|
|
|
|
.dots span:nth-child(1) {
|
|
|
transition-delay: 0.05s;
|
|
|
}
|
|
|
|
|
|
.dots span:nth-child(2) {
|
|
|
transition-delay: 0.1s;
|
|
|
}
|
|
|
|
|
|
.dots span:nth-child(3) {
|
|
|
transition-delay: 0.15s;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1000px) {
|
|
|
.wrap {
|
|
|
flex-direction: column;
|
|
|
width: 400px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.div{
|
|
|
width:150px;
|
|
|
height:150px;
|
|
|
border: 1px solid red;
|
|
|
z-index: 410;
|
|
|
visibility: visible;
|
|
|
position: relative;
|
|
|
}
|
|
|
.aa{
|
|
|
position:relative;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="div">
|
|
|
<a class="aa">123444</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="wrap">
|
|
|
<div class="tile">
|
|
|
<img src='https://images.unsplash.com/photo-1464054313797-e27fb58e90a9?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=996&q=80' />
|
|
|
<div class="text">
|
|
|
<h1>Lorem ipsum.</h1>
|
|
|
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
|
|
|
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
|
|
|
<div class="dots">
|
|
|
<span></span>
|
|
|
<span></span>
|
|
|
<span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="text">
|
|
|
<h1>Lorem ipsum.</h1>
|
|
|
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
|
|
|
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
|
|
|
<div class="dots">
|
|
|
<span></span>
|
|
|
<span></span>
|
|
|
<span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tile">
|
|
|
<img src='https://images.unsplash.com/photo-1458668383970-8ddd3927deed?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1004&q=80' />
|
|
|
<div class="text">
|
|
|
<h1>Lorem ipsum.</h1>
|
|
|
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
|
|
|
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
|
|
|
<div class="dots">
|
|
|
<span></span>
|
|
|
<span></span>
|
|
|
<span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tile">
|
|
|
<img src='https://images.unsplash.com/photo-1422393462206-207b0fbd8d6b?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80' />
|
|
|
<div class="text">
|
|
|
<h1>Lorem ipsum.</h1>
|
|
|
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
|
|
|
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
|
|
|
<div class="dots">
|
|
|
<span></span>
|
|
|
<span></span>
|
|
|
<span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
{}
|
|
|
let fileObj = file ;//上传文件的对象
|
|
|
let reader = new FileReader();
|
|
|
reader.readAsDataURL(fileObj);
|
|
|
reader.onload = function(e) {
|
|
|
let image = new Image() ;//新建一个img标签（还没嵌入DOM节点)
|
|
|
image.src = e.target.result;
|
|
|
image.onload = function() {
|
|
|
let canvas = document.createElement('canvas'),
|
|
|
context = canvas.getContext('2d'),
|
|
|
may=300/image.width,
|
|
|
imageWidth =300, //压缩后图片的大小
|
|
|
imageHeight = image.height*may,
|
|
|
data = '';
|
|
|
|
|
|
canvas.width = imageWidth;
|
|
|
canvas.height = imageHeight;
|
|
|
|
|
|
context.drawImage(image, 0, 0, imageWidth, imageHeight);
|
|
|
data = canvas.toDataURL('image/jpeg');
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
|
}};
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
