一个简单移动页面ionic打包成app

先贴JS代码好了，缓动和调整透明度的功能,最后用ionic打包成应用就可以

window.οnlοad=function(){
search();
move();
calc();
}
function search(){

}
}

var rotateScreen=document.getElementById("screen");
var page=document.getElementById("page1_container")
var width=rotateScreen.offsetWidth;
console.log(width);
var width1=400;
var trigger=document.getElementById("trigger");
var triggerBack=document.getElementById("triggerBack");

trigger.οnclick=function(){
animation(page,-width);
}
triggerBack.οnclick=function(){
animation(page,0);
}

}

function calc(){
var results="";

var calresults="";
var lastkey="";
var results2="";
var flg=1;
var re1=/^[\*|\/].+/;
var re2=/.+[\*|\/]$/;
var re3=/(\+|-|\*|\/)/;

var calculator=document.getElementById("calculater");
var equality=document.getElementById("equality");
// calculator.οnclick=calculator;
// equality.οnclick=resultscalculate;

calculator.οnclick=function() {

// 点击=触发的calculater()函数得不到结果

if(event.srcElement.innerText=="="){
return;
}

// .c键的清除功能
if(event.srcElement.innerText=="c"){
results="";
display.innerText="0";
return;
}

//点击显示框时使触发的calculator函数得不到结果
if(event.srcElement.id=="display"){
return;
}

//显示框第一个元素为运算符显示输入错误，result清空

if(results.match(re1)){
results="";
display.innerText="wrong !";
return;
}

//显示框末位不能出现两个运算符
if(lastkey.match(re3)&&event.srcElement.innerText.match(re3)){
return;
}

//若结果后输入运算符继续运算
if(lastkey=="="&&event.srcElement.innerText.match(re3)){
results=calresults;
}

//取反功能
if (event.srcElement.innerText=="+/-"&&results!="") {
if (flg==-1) {
results=String(results2);
display.innerText=results;
flg=-flg;
return;
}
results2=results;
results = "-"+"("+results+")";
flg=-flg;
display.innerText=results;
return;
}
results+=event.srcElement.innerText;
lastkey=event.srcElement.innerText;
display.innerText=results;

}

equality.οnclick=function(){
if (results.match(re1)||results.match(re2)) {
display.innerText="输入错误";
results="";
return;
}

calresults=eval(results);
display.innerText=calresults;
lastkey="=";
results="";
}

}

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
-webkit-box-sizing:border-box;
}

</style>
</head>
<body id="hw">
<div id="screen">
<div id="page1_container">

<div class="hw_layout">

<header class="hw_header clearfix">
<div class="hw_header_box">
<a href="#" class="icon_logo">
<img src="img/firstPage/logo.png" alt="" />
</a>
<ul>
<li id="trigger"></li>
<li id="triggerBack"></li>
</ul>
</div>
</header>


<div class="img_content">
<div class="img_content_img img1">
<a href="#">
<img src="img/firstPage/mate9_bg_cn.jpg" alt="" />
</a>
</div>
<div class="img_content_des" id="page1_des1">
<h2>HUAWEI Mate9</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>


<div class="img_content">
<div class="img_content_img img2">
<a href="#">
<img src="img/firstPage/048A49506781.jpg" alt="" />
</a>
</div>
<div class="img_content_des" id="page1_des1">
<h2>PANIC DOESN'T HELP</h2>
<p>Do not go gentle into that good night.
Rage, rage against the dying of the light</p>
</div>
</div>


<div class="img_content">
<div class="img_content_img img3">
<a href="#">
<img src="img/firstPage/intersteller.jpg" alt="" />
</a>
</div>
<div class="img_content_des">
<h2>PANIC DOESN'T HELP</h2>
<p>Do not go gentle into that good night.
Rage, rage against the dying of the light</p>
</div>
</div>


<div class="img_content">
<div class="img_content_img img4">
<a href="#">
<img src="img/firstPage/mbb2020.jpg" alt="" />
</a>
</div>
<div class="img_content_des">
<h2>PANIC DOESN'T HELP</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>



<div class="img_content">
<div class="img_content_img img5">
<a href="#">
<img src="img/firstPage/winwin26.jpg" alt="" />
</a>
</div>
<div class="img_content_des">
<h2>数字化转型，知行均不易</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>

<div class="img_content">
<div class="img_content_img img6">
<a href="#">
<img src="img/firstPage/power-ict-in-a-smart-way.jpg" alt="" />
</a>
</div>
<div class="img_content_des">
<h2>数字化转型，知行均不易</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>


<div class="img_content">
<div class="img_content_img img7">
<a href="#">
<img src="img/firstPage/hw1_index_video2.jpg" alt="" />
</a>
</div>
<div class="img_content_des">
<h2>数字化转型，知行均不易</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>


<div class="img_content">
<div id="page1_news">
<a href="#">
<p>新闻</p>
</a>
<a href="#">
<p>HUAWEI Mate9 一不小心就被卖了</p>
</a>
<a href="#">
<p>见到风就是雨</p>
</a>
<a href="#">
<p>总想搞个大新闻</p>
</a>

</div>

</div>


<div class="img_content">

<div class="img_content_img img8">
<h2>NAIVE展会活动</h2>
<a href="#">
<img src="img/firstPage/mbbf.jpg" alt="" />
</a>
</div>
<div class="img_content_des">
<h2>展会活动</h2>
<p>苟利国家生死以，岂因祸福避趋之</p>
</div>
</div>


<div class="img_content">
<div class="img_content_img img7">
<a href="#">
<img src="img/firstPage/hid16cn.jpg" alt="" />
</a>
</div>
<div class="img_content_des">
<h2>数字化转型，知行均不易</h2>
<p>In persuit of knowledge,something is aquired.In persuit of wisdom,something is dropped</p>
</div>
</div>


<div class="img_content">
<div class="bottom_ul_container">
<ul>
<li>
<p>按访问者</p>
<span>></span>
</li>
<li>
<p>关于我们</p>
<span>></span>
</li>
<li>
<p>新闻展会</p>
<span>></span>
</li>
<li>
<p>快速链接</p>
<span>></span>
</li>
<li>
<p>行业洞察</p>
<span>></span>
</li>

</ul>
</div>
<div class="img_content_des" id="page1_desBottom">
<h2>关注我们</h2>
<div>
<ul>
<li> <a href="#"></a> </li>
<li> <a href="#"></a> </li>
</ul>
</div>
</div>
<div class="page1_bottom">
<ul>
<li>联系我们</li>
<li>|</li>
<li>也要按照基本法</li>
<li>|</li>
<li>谈笑风声</li>
</ul>
</div>
</div>

</div>


<div class="page1_hide">
<div class="calcContainer">
<table id="calculater">
<tr>
<td id="display" colspan="5">0</td>
</tr>
<tr>
<td class="numberkey" >1</td>
<td class="numberkey" >2</td>
<td class="numberkey" >3</td>
<td class="numberkey" >+</td>
<td class="numberkey" id="deletesign">c</td>
</tr>
<tr>
<td class="numberkey" >4</td>
<td class="numberkey" >5</td>
<td class="numberkey" >6</td>
<td class="numberkey" >-</td>
<td rowspan="3" id="equality">=</td>
</tr>
<tr>
<td class="numberkey" >7</td>
<td class="numberkey" >8</td>
<td class="numberkey" >9</td>
<td class="numberkey" >*</td>
</tr>
<tr >
<td class="numberkey" >+/-</td>
<td class="numberkey" >0</td>
<td class="numberkey" >.</td>
<td class="numberkey" >/</td>
</tr>
</table>
</div>
</div>

</div>
</div>
<script type="text/javascript" src="js/index.js">

</script>
</body>
</html>

CSS:

body{
background: #f5f5f5;
}
#screen{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
min-width: 320px;
max-width:640px;
margin: 0 auto;
}
#page1_container{
position: relative;
left: 0%;
margin:0 auto;
width: 200%;

/*overflow: hidden;*/
}
.hw_layout{
margin:0 auto;
width: 50%;
height: 100%;
min-width: 320px;
max-width:640px;
float: left;
}
/*SEARCH BAR BEGINS*/
.hw_header{
position: fixed;
top:0;
left:0;
width: 100%;
height: 60px;
z-index:10;
border: 1px solid red;
}
.hw_header_box{
width: 100%;
height: 60px;
min-width: 320px;
max-width: 640px;
margin:0 auto;
background:rgba(240,240,240,1);
position: relative;
}
.hw_header_box a{
display: inline-block;
padding-left: 20px;
width: 50%;;
height: 100%;
float: left;
padding-top: 10px;
}
.hw_header_box ul{
display: inline-block;
/*border: 1px solid red;*/
width: 48%;
height: 100%;
float: right;
padding-top: 10px;
padding-right: 10px;
}
.hw_header_box ul li{
float: right;
margin-right: 5px;
display: block;
overflow: hidden;
width: 40px;
height: 40px;
/*border: 1px solid cornflowerblue;*/

}
.hw_header_box ul li:nth-child(2){

background: url(../img/firstPage/hw1_sprite.png)no-repeat;
background-position-x: -34px;
background-position-y: -65px;

}
.hw_header_box ul li:nth-child(1){
color: red;
background: url(../img/firstPage/hw1_sprite.png) no-repeat;
background-position-x: 7px;
background-position-y: -65px;
}

/*SEARCH BAR ENDS*/
/*PUBLIC PIC BEGINS*/
.img_content{
width: 100%;
/*height: 370px;*/
/*border: 1px solid red;*/
overflow: hidden;
position: relative;
top: 60px;
margin-bottom: 20px;
}
.img_content .img_content_img{
width: 100%;

/*border: 1px solid darkgreen;*/
overflow: hidden;
/*background-image: url(../img/firstPage/mate9_bg_cn.jpg);*/
background-size: 960px 700px;
}
.img_content_img img{
width: 100%;
height: 100%;
}
.half_series{
border-top: 2px #333333;
background: rgb(245,245,245);
}
.half_series a{
display: block;
float: left;
width: 48%;
height: 100%;
border: 1px solid lightgray;
margin: 0 2px;
}
.half_series p{
display: block;
width: 95px;
height: 20px;
background: salmon;
color: #FFFFFF;
text-align: center;
line-height: 20px;
margin: 5px auto;
}
.half_series span{
display: block;
width: 100%;
height: 20px;
text-align: center;
line-height: 20px;
margin: 0 auto;
}
.img_content .img_content_des{
width: 100%;
height: 120px;
text-align: center;
background:#FFFFFF;
/*border: 1px solid red;*/
/*color: #000;*/
}
.img_content .img_content_des h2{
margin: 10px 0 10px 0;
}

/*PUBLIC PIC ENDS*/
/*PRIVATE PIC BEGINS*/
#page1_des1,#page1_des2,#page1_desBottom{
background: rgb(50,50,50);
color: #FFFFFF;
}
.img_content .img1{
height: 250px;
}

/*.img_content .img2{
height: 400px;
}

.img_content .img3{
height: 285px;
}

.img_content .img4{
height: 196px;
}

.img_content .img5{
height: 196px;
}
.img_content .img6{
height: 196px;
}*/
.img_content .img7{
height: 185px;
}
.img_content #page1_news p{
display: block;
/*border-bottom: 1px solid lightgray;*/
width: 100%;
height: 40px;
text-align: left;
line-height: 40px;
padding-left: 10px;
padding-bottom: 5px;
font-size: 18px;
}
.img_content #page1_news a:nth-child(1)>p{
font-size: 20px;
font-weight: bold;
}
.img_content .img8 h2{
display: inline-block;
margin: 5px;
}

/*PRIVATE PIC ENDS*/
/**/
.bottom_ul_container{
width: 100%;
height: 60%;
background: rgb(50,50,50);
color: #fff;

}
.bottom_ul_container ul li{
display:block;
padding-left: 5px;
background: rgb(50,50,50);
color: #fff;
width: 100%;
height: 40px;
line-height: 40px;
margin: 1px 0;
/*border: 1px solid red;*/
font-size: 18px;
}
.bottom_ul_container ul li p{
display: block;
width: 50%;
height: 100%;
float: left;
}
.bottom_ul_container ul li span{
display: block;
width: 10%;
height: 100%;
float: right;
}
.page1_bottom ul{
display: inline-block;
width: 100%;
height: 108px;
background: rgb(50,50,50);
color: #fff;
margin-top: 1px;
padding-left: 22%;
}
.page1_bottom ul li{
float: left;
line-height: 70px;
padding-left: 4px;
}
#page1_desBottom ul li{
display: inline-block;
width: 32px;
height: 29px;
background-image: url(../img/firstPage/logo_linkedin.png);
padding-left: 2px;

}

/**/

/*HIDE PART BEGINS*/
.page1_hide{
width: 50%;
height: 600px;
background: lightgray;
float: left;
}
.page1_hide .calcContainer{
margin: 100px auto;
/*width: 100px;
height: 100px;
background: lightblue;*/
}

#calculater{
margin: 2px;
margin-top: 30px;
border: solid 6px lightgray;
border-spacing: 0px;
}
#display{
width: 100%;
height: 80px;
border-bottom: solid 4px lightgray;
color: lightcoral;
font-family: helvetica;
font-size: 50px;
padding-left: 2px;
}
.numberkey{
cursor: pointer;
width: 120px;
height: 80px;
border: solid 1px #FFFFFF;
background: darkgray;
color: #ffffff;
text-align: center;
font-family: helvetica;
font-size: 60px;
}
#equality{
cursor: pointer;
width: 120px;
height: 100%;
background: darkgray;
border: solid 1px #FFFFFF;
color: #ffffff;
text-align: center;
font-family: helvetica;
font-size: 60px;
}
.numberkey:hover{
background: lightcoral;
}
#equality:hover{
background: lightcoral;
}

/*HIDE PART ENDS*/

转载于:https://www.cnblogs.com/rlann/p/6246153.html

一个简单移动页面ionic打包成app相关推荐

将Html网页或者是Aue项目打包成App
把前端的网页打包成App 一. 前言首先,在学前端的时候,我们接触到了Html,css,js,你只需要有这些,即可打包成一个App,当然肯定需要一些打包的软件,然后你如果学习到了Vue框架,用脚 ...
物联网控制APP入门专题（三）---使用第三方平台将网页打包成APP
摘要:前面的文章讲了如何用阿里云IoT Studio快速制作一个网页版的手机端,可以通过手机浏览器浏览制定的网址就能实现对物联网设备的控制.本文讲解通过第三方平台将这个网页打包成一个APK文件,安装到 ...
设置网页打开默认全屏_网页打包成APP，macOS解锁刷少数派新姿势
随着web端所能实现的功能.体验越来越完善,是否需要客户端成为网站管理者重新考虑的问题,尤其是对于一些资讯类信息流网站.例如少数派,移动端和桌面端网站的自适应做的非常完善,拥有iOS/Android双 ...
cordova 一个将web应用程序封装成app的框架
cordova 一个将web应用程序封装成app的框架 cordova的详细介绍请参考这个链接:http://www.zhoujingen.cn/blog/7034.html 我接下来主要将如何搭建. ...
知识付费系统源码，可直接打包成app、H5、小程序
知识付费,在近几年来,越来越受到大家的关注.知识付费系统源码是将知识通过互联网渠道变现的方式.以知识为载体,通过付费获得在线知识以及在线学习所带来的收益.知识付费平台主要以分享知识内容,内容分为直播. ...
网站打包成app，webapp在线打包工具推荐
最近因为需求,需要把移动端网页打包成APP,本人一直是做网站开发的,没想到现在的webapp打包能如此方便了,打包的时候只用提供网站链接就可以了(原理应该是做一个app简单浏览器,然后默认打开你网站的 ...
php网站转为app的工具,网站打包成APP，可以直接将一个网站转成安卓App的Hbuilder工具...
我们有时候会想把自己的网站做成一个app,但是原生的自己没有基础又不会,网上找到的云打包之类的倒是可以直接把网站打包成app,但是免费版的避免不了会有广告或者体验时间限制,收费的又不想花钱,很愁人,今 ...
网址打包（详细图文教程！）使用HBuilder将网址打包成app
使用HBuilder将网址打包成app 使用工具:HBuilder 附上链接:https://www.dcloud.io/hbuilderx.html 教程目的:将封装好的项目网址打包成一个app,即 ...
github上开源iot物联网云平台thingsboard项目，将前段打包成app的方法研究
此框架已实现前后端分离,可以直接把前段编译后,打包成app来使用,支持android 和ios. 不是打web的url,这样访问很慢,要下载的资源很多. 是把前段的js,css,html等资源放在ap ...
小程序：微信小程序打包成APP
哈喽大家好 ! 我是小白本篇将教大家如何一键实现微信小程序打包成APP! 如今的微信小程序发展可谓是如日中天,关于微信小程序和APP谁才是最终的王者的问题一直没有得到一个正式的答案. 2017年1月 ...

一个简单移动页面ionic打包成app

一个简单移动页面ionic打包成app相关推荐

最新文章

热门文章