1.强制解决PC端事件在移动端的300秒延迟
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
<script type="text/javascript">
document.addEventListener("click", function(ev){
var n = new Date();
console.log("PC" + n.getMilliseconds());
})
document.addEventListener("touchstart", function(){
var n = new Date();
console.log("mobile" + n.getMilliseconds());
})
</script>
</body>
2.移动端事件练习
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
#myDiv{
width: 200px;
height: 200px;
background: green;
position: absolute;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("touchstart", function(){
document.addEventListener("touchmove", function(ev){
console.log(ev);
console.log(ev.touches[0].clientX);
myDiv.style.left = ev.touches[0].clientX - myDiv.offsetWidth / 2 + "px";
myDiv.style.top = ev.touches[0].clientY - myDiv.offsetHeight / 2 + "px";
})
})
</script>
</body>
3.touchJS讲解
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
#myDiv{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<script src="touch-0.2.14.min.js" type="text/javascript" charset="utf-8"></script>
<div id="myDiv">
</div>
<script type="text/javascript">
touch.on("#myDiv", "swipe", function(){
alert("敲我干啥");
})
</script>
4.国际化
index.html
<style type="text/css">
ul{
list-style: none;
}
li{
float: left;
width: 150px;
height: 30px;
margin-right: 10px;
border: 1px solid black;
text-align: center;
line-height: 30px;
}
#browsers{
width: 100px;
height: 50px;
}
</style>
<script src="en.js" type="text/javascript" charset="utf-8"></script>
<script src="zh.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<select id="browsers" onchange="sel(this)" >
<option id="selectLanguage"></option>
<option id="zh" onclick="zh()"></option>
<option id="en" onclick="en()"></option>
</select>
<ul>
<li id="theIndex"></li>
<li id="everyday"></li>
<li id="shopping"></li>
<li id="traval"></li>
<li id="eating"></li>
</ul>
<script type="text/javascript">
setThing(chinaObj);
function sel(ev){
if (ev.value == "Chinese"){
setThing(chinaObj);
}
if (ev.value == "英文"){
setThing(enObj);
}
}
function setThing(obj) {
document.getElementById("theIndex").innerHTML = obj.theIndex;
document.getElementById("everyday").innerHTML = obj.everyday;
document.getElementById("shopping").innerHTML = obj.shopping;
document.getElementById("traval").innerHTML = obj.traval;
document.getElementById("eating").innerHTML = obj.eating;
document.getElementById("selectLanguage").innerHTML = obj.selectLanguage;
document.getElementById("zh").innerHTML = obj.zh;
document.getElementById("en").innerHTML = obj.en;
}
</script>
</body>
en.js
var enObj = {
theIndex: "theIndex",
everyday: "everyday",
shopping: "shopping",
traval: "traval",
eating: "eating",
selectLanguage: "selectLanguage",
zh : "Chinese",
en : "English"
}
zh.js
var zhObj = {
theIndex: "旺达",
everyday: "大连市沙河口区",
shopping: "购物",
traval: "旅行",
eating: "学习",
selectLanguage: "选择语言",
zh : "中文",
en : "英文"
}
另一种国际化 简单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="en.js"></script>
<script src="zh.js"></script>
<style>
html,
body {
overflow: hidden;
}
#myUL {
margin-top: 50px;
width: 100%;
list-style: none;
}
#myUL li {
float: left;
width: 19%;
height: 30px;
text-align: center;
border: 1px solid red;
font-size: 25px;
}
#mySel {
float: right;
margin-right: 50px;
}
</style>
</head>
<body>
<select onchange="sel(this)" name="" id="mySel">
<option></option>
<option></option>
<option></option>
</select>
<ul id="myUL">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var myULArr = document.querySelectorAll("#myUL>li");
var mySelArr = document.querySelectorAll("#mySel>option");
setThing(zhObj);
function sel(ev) {
if(ev.value == "Chinese") {
setThing(zhObj);
}
if(ev.value == "英文") {
setThing(enObj);
}
}
function setThing(obj) {
var navArr = obj.nav;
for(var i = 0; i < myULArr.length; i++) {
myULArr[i].innerHTML = navArr[i];
}
var selArr = obj.selInfo;
for(var i = 0; i < mySelArr.length; i++) {
mySelArr[i].innerHTML = selArr[i];
}
}
</script>
</body>
</html>
//未选择，在页面加载的时候执行一遍sel 方法
//var self = document.getElementById("browsers");
//self.addEventListener("change", sel(self), false);
----------en.js
var enObj = {
nav: ["HomePage",
"EveryDay",
"Shopping",
"Travel",
"Eat"
],
selInfo: [
"Select Language",
"Chinese",
"English"]
}
----------zh.js
var zhObj = {
nav: [
"首页",
"每日",
"购物",
"旅游",
"吃喝"
],
selInfo: ["选择语言",
"中文",
"英文"]
}
有关swiper动态改变数据遇到的坑（不能自动滚动，自动跟新数据，切换不正常
转载请注明原文地址: https://ju.6miu.com/read-36341.html
