<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>在線轉二維碼小工具</title>
<style>
html {
font-size: 100px;
}
h1 {
font-size: .6rem;
text-align: center;
}
.box {
width: 8rem;
max-width: 96%;
font-size: .36rem;
font-family: 'microsoft yahei';
margin: auto;
}
.input {
width: 100%;
line-height: 1.5;
font-size: 100%;
padding: .1rem;
border: .1rem solid #a0b3d6;
border-radius: .05rem;
font-family: inherit;
box-sizing: border-box;
resize: none;
outline: none;
}
.submit {
float: right;
width: 1.8rem; line-height: .72rem;
border-radius: .05rem;
margin-left: .2rem;
border: .1rem solid #a0b3d6;
text-align: center;
background-color: #f0f3f9;
background-image: -webkit-linear-gradient(top, #f0f3f9, #cad5eb);
background-image: linear-gradient(to bottom, #f0f3f9, #cad5eb);
color: #34538b;
text-decoration: none;
}
.number {
position: absolute;
top: 10px; right: 10px;
font-size: 100%;
border: .1rem solid #a0b3d6;
margin-left: .2rem;
border-radius: .05rem;
padding: .1rem;
visibility: hidden;
}
.submit:active {
background-image: none;
}
.follow {
overflow: hidden;
}
.output-x {
text-align: center;
margin: .3rem 0;
}
.output-x p {
color: red;
font-size: .24rem;
}
@media screen and (max-width: 800px) {
html {
font-size: calc(100px + (100vw - 800px) / 7);
}
.number {
display: none;
}
}
</style>
</head>
<body>
<h1>在線轉二維碼小工具</h1>
<div class="box">
<form id="form" class="input-x">
<input id="number" class="number" type="number" step="100" min="300" max="800" value="600" required>
<label class="submit" for="submit">生成</label>
<input type="submit" id="submit" hidden="">
<div class="follow"><input id="input" class="input" required autocomplete="off" autofocus></div>
</form>
<div id="output" class="output-x"></div>
</div>
<script src="js/jquery-1.2.6.pack.js"></script>
<script src="./js/jquery.qrcode.min.js"></script>
<script>
var elOutput = $('#output');
var elInput = $('#input');
var elNumber = $('#number');
if (localStorage.qrcodeSize) {
elNumber.val(localStorage.qrcodeSize);
} else if (screen.width <= 800) {
elNumber.val(300);
}
elNumber.css('visibility', 'visible');
var fnGenter = function () {
if (elInput.val() == '') {
elOutput.html('<p>請輸入需要轉換的內容！</p>');
elInput[0].focus();
return;
}
var size = elNumber.val() || 300;
elOutput.empty().qrcode({
width: size,
height: size,
text: elInput.val()
});
localStorage.qrcodeSize = size;
elInput.val('');
};
$('#form').submit(function(event) {
event.preventDefault();
fnGenter();
});
elNumber.change(fnGenter);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11205167-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'http://www.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
在線生成二維碼 case
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章