常见问题
H5
1.安卓手机道聚城APP打开会出现这种情况，其它都是正常的
select{background-color: transparent;background: url(.....)no-repeat -0.14rem -14.76rem !important;}
附加：取消小三角
select{appearance: none;}
2.手机端页面去除a标签点击时的蓝色边框
a {border: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline: none;}
/* 去除页面蓝色边框 */
* {
outline: none;
webkit-focus-ring-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
3.横屏适配ipad
(function (win, doc) {
if (!win.addEventListener) return;
var html = document.documentElement;
function setFont() {
function setRem() {
var ua = navigator.userAgent.toLowerCase();
var is_iPad = ua.match(/(ipad)/i) != null;
var cliWidth = html.clientHeight;
var w = document.documentElement.clientWidth, h = document.documentElement.clientHeight;
if (is_iPad) {
var cliWidth = html.clientHeight / 4 * 2.6;
}
var val = 750;
html.style.fontSize = 100 * (cliWidth / val) + 'px';
}
setRem();
setTimeout(function () {
setRem();
}, 300);
}
doc.addEventListener('DOMContentLoaded', setFont, false);
win.addEventListener('resize', setFont, false);
win.addEventListener('load', setFont, false);
setFont();
})(window, document);
4.横屏页面 竖屏状态下旋转90°
<script>
//屏幕适应
var screenState = 'portrait';
var defaultFontSize = 0;
(function(win, doc) {
function setDefaultFontSize() {
var d = window.document.createElement('div')
d.style.width = '1rem'
d.style.display = "none"
var head = window.document.getElementsByTagName('head')[0]
head.appendChild(d)
defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'))
}
function setFont() {
var rem2px = 100;
if (document.documentElement.clientWidth < document.documentElement.clientHeight) {
screenState = 'portrait'
} else {
screenState = 'landscape'
}
var designWidth = screenState == 'portrait' ? 750 : 1334;
document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
setTimeout(function() {
setFont()
}, 500)
}
setDefaultFontSize()
setFont()
if (!win.addEventListener) return;
win.addEventListener('resize', setFont, false)
})(window, document)
</script>
<script>
//放在jq、zepto下面
var Util = {
getHeight: function() {
return document.documentElement.clientHeight;
},
getWidth: function() {
return document.documentElement.clientWidth;
}
};
function resizeBody() {
var w = Util.getWidth(),
h = Util.getHeight();
if (w < h) {
document.body.setAttribute('style', 'transform: rotate(90deg) translate3d(' + ((h - w) / 2) + 'px,' + ((h - w) / 2) + 'px,0);' +
'-webkit-transform: rotate(90deg) translate3d(' + ((h - w) / 2) + 'px,' + ((h - w) / 2) + 'px,0);' +
'width:' + h + 'px;' + 'height:' + w + 'px;');
$('.wrap').addClass('no')
} else {
document.body.setAttribute('style', 'transform: none;' + '-webkit-transform:none;' + 'width:' + w + 'px;' + 'height:' + h + 'px;');
$('.wrap').removeClass('no')
}
}
function resize() {
var me = this;
window.onresize = function() {
me.resizeBody();
};
}
resizeBody()
resize()
</script>
5.横竖屏自动切换适配
<script>
function AutoPage(){
var PortOrLand=0;
var mbody=document.body||document.getElementsByTagName('body');
var p = window.matchMedia("(orientation: portrait)");
var l = window.matchMedia("(orientation: landscape)");
if(p.matches||(window.orientation == 0 || window.orientation == 180)){
PortOrLand=750;
mbody.className='portrait'
}else if(l.matches||(window.orientation == 90 || window.orientation == -90)){
PortOrLand=1334;
mbody.className='landscape'
};
document.documentElement.style.fontSize = document.documentElement.clientWidth * 100 / PortOrLand + 'px';
};
AutoPage();
window.addEventListener('resize',AutoPage,false);
window.addEventListener('load',AutoPage,false);
</script>
<style>
/*********************竖版********************/
.portrait header{}
/*********************横版********************/
.landscape header{}
</style>
js/jq
1.切换tab
function tab(a,b,c,x,y,z){
$(a).on("click", function () {
if ($(a).hasClass("act")) {
return;
}
$(a).addClass('act');
$(b).removeClass('act');
$(c).removeClass('act');
$(x).show();
$(y).hide();
$(z).hide();
})}
tab('.p2tab1','.p2tab2','.p2tab3','.p2box1','.p2box2','.p2box3')
$(".p1tabbox a").on("click",function(){
if($(this).hasClass("act")){
return;
}
$(".p1tabbox a").removeClass('act');
$(this).addClass('act');
$('.p1switch1').hide();
$('.p1switch1').eq($(this).index()).show();
})
2.选择效果
$(".pop1-ul li").on("click", function () {
// 多选
if ($(this).hasClass("act")) {
$(this).children('div').removeClass('act');
$(this).children('em').removeClass('act');
$(this).removeClass('act');
return;
}
$(this).children('div').addClass('act');
$(this).children('em').addClass('act');
$(this).addClass('act');
// 单选
// if ($(this).hasClass("act")) {
// return;
// }
// $(".pop1-ul li").removeClass('act');
// $(".pop1-ul li").children('div').removeClass('act');
// $(".pop1-ul li").children('em').removeClass('act');
// $(this).children('div').addClass('act');
// $(this).children('em').addClass('act');
// $(this).addClass('act');
})
3.倒计时
// 倒计时 s
function charLeftAll(n) {
if (n < 10)
return "0" + n;
else
return n;
}
var starttime = new Date("2022/03/27/19:00:00");
function djs() {
var nowtime = new Date();
var time = starttime - nowtime;
var day = parseInt(time / 1000 / 60 / 60 / 24);
var hour = parseInt(time / 1000 / 60 / 60 % 24);
var minute = parseInt(time / 1000 / 60 % 60);
var seconds = parseInt(time / 1000 % 60);
$('.switchbox1-time').html(charLeftAll(day) + " : " + charLeftAll(hour) + " : " + charLeftAll(minute) + " : " + charLeftAll(seconds));
}
djs();
setInterval("djs()", 1000);
// 倒计时 e
4.验证码倒计时
<input class="pop8yzm sp" type="button" value="获取验证码" onclick="settime(this)" />
<script>
// 验证码倒计时
var countdown=60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="获取验证码";
countdown = 60;
return false;
} else {
val.setAttribute("disabled", true);
val.value= countdown + "s";
countdown--;
}
setTimeout(function() {
settime(val);
},1000);
}
</script>
5.返回顶部
setTimeout(function(){$(window).scrollTop(0)},10);
6.判断链接是否从微信或QQ中打开
//是否微信中打开
let is_weixin = (function () {
let ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
})();
//是否QQ中打开：
let is_qq = (function () {
let sUserAgent = navigator.userAgent.toLowerCase();
if (sUserAgent.match(/QQ/i) == 'qq') {
return true
} else {
return false
}
})();
7. js动态引入css
方法1：
//加载外部css文件
function loadCss(url) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type='text/css';
link.rel = 'stylesheet';
link.media = "print";//打印的css(显示于屏幕的css---->media="screen")
link.href = url;//文件的真实路径(eg:link.href = "css/A4print.css"; )
head.appendChild(link);
}
loadCss('123.css')
方法2：
document.write('<link rel="stylesheet" href="main.css">');
8.横屏弹窗错位
.pop{transform: translate(-50%,-50%); margin-top: 0 !important; margin-left: 0 !important;}
9.h5解决ios默认视频组件
<video class="video" id="fcvideo" src="./ossweb-img/video.mp4" x5-playsinline webkit-playsinline="true" playsinline="true"></video>
x5-playsinline webkit-playsinline="true" playsinline="true"
10.判断横竖屏切换
var mql = window.matchMedia('(orientation: portrait)');
console.log(mql);
function onMatchMediaChange(mql){
if(mql.matches){
//竖屏
console.log('此时竖屏')
}else{
//横屏
console.log('此时横屏')
}
}
// 输出当前屏幕模式
onMatchMediaChange(mql);
// 监听屏幕模式变化
mql.addListener(onMatchMediaChange);
11.文字描边
/* 文字描边 */
.tsd{text-shadow: 0.02rem 0.02rem #3e150d,0.02rem -0.02rem #3e150d,-0.02rem 0.02rem #3e150d,-0.02rem -0.02rem #3e150d,0 0 0.02rem #3e150d,0 0.04rem #3e150d;}
12.加载动画效果
https://speedm.qq.com/cp/a0706gongceyear2m/
<style>
.dh_box.move{-webkit-animation:fadeInUp 1s .6s ease both;-moz-animation:fadeInUp 1s .6s ease both;}
</style>
<div class=" dh_box"></div>
<script>
$(document).ready(function(){
var a,b,c;
a=$(window).height();
$(window).scroll(function(){
var b=$(this).scrollTop();
$(".dh_box").each(function(){
c=$(this).offset().top;
if(a+b>c){
$(this).addClass("move");
}
else{
$(this).removeClass("move");
}
});
});
});
</script>
PC
1.头图动画
<style>
.head-video1{position: absolute;top: 0px;left: 50%;margin-left: -960px;width: 1920px;height: 1162px;}
.head-video2{position: absolute;top: 0px;left: 50%;margin-left: -960px;width: 1920px;height: 1162px;display: none;}
</style>
<div class="head pr">
<h1 class="hide">.......</h1>
<video class="head-video1" muted autoplay src="./ossweb-img/head-video1.mp4"></video>
<video class="head-video2" muted autoplay loop src="./ossweb-img/head-video2.mp4"></video>
</div>
<script>
// 头图动画
setTimeout(function(){
$(".head-video1").hide()
$(".head-video2").show()
// $(".head-video2").attr("loop","true")
},2000);
</script>
2.滚动条样式
.pop3scroll{width: 910px;height: 550px; margin: 0 auto 0;overflow-y: scroll;overflow-x: hidden;}
.pop3scroll::-webkit-scrollbar{ width: 5px; background-color: #4d7fd6; }
.pop3scroll::-webkit-scrollbar-track{ background-color: #4d7fd6; }
.pop3scroll::-webkit-scrollbar-thumb{ background-color: #fff; }
3. GIF图切换
// gif图切换 s
var timer ='';
var i = 1;
$('.gif1').attr('src','//game.gtimg.cn/images/nz/cp/a20220711sale/gif1-'+i+'.gif');
timer = setInterval(function (){
i++
$('.gif1').attr('src','//game.gtimg.cn/images/nz/cp/a20220711sale/gif1-'+i+'.gif')
if(i>1){
i = 0 ;
}
},5600);
// gif图切换 e
4.双端跳转
pc双端跳转：
<script>
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href = "https://nz.qq.com/cp/a20220218yungame/index.html" + window.location.search;
}
</script>
h5双端跳转：
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href = "PC端专题地址"+location.search;
}
5.锚点跳转滑动效果
//锚点跳转滑动效果
$('a[href*=#],area[href*=#]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
6.根据时间改变图片
window.οnlοad=function tab(){
var oDate1 = new Date();
var oDate2 = new Date('2017-10-20');
var oDate3 = new Date('2017-10-25');
var oDate4 = new Date('2017-11-06');
var oDate5 = new Date('2017-11-08');
var oDate6 = new Date('2017-11-24');
if(oDate1.getTime() >= oDate2.getTime()){
console.log('1');
$('#activity_img').attr('src','/Public/Home/image/app/hd1.png');
}
if(oDate1.getTime() >= oDate3.getTime()){
console.log('2');
$('#activity_img').attr('src','/Public/Home/image/app/hd2.png');
}
if(oDate1.getTime() >= oDate4.getTime()){
console.log('3');
$('#activity_img').attr('src','/Public/Home/image/app/hd3.png');
}
if(oDate1.getTime() >= oDate5.getTime()){
console.log('4');
$('#activity_img').attr('src','/Public/Home/image/app/hd4.png');
}
if(oDate1.getTime() >= oDate6.getTime()){
console.log('5');
$('#activity_img').attr('src','/Public/Home/image/app/hd5.png');
}
}
轮播图
1.轮播失效
var mySwiper = new Swiper('.swiper',{
observer:true,
observeParents:true,
})
2.自动轮播失效
var swiper1 = new Swiper('.swiper-container', {
autoplay: {
delay: 3000,
disableOnInteraction: false,
}
});
3. swiper 内置滚动条回到顶部
$(".xxx .swiper-wrapper").css({
"transition-duration":" 0ms",
"transform": "translate3d(0px, 0px, 0px)"
})
4.隐藏swiper
.visibility{visibility: hidden;position: absolute;z-index: -1;}
小程序
1. tab
<!--pages/index/page1.wxml-->
<view class="swiper-tab">
<view class="swiper-tab-item item1 {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">兑换商城</view>
<view class="swiper-tab-item item2 {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">抽奖商城</view>
</view>
<!-- tabbox1 -->
<view class = "{{currentTab == 0 ? 'show':'hidden'}}" >
currentTab == 0
</view>
<!-- tabbox2 -->
<view class = "{{currentTab == 1 ? 'show':'hidden'}}" >
currentTab == 1
</view>
data: {
currentTab: 0
},
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current,
})
}
},
2.返回顶部
//返回顶部
goScrolltop:function(e){
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
},
vue
1.引用
<template>
<div class="wrap">
<test />
</div>
</template>
<script>
import test from "./test.vue"
export default {
components:{
test,
}
};
</script>
<style>
</style>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
