tangdehang
/
android-cloud-H5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>双子星云手机33</title>
	<link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
	<link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
	<script src="../static/js/vender/jquery-3.4.1.min.js"></script>
	<script src="../static/js/vender/toastr/toastr.min.js"></script>
	<script src="../static/js/vender/config.js"></script>
	<style>
		@media screen and (max-width: 750px) {
			html {
				font-size: calc(100vw / 7.5);
			}
		}

		@media screen and (min-width: 750px) {
			html {
				font-size: calc(450px / 7.5);
			}
		}

		html, body, div, ul, li, p {
			padding: 0;
			margin: 0;
		}

		ul, li {
			list-style: none;
		}
		body{
			background-color: #190D50;
			padding-bottom: 1rem;
		}
		.container{
			width: 7.5rem;
			height: 14.82rem;
			position: relative;
		}
		.down-bg{
			width: 100%;
			height: 100%;
			position: relative;
		}
		.down-row{
			width: 6.7rem;
			height: 1rem;
			position: fixed;
			bottom: 0.2rem;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 0.24rem;
			background: linear-gradient(180deg, #251282 0%, #140463 100%);
			color: #ffffff;
			border-radius: 0.18rem;
			border: 0.02rem solid #412DA4;
			padding: 0 0.2rem;
		}
		/* .left{

		} */
		.address{
			text-align: center;
			width: 4rem;
			height: 0.6rem;
			line-height: 0.6rem;
			background-color: #ffffff;
			color: #333333;
			border-radius: 0.1rem;
			z-index: 999;
			overflow: hidden;
			padding: 0 0.08rem;
            text-overflow:ellipsis;
            white-space: nowrap;
		}
		.right-btn{
			width: 1.1rem;
			height: 0.6rem;
			line-height: 0.6rem;
			text-align: center;
			background: #6048D8;
			box-shadow: 0 0.04rem 0.12rem 0 rgba(60, 31, 201, 0.4), 0 0.02rem 0.26rem 0 rgba(255, 255, 255, 0.29);
			border-radius: 0.1rem;
			background-color: #6048D8;
		}
		.down-pic{
			width: 4.74rem;
			height: 4.74rem;
			position: absolute;
			bottom: 2.2rem;
			left: 50%;
			transform: translateX(-50%);
		}

		#toast-container>.toast-error {
			background-image: none !important;
		}

		.toast-error {
			background-color: rgba(0, 0, 0, 0.8);
		}

		#toast-container>div {
			font-size: 14px;
			min-width: 80px !important;
			padding: 12px !important;
			box-shadow: none;
		}

		#toast-container {
			min-width: 100px;
			top: 50%;
			left: 50%;
			text-align: center;
			transform: translate(-50%,-50%);
		}

		@media (max-width: 480px) and (min-width: 241px) {
		#toast-container>div {
			min-width: 80px !important;
			width: auto;
		}
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="ipt"></div>
		<img class="down-bg" src="../static/img/down-bg.png" />
		<img class="down-pic" src="../static/img/doubleElevenActivity/pic.jpg" />
		<div class="down-row">
			<div class="left">下载链接</div>
			<div class="address">http://www.androidscloud.com/suanchou</div>
			<div class="right-btn">复制</div>
		</div>
	</div>
	<script type="text/javascript">
	    let timer,flag = true;
		//点击复制按钮
		$('.right-btn')[0].addEventListener('click',copyUrl);
		//复制
		function copyUrl(){
			stopManyClick(() => {
				var oInput = document.createElement('input'); //创建一个input
				oInput.setAttribute("readonly", "readonly");//设置只读，否则移动端使用复制功能时可能会造成软件盘弹出
				oInput.value = 'http://www.androidscloud.com/suanchou';
				$('.ipt')[0].appendChild(oInput);//将input插入到body
				// oInput.select(); // 选择对象 ios不支持
				selectText(oInput, 0, oInput.value.length);
				document.execCommand("Copy"); // 执行浏览器复制命令
				toastr.error('复制当前网址成功！');
				oInput.style.display='none'; // 将input隐藏
				oInput.blur();
				oInput.remove(); // 将input销毁
			})
		}
		// input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
		// 选择文本。createTextRange(setSelectionRange)是input方法
		function selectText(textbox, startIndex, stopIndex) {
			if (textbox.createTextRange) {//ie
				const range = textbox.createTextRange();
				range.collapse(true);
				range.moveStart('character', startIndex);//起始光标
				range.moveEnd('character', stopIndex - startIndex);//结束光标
				range.select();//不兼容苹果
			} else {//firefox/chrome
				textbox.setSelectionRange(startIndex, stopIndex);
				textbox.focus();
			}
		}
		//防止提示一秒内重复显示
		function stopManyClick(fn) {
		if (flag) {
				fn();
			}
			flag = false;
			if(timer){clearTimeout(timer);}
			timer = setTimeout(() => {flag = true}, 1500);
		}
	</script>
</body>

</html>