自定义计算器Wordpress没有插件脚本

时间:2017-02-05 11:43:52

标签: php html wordpress calculator

你好,我写了一些指南带有3个输入字段的计算器,用于计算有氧运动的心率,但我似乎在将它们应用到我的wordpress中时遇到了问题

在网络上的tryouteditor中试用它时,它正在工作(http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_default_css

在wordpress中它只显示代码(是的,我用HTML输入) 我没有服务器,所以我只使用浏览器访问wordpress并且没有使用插件

请帮帮我 这是代码:

    <html>
    <script>
    function calc(form) {

    var D = "0";
    var E = "0";
    var A = document.getElementById("num1").value;
    var B = document.getElementById("op").value;
    var C = document.getElementById("num2").value;

    if (C === "GI")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('5'))/parseInt('10')
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('6'))/parseInt('10'); 
    }
    else if(C === "A1")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('6'))/parseInt('10');
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('7'))/parseInt('10');
    }
    else if(C === "A2")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('7'))/parseInt('10');
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('8'))/parseInt('10');
    }
    else if (C === "A3")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('8'))/parseInt('10');
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('9'))/parseInt('10');
    }
    else if (C === "A4")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('9'))/parseInt('10');
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('10'))/parseInt('10');
    }
    document.getElementById("result").innerHTML = D;
    document.getElementById("result2").innerHTML = E;
    return false;
    }
    </script>
    <body>
    Heart Rate when waking up
    <input type="text" id="num1" name="num1" />
    <br>
    Age
    <input type="text" id="op" name="op" />
    <br>
    Intensity GI - A4
    <input type="text" id="num2" name="num2" />
    <br />
    <input type="button" value="Solve" onClick="calc(this)">

    <p id="result" name="r1">
    <p id="result2" name="r2">
    <br />
    </p>
    </body>
    </html>

1 个答案:

答案 0 :(得分:1)

首先,您需要创建一个新的页面模板。创建一个类似calculator-template.php

的页面模板

然后在文件里面写这样的方式:

<?php 
/*
Template Name: Heart Calculator
*/ get_header();
?>
<script>
//your js codes
</script>
<!-- Write your html codes. Do not include body tag -->
<?php get_footer(); ?>

现在您应该转到Wordpress Dashboard&gt;添加新页面&gt;从右侧小部件中选择Heart Calculator页面模板。并发布它!

使用 wordpress.com

直接将代码复制并粘贴到wordpress的页面编辑器中。确保选择文字模式

<script>
function calc(form) {
var D = "0";
var E = "0";
var A = document.getElementById("num1").value;
var B = document.getElementById("op").value;
var C = document.getElementById("num2").value;
if (C === "GI")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('5'))/parseInt('10')
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('6'))/parseInt('10'); 
}
else if(C === "A1")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('6'))/parseInt('10');
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('7'))/parseInt('10');
}
else if(C === "A2")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('7'))/parseInt('10');
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('8'))/parseInt('10');
}
else if (C === "A3")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('8'))/parseInt('10');
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('9'))/parseInt('10');
}
else if (C === "A4")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('9'))/parseInt('10');
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('10'))/parseInt('10');
}
document.getElementById("result").innerHTML = D;
document.getElementById("result2").innerHTML = E;
return false;
}
</script>

Heart Rate when waking up
<input type="text" id="num1" name="num1" />
<br>
Age
<input type="text" id="op" name="op" />
<br>
Intensity GI - A4
<input type="text" id="num2" name="num2" />
<br />
<input type="button" value="Solve" onClick="calc(this)">

<p id="result" name="r1">
<p id="result2" name="r2">
<br />
</p>

我刚刚测试过,它有效! 你现在好了!