Fatal编程技术网
  • javascript/
  • Javascript Pageslider.js localStorage.getItem新页面加载

Javascript Pageslider.js localStorage.getItem新页面加载

javascript html cordova

Javascript Pageslider.js localStorage.getItem新页面加载,javascript,html,cordova,Javascript,Html,Cordova,我目前正在使用pageslider.js制作一个原型应用程序。我正在学习，所以请容忍我。我有几页内容，并使用原始html动态创建填充，其中一页有一个用户选择选项。我可以获取记录到本地存储器中的值（根据控制台窗口），但我希望执行计算并在下一页显示记录的值。这在我创建的一个提琴中运行得很好，我知道这是因为.html包含在一个页面中，所以internal.html方法可以工作，但我不知道如何在这种模型中实现相同的功能。在尝试了一系列方法之后，如果有人能帮助我，或者为我指明如何检索这些方法的方向，我将不

我目前正在使用pageslider.js制作一个原型应用程序。我正在学习，所以请容忍我。我有几页内容，并使用原始html动态创建填充，其中一页有一个用户选择选项。我可以获取记录到本地存储器中的值（根据控制台窗口），但我希望执行计算并在下一页显示记录的值。这在我创建的一个提琴中运行得很好，我知道这是因为.html包含在一个页面中，所以internal.html方法可以工作，但我不知道如何在这种模型中实现相同的功能。在尝试了一系列方法之后，如果有人能帮助我，或者为我指明如何检索这些方法的方向，我将不胜感激。下面是我的app.js文件的内容。任何帮助……即使是不可避免的被击倒也是最感激的

> 
window.addEventListener('load', function () {
new FastClick(document.body);
}, false);

// The dynamically built HTML pages.
var homePage =
'<div>' +
Page1content
'</div>';

var detailsPage =
'<div>' +
'<body>' +
    '<div id = "wrapper">' +
    '<div id = "scroller">' +
    '<div id = "wrapperheader">' +
    '<div id = "contentheader"><a href="#" class="btnleft"><img       src="images/home.png"></a><a href="#page3" class="btnright"><img src="images/pi.png"></a><a href="#" class="contentheader"><img src="images/headerlogo.png"></a></div>' +
            '<div id = "content">' +
            '<div id = "doseinput"><h1>Body Weight<select id="weightselect"><option value="10">10</option><option value="12">12</option>.... value="140">140</option></select></div>' +
            '<div id = "doseinput2"><h1>Dosage<select id="doseselect"><option value="0.1">0.1g/Kg</option><option value="0.15">0.15g/Kg</option><option value="0.2">0.2g/Kg</option></select></div>' +
            '<div id = "doseinput3"><a href="#page4"><input type="button" value="Calculate" onclick="computeDose()"></div>' +
            '<div id = "footer">' +
            '<p class = "footertextleft"></p>' +
            '<p class = "footertextright">2015</p>' +
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
    '</div>' +
'</div>';

////output page///

var detailsPage3 =
'<div>' +
'<body>' +
    '<div id = "wrapper">' +
            '<div id = "scroller">' +
            '<div id = "wrapperheader">' +
            '<div id = "contentheader"><a href="#" class="btnleft"><img src="images/home.png"></a><a href="#page3" class="btnright"><img src="images/pi.png"></a><a href="#" class="contentheader"><img src="images/headerlogo.png"></a></div>' +
            '<div id = "content">' +
            '<div id = "weightoutput"><h1>Weight<span id="weight">"weight"</span></h1></div>'+ 
            '<div id = "doseoutput"><h1>Dosage <span id="dose">"dose"</span></h1></div>'+ 
            '<div id = "output1"><h1>Daily: <span id="output1">?</span></h1></div>'+ 
            '<div id = "output2"><h1>5 times a week: <span id="output2">?</span></h1></div>'+ 
            '<div id = "output3"><h1>3 times a week: <span id="output3">?</span></h1></div>'+ 
            '<div id = "output4"><h1>Twice a week: <span id="output4">?</span></h1></div>'+ 
            '<div id = "output5"><h1>Once a week: <span id="output5">?</span></h1></div>'+ 
            '<div id = "output6"><h1>Once every 2 weeks week: <span id="output6">?</span></h1></div>'+ 
            '<div id = "footer">' +
            '<p class = "footertextleft">UK/HZN/15-0001</p>' +
            '<p class = "footertextright">Date of preperation: January 2015</p>' +
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
    '</div>' +
'</div>';

 //Obtain user inputsvar slider = new PageSlider($("#container"));
 $(window).on('hashchange', route);

 // Basic page routing
 function route(event) {
var page,
    hash = window.location.hash;

if (hash === "#page1") {
    page = merge(detailsPage, {});
//        slider.slide($(page), "right");
} else if (hash === "#page2") {
    page = merge(detailsPage1, {});
//        slider.slide($(page), "right");
} else if (hash === "#page3") {
    page = merge(detailsPage2, {});
//        slider.slide($(page), "right");
}else if (hash === "#page4") {
    page = merge(detailsPage3, {});
//        slider.slide($(page), "right");
}

 else {
    page = homePage;
 //        slider.slide($(homePage), "left");
 }

 slider.slidePage($(page));

 }

 function computeDose() {
 var dose = Number(document.getElementById("doseselect").value);
 localStorage.setItem("dose",dose);
 //  var weight = parseInt(localStorage.getItem("dose"));

 var weight = Number(document.getElementById("weightselect").value);
 localStorage.setItem("weight",weight);
 // var weight = parseInt(localStorage.getItem("weight"));


 //Display result of calculatio

 ////dose     
 document.getElementById("output1").innerHTML = Math.round(weight * dose) / 7;
 document.getElementById("output2").innerHTML = Math.round(weight * dose) / 5;
 document.getElementById("output3").innerHTML = Math.round(weight * dose) / 3;
 document.getElementById("output4").innerHTML = Math.round(weight * dose) / 2;
 document.getElementById("output5").innerHTML = Math.round(weight * dose);
 document.getElementById("output6").innerHTML = Math.round(weight * dose) * 2;

 }

//Primitive template processing. 


function merge(tpl, data) {
return tpl.replace()
          .replace()
          .replace();
 }




 route();

>
window.addEventListener（'load'，函数（）{
新建FastClick（document.body）；
}，假）；
//动态构建的HTML页面。
var主页=
'' +
第1页内容
'';
var detailsPage=
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“体重1012…”。。。。value=“140”>140'+
'剂量0.1g/Kg0.15g/Kg0.2g/Kg'+
'' +
'' +
“重量”表示重量“+
"剂量"剂量"
“每日：？”+
“每周5次：？”+
“一周三次：？”+
“一周两次：？”+
“每周一次：？”+
“每两周一次：？”+
'' +
英国/HZN/15-0001+
“
准备日期：2015年1月”+
''+
''+
''+
''+
''+
''+
''+
'' +
'';
//获取用户inputsvar slider=新页面slider（$（“#容器”）；
$（窗口）.on（'hashchange'，route）；
//基本页面路由
功能路线（事件）{
变量页，
hash=window.location.hash；
如果（哈希==“#第1页”）{
page=merge（detailsPage，{}）；
//滑块。滑块（$（第页），“右”）；
}else if（散列==“#第2页”）{
page=merge（detailsPage1，{}）；
//滑块。滑块（$（第页），“右”）；
}else if（散列==“#第3页”）{
page=merge（detailsPage2，{}）；
//滑块。滑块（$（第页），“右”）；
}else if（散列==“#第4页”）{
page=merge（detailsPage3，{}）；
//滑块。滑块（$（第页），“右”）；
}
否则{
页面=主页；
//slider.slide（$（主页），“左”）；
}
slider.slidePage（$（第页））；
}
函数computeDose（）{
var剂量=数量（document.getElementById（“doseselect”）.value）；
localStorage.setItem（“剂量”，剂量）；
//var-weight=parseInt（localStorage.getItem（“dose”）；
var-weight=Number（document.getElementById（“weightselect”）.value）；
localStorage.setItem（“重量”，重量）；
//var-weight=parseInt（localStorage.getItem（“weight”）；
//显示计算结果
////剂量
document.getElementById（“output1”）.innerHTML=Math.round（重量*剂量）/7；
document.getElementById（“output2”）.innerHTML=Math.round（重量*剂量）/5；
document.getElementById（“output3”）.innerHTML=Math.round（重量*剂量）/3；
document.getElementById（“output4”）.innerHTML=Math.round（重量*剂量）/2；
document.getElementById（“output5”）.innerHTML=Math.round（重量*剂量）；
document.getElementById（“output6”）.innerHTML=Math.round（重量*剂量）*2；
}
//原语模板处理。
功能合并（tpl、数据）{
返回tpl.replace（）
.替换（）
.replace（）；
}
路线（）；
add
dosselect.value=localStorage.dose；weightselect.value=localStorage.weight在底部的
route（）
之前。请随意使用冗长的dom方法，而不是内置的属性访问。不确定这是什么意思，您能详细说明一下吗？您需要做的（我认为）就是在页面加载时将下拉列表设置为localStorage值。抱歉，这可能很幼稚，但选择的值（第2页）似乎通过onclick命令和computeDose（）存储在本地存储中。当下一页（第3页）加载时，它会检索并显示，我想我可能可以添加一些脚本来执行该阶段的计算，但我可能会偏离轨道……如果你认为有更好的执行方式，那么我将非常乐意探索，因为我现在已经失去了继续生活的意愿。是的，您可以存储它们，但也需要加载它们。是我错过了那部分还是你错过了？