原生H5 520兴趣项目演示

最新推荐文章于 2023-12-19 12:18:34 发布

wflynn

最新推荐文章于 2023-12-19 12:18:34 发布

阅读量327

点赞数

分类专栏： html

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/106186135

版权

html 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

代码已上传至github
github代码地址：https://github.com/Miofly/mio.git

移动端适配

<!DOCTYPE html>
<html lang="en" style="overflow: hidden!important;">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<meta http-equiv=X-UA-Compatible content="ie=edge">
	<meta name=apple-mobile-web-app-capable content=yes>
	<meta name=apple-touch-fullscreen content=yes>
	<meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
	<meta name=format-detection content="telephone=no">
	<meta name=format-detection content="email=no">
	<meta name=renderer content=webkit>
	<meta name=screen-orientation content=portrait>
	<meta name=x5-orientation content=portrait>
	<meta name=x5-fullscreen content=true>
	<meta name=full-screen content=yes>
	<meta name=keywords content="">
	<meta name=description content="">
	<meta http-equiv=Content-Type content="text/html; charset=utf-8">
	<title>Title</title>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<script type="text/javascript" src="../../js/common/vue.js"></script>
	<script type="text/javascript" src="../../js/common/jquery-1.7.2.min.js"></script>
	<script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 375) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
                    }
                    var html = document.getElementsByTagName('html')[0];
                    var settedFs = settingFs = parseInt(100 * (clientWidth / 375));
                    var whileCount = 0;
                    while (true) {
                        var realFs = parseInt(window.getComputedStyle(html).fontSize);
                        var delta = realFs - settedFs;
                        //不相等
                        if (Math.abs(delta) >= 1) {
                            if (delta > 0)
                                settingFs--;
                            else
                                settingFs++;
                            html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
                        } else
                            break;
                        if (whileCount++ > 100)
                            break
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
	</script>
	<style>
		@keyframes scale-up {
			0% {
				transform: scale(1)
			}
			100% {
				transform: scale(1.1)
			}
		}
	</style>
</head>

html

<body style="font-size: 0.05rem;background: rgb(248, 236, 233);overflow: hidden!important;">
<div id="app" style="height: 100%">
	<div v-if="status">
		<div>
			<img :src="bgImg" style="width: 100%;position: fixed;top: 0.05rem;left: 0;text-align: center">
		</div>
		<div @click="status = false" style="animation: scale-up 1s linear 0s infinite alternate;position: fixed;left: 0;bottom: 0.5rem;width: 100%;text-align: center">
			<img :src="main" style="width: 2.06rem;height: 0.68rem">
		</div>
	</div>

	<div v-if="!status" style="height: 100%">
		<div style="width: 100%;text-align: center">
			<img :src="avatar" style="width: 1.24rem;height: 1.24rem">
		</div>

		<div style="width: 100%;text-align: center">
			<span style="width:2.37rem;height:0.28rem;font-size:0.20rem;font-weight:500;color:rgba(0,0,0,1);">请选择你的1-6个出租项目</span>
			<img @click="random" :src="sjImg" style="width: 0.66rem;height: 0.28rem;margin-left: 0.1rem;margin-top: -0.06rem;">
		</div>

		<div style="margin-top: 0.18rem;height: 63%;overflow-y: scroll;overflow-x: hidden">
			<div @click="choiceBtn(index)" style="position: relative;float: left;margin-left: 0.08rem;margin-top: 0.18rem;" v-for="(item, index) in lists" :key="index">
				<img :src="bgIndex.includes(index) ? '../../img/love/Button1@2x.png' : '../../img/love/Button2@2x.png'" style="width: 1.13rem;height: 0.48rem;">
				<span style="position: absolute;top: 0.1rem;width:0.96rem;height:0.22rem;font-size:0.16rem;font-weight:600;"
					  :style="{color: bgIndex.includes(index) ? 'white' : '#DD3333', left: item.name.length == 7 ? '0.12rem' : item.name.length == 3 ?
					  '0.32rem' : item.name.length >= 5 ? '0.18rem' : '0.24rem'}"
				>{{item.name}}</span>
			</div>
			<div style="position: fixed; bottom: 0rem;left: 0;width: 100%;text-align: center">
				<img :src="scPoster" style="width: 2.06rem;height: 0.68rem" @click="chosen"></img>
			</div>
		</div>

		<div v-if="modalStatus" style="position: fixed;top: 45%;width: 80%;left: 10%;background: white;border: 2px solid red;border-radius: 0.1rem;text-align: center;padding: 0.35rem 0;font-size: 0.2rem;font-weight: 600;">
			{{ts}}
		</div>
	</div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                bgIndex: [],
                status: true,
                modalStatus: false,
				scPoster: '../../img/love/secondary@2x.png',
                sjImg: '../../img/love/Refresh@2x.png',
                avatar: '../../img/love/portrait@2x.png',
                bgImg: '../../img/love/background@2x.png',
                main: '../../img/love/main@2x.png',
                colorBtn: '../../img/love/Button2@2x.png',
                blackBtn: '../../img/love/Button1@2x.png',
				ts: '最多选择6个项目哟！',
                lists: [
                    {id: 1, name: '陪过夜'},
                    {id: 2, name: '陪逛街'},
                    {id: 3, name: '干农活'},
                    {id: 4, name: '抱抱你'},
                    {id: 5, name: '叫你起床'},
                    {id: 6, name: '冒充男朋友'},
                    {id: 7, name: '冒充女朋友'},
                    {id: 8, name: '陪你打游戏'},
                    {id: 9, name: '吃好吃的'},
                    {id: 10, name: '哄你睡觉觉'},
                    {id: 11, name: '牵牵小手'},
                    {id: 12, name: '说情话撩你'},
                    {id: 13, name: '逗你开心'},
                    {id: 14, name: '帮你洗衣服'},
                    {id: 15, name: '给你做饭'},
                    {id: 16, name: '帮你写论文'},
                    {id: 17, name: '帮你带娃'},
                    {id: 18, name: '代打前任'},
                    {id: 19, name: '陪你唱歌'},
                    {id: 20, name: '跟你撒娇'},
                    {id: 21, name: '共进晚餐'},
                ]
            }
        },
        methods: {
            choiceBtn(index) {

                if (!this.bgIndex.includes(index)) {
                    if (this.bgIndex.length >= 6) {
                        this.ts = '最多选择6个项目哟！'
                        this.modalStatus = true
                        setTimeout(() => {
                            this.modalStatus = false
                        }, 1000)
                        return;
                    } else {
                        this.bgIndex.push(index) // 不存在添加
                    }
                } else {
                    this.bgIndex.indexOf(index) // 存在删除
					console.log(this.bgIndex.indexOf(index))
					this.bgIndex.splice(this.bgIndex.indexOf(index), 1)
				}
            },
            chosen() {
                if (this.bgIndex == 0) {
                    this.ts = '请选择您的出租项目~'
                    this.modalStatus = true
                    setTimeout(() => {
                        this.modalStatus = false
                    }, 1000)
					return
                }
				var arr = ''
                for (let i = 0; i < this.bgIndex.length; i++) {
					arr = arr + this.lists[this.bgIndex[i]].name + 'AAAA'
                }
                window.location.href = `http://192.168.3.193:8888/mio/src/html/project/love/share.html?arr=${arr}&num=${this.bgIndex.length}`

            },
            random() {
                this.bgIndex = []
                var arr = this.makeRandomArr(this.lists, 6)
                for (let i = 0; i < arr.length; i++) {
					this.bgIndex.push(arr[i].id)
                }
            },
            makeRandomArr(arrList, num) { // 随机取出数组元素
                if (num > arrList.length) {
                    num = arrList.length
                }
                const tempArr = arrList.slice(0)
                const newArrList = []
                for (var i = 0; i < num; i++) {
                    const random = Math.floor(Math.random() * (tempArr.length - 1))
                    const arr = tempArr[random]
                    tempArr.splice(random, 1)
                    newArrList.push(arr)
                }
                return newArrList
            },
        },
    })
</script>
</body>
</html>

wflynn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生H5 520兴趣项目演示

代码已上传至githubgithub代码地址：https://github.com/Miofly/mio.git移动端适配<!DOCTYPE html><html lang="en" style="overflow: hidden!important;"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-s
复制链接

扫一扫