HTML5 localStorage图书阅读器实例

<!DOCTYPE html>
<html>
	<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">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				font-size: 625%;
			}
			header{
				position: fixed;
				left: 0;
				top: 0;
				 100%;
				height: 60px;
				background: rgba(0,0,0,0.5);
				display: -webkit-box;
				
			}
			header .refresh{
				-webkit-box-flex: 15;
				background: url(img/icon1.png) no-repeat center center;
				background-size: 50% auto;
			}
			header .border{
				-webkit-box-flex: 55;
				border-left: 1px solid black;
				border-right: 1px solid black;
			}
			header .mark{
				-webkit-box-flex: 15;
				background: url(img/icon2.png) no-repeat center center;
				background-size: 50% auto;
			}
			header .search{
				-webkit-box-flex: 15;
				background: url(img/icon3.png) no-repeat center center;
				background-size: 50% auto;
			}
			h1{
				font-size:0.5rem;
			}
			article{
				font-size:0.4rem;
			}
			footer{
				 100%;
				height: 60px;
				position: fixed;
				left: 0;
				bottom: 0;
				background: rgba(0,0,0,0.5);
				display: -webkit-box;
			}
			footer div{
				 0;
				-webkit-box-flex: 1;
				border-right: 1px solid black;
				height: 100%;
			}
			footer div .icon{
				 100%;
				height: 60%;
			}
			footer div p{
				height: 30%;
				text-align: center;
				font-size: 0.3rem;
				color: white;
			}
			footer .downUp .icon{
				background: url(img/icon4.png) no-repeat center center;
				background-size: 40% auto;
			}
			footer .progress .icon{
				background: url(img/icon5.png) no-repeat center center;
				background-size: 40% auto;
			}
			footer .font .icon{
				background:url(img/icon6.png) no-repeat center center;
				background-size:40% auto;
			}
			footer .bgc .icon{
				background: url(img/icon7.png) no-repeat center center;
				background-size: 40% auto;
			}
			
			footer .bgc{
				border-right: none;
			}
			footer .font{
				position: relative;
			}
			footer .font .control{
				display: none;
				 400%;
				height: 30px;
				background: rgba(0,0,0,0.5);
				position: absolute;
				left: -200%;
				top: -30px;
				font-size: 0.24rem;
				color: white;
				overflow: hidden;
			}
			footer .font .control input{
				float: left;
				 60%;
				height: 100%;
			}
			footer .font .control span{
				float: left;
				display: block;
				 10%;
				height: 100%;
				line-height: 30px;
				text-align:center;
			}
			footer .font .control i{
				float:left;
				display: block;
				font-style:normal;
				15%;
				height:100%;
				line-height:30px;
				text-align:center;
				
			}
		</style>
		
	</head>
	<body>
		<header>
			<div class="refresh"></div>
			<div class="border"></div>
			<div class="mark"></div>
			<div class="search"></div>
		</header>
		
		<section>
			<h1>多省养老保险等缴费比例将降 企业减负1000多亿</h1>
			<article>
				国务院总理李克强4 月13日主持召开国务院常务会议,听取山东济南非法经营疫苗系列案件调查处理情况汇报,决定先行对一批责任人实施问责;通过《国务院关于修改〈疫苗流通和 预防接种管理条例〉的决定》,强化制度监管;决定阶段性降低企业社保缴费费率和住房公积金缴存比例,为市场主体减负、增加职工现金收入。

  会议指出,疫苗质量 安全事关人民群众尤其是少年儿童生命健康,是不可触碰的“红线”。我国的疫苗体系总体是安全可靠的,凡发现漏洞,必须坚决堵住。山东济南非法经营疫苗系列 案件发生后,国务院批准组成部门联合调查组,并成立国务院工作督查组,深入开展实地调查,推进全国协查联办,加大案件查办督促指导力度,组织对查扣疫苗开 展安全性有效性评估。目前第一阶段调查处理工作基本完成。初步查明,此次疫苗系列案件涉及面广,性质恶劣,是严重违法犯罪行为,也暴露出疫苗质量监管和使 用管理不到位、对非法经营行为发现和查处不及时、一些干部不作为、监管和风险应对机制不完善等突出问题,教训深刻。会议要求抓紧完成对涉案疫苗接种人群的 风险评估,及时向社会公开评估结果,妥善做好后续处置,并加快完善食品药品监管体制和疫苗管理长效机制,强化事中事后监管,对危害群众生命健康的违法违规 行为绝不姑息。目前各地已立案刑事案件192起,刑事拘留202人。根据已查明情况,会议决定,依法依纪对食品药品监管总局、卫生计生委和山东等17个省 (区、市)相关责任人予以问责,有关方面先行对357名公职人员等予以撤职、降级等处分。下一步还要坚决依法严惩违法犯罪和失职渎职行为,并根据案件查处 情况,提出进一步问责处理意见。

  会议强调要立足标本 兼治、强化制度监管,通过了《国务院关于修改〈疫苗流通和预防接种管理条例〉的决定》,明确一要严格疫苗流通管理,将自愿接种的第二类疫苗比照国家免疫规 划用的第一类疫苗,全部纳入省级公共资源交易平台集中采购,不再允许药品批发企业经营疫苗,坚决制止通过借用资质和票据进行非法经营的“挂靠走票”等行 为。二要建立疫苗从生产到使用的全程追溯制度,强化储存、运输冷链要求,增设疾控机构、接种单位在接收环节索要温度监测记录的义务。三要加大处罚及问责力 度,对非法购销、未按规定储运疫苗等违法行为提高罚款金额,增设对责任人员的禁业处罚,并严格属地监管职责,增加地方政府及监管部门主要负责人引咎辞职的 规定。《决定》还完善了预防接种异常反应补偿制度等内容。
			</article>
		</section>
		<footer>
			<div class="downUp">
				<div class="icon"></div>
				<p>横屏</p>
			</div>
			<div class="progress">
				<div class="icon"></div>
				<p>进度</p>
			</div>
			<div class="font">
				<div class="icon"></div>
				<p>字体</p>
				<div class="control">
					<input type="range" value="30" step="2" min="20" max="50"/>
					<span>30</span>
					<i>确认</i>
					<i>取消</i>
				</div>
			</div>
			<div class="bgc">
				<div class="icon"></div>
				<p>阅读背景</p>
			</div>
		</footer>
		
		<script>
			window.onload = function(){
				var oHtml = document.getElementsByTagName('html')[0];
				var screenWidth = document.documentElement.offsetWidth || document.body.offsetWidth;
				
				var header = document.getElementsByTagName('header')[0];
				var footer = document.getElementsByTagName('footer')[0];
				var nowHei = (screenWidth/640)*100;
				var nowFont = (screenWidth/640)*625;
				header.style.height = nowHei + "px";
				footer.style.height = nowHei +"px";
				oHtml.style.fontSize = nowFont + "%";
				
				setFont();
			}
			
			function setFont(){
				var oFont = document.getElementsByClassName('font')[0];
				var fontControl = oFont.getElementsByClassName('control')[0];
				var fontRan = fontControl.getElementsByTagName("input")[0];
				var oH1 =document.getElementsByTagName('h1')[0];
				var oArticle = document.getElementsByTagName('article')[0];
				var fontVal = fontControl.getElementsByTagName("span")[0];
				var sure = fontControl.getElementsByTagName("i")[0];
				var cancel = fontControl.getElementsByTagName('i')[1];
				
				if(!localStorage.getItem("fontSize")){
					localStorage.setItem("fontSize",30);
				}
				
				oH1.style.fontSize =(5*localStorage.getItem("fontSize"))/300 +"rem";
				oArticle.style.fontSize = localStorage.getItem('fontSize')/100 +"rem";
				fontRan.value = localStorage.getItem("fontSize");
				fontVal.innerHTML = localStorage.getItem('fontSize');
				
				
				oFont.flag = true;
				oFont.onclick = function(){
					if(oFont.flag){
						fontControl.style.display = "block";
						oFont.flag = false;
					}else{
						fontControl.style.display = "";
						oFont.flag = true;
					}
				}
				fontControl.onclick = function(e){
					var e = e || window.event;
					e.stopPropagation();
				}
				fontRan.onchange = function(){
					oH1.style.fontSize = (5*this.value)/300 +"rem";
					oArticle.style.fontSize = this.value/100 +"rem";
					showFont();
				}
				function showFont(){
					fontVal.innerHTML = fontRan.value;
				}
				
				sure.onclick = function(){
					localStorage.setItem('fontSize',fontRan.value);
					fontControl.style.display = "";
					oFont.flag = true;
					
				}
				
				cancel.onclick = function(){
					var nowFont = localStorage.getItem("fontSize");
					console.log(nowFont);
					fontControl.style.display  = "";
					oFont.flag = true;
					oH1.style.fontSize = (5*nowFont)/300 + "rem";
					oArticle.style.fontSize = nowFont/100 + "rem";
					fontRan.value = nowFont;
					fontVal.innerHTML = nowFont;
				}
				
			}
		</script>
	</body>
</html>

  

原文地址:https://www.cnblogs.com/mingjixiaohui/p/5396977.html