Fatal编程技术网
  • javascript/
  • Javascript 如何解除图像的模糊？

Javascript 如何解除图像的模糊？

javascript image function

Javascript 如何解除图像的模糊？,javascript,image,function,onload,Javascript,Image,Function,Onload,我在使用javascript创建游戏时遇到了一些问题。我不能使用jquery。我遇到的问题是，当我选择模糊图像时，它不会取消模糊，而且应该取消模糊。我尝试过更改函数名、图像名和加载名，但这似乎不起作用。我还检查了F12开发工具，并对其进行了必要的更改，但仍然没有成功 有人可以看看下面的代码，并给我一些帮助，为什么它不工作。我对javascript还不熟悉，所以我仍然习惯它 <!DOCTYPE html> <html> <head> <title>

我在使用javascript创建游戏时遇到了一些问题。我不能使用jquery。我遇到的问题是，当我选择模糊图像时，它不会取消模糊，而且应该取消模糊。我尝试过更改函数名、图像名和加载名，但这似乎不起作用。我还检查了F12开发工具，并对其进行了必要的更改，但仍然没有成功

有人可以看看下面的代码，并给我一些帮助，为什么它不工作。我对javascript还不熟悉，所以我仍然习惯它

<!DOCTYPE html>
<html>
<head>
<title> Who Am I? </title>

<script type="text/javascript">

        var imageone = document.getElementById("Zero");
        var imagetwo = document.getElementById("One");
        var imagethree = document.getElementById("Two");
        var imagefour = document.getElementById("Three");
        var imagefive = document.getElementById("Four");
        var imagesix = document.getElementById("Five");

        window.onload = init1;
        function init1 () {
        var imageone = document.getElementById("Zero");
        imageone.onclick = showAnswerone;
        }

        function showAnswerone () {
        var imageone = document.getElementById("Zero");
        imageone.src="Zero.jpg";
        }

        window.onload = init2;
        function init2 () {
        var imagetwo = document.getElementById("One");
        imagetwo.onclick = showAnswertwo;
        }

        function showAnswertwo () {
        var imagetwo = document.getElementById("One");
        imagetwo.src="One.jpg";
        }

        window.onload = init3;
        function init3 () {
        var imagethree = document.getElementById("Two");
        imagethree.onclick = showAnswerthree;
        }

        function showAnswerthree () {
        var imagethree = document.getElementById("Two");
        imagethree.src="Two.jpg";
        }

        window.onload = init4;
        function init4 () {
        var imagefour = document.getElementById("Three");
        imagefour.onclick = showAnswerfour;
        }

        function showAnswerfour () {
        var imagefour = document.getElementById("Three");
        imagefour.src="Three.jpg";
        }

        window.onload = init5;
        function init5 () {
        var imagefive = document.getElementById("Four");
        image.onclick = showAnswerfive;
        }

        function showAnswerfive () {
        var imagefive = document.getElementById("Four");
        imagefive.src="Four.jpg";
        }

        window.onload = init6;
        function init6 () {
        var imagesix = document.getElementById("Five");
        imagesix.onClick = showAnswersix;
        }

        function showAnswersix () {
        var imagesix = document.getElementById("Five");
        imagesix.src="Five.jpg";
        }

        function submitForm()
        {
        var var_one = 0, var_two = 0, var_three = 0;
        var var_four = 0, var_five = 0, var_six = 0;
        }

        function var_oneb(){
            var_one=5;
            return true;
        }

        function var_onea(){
            var_one=0;
            return true;
        }

        function var_twob(){
            var_two=5;
            return true;
        }
        function var_twoa(){
            var_two=0;
            return true;
        }

        function var_threeb(){
            var_three=5;
            return true;
        }

        function var_threea(){
            var_three=0;
            return true;
        }


        function var_fourb(){
            var_four=5;
            return true;
        }

        function var_foura(){
        var_four=0;
        return true;
        }


        function var_fiveb(){
            var_five=5;
            return true;
        }

        function var_fivea(){
            var_five=0;
            return true;
        }

        function var_sixb(){
            var_six=5;
            return true;
        }

        function var_sixa(){
            var_six=0;
            return true;
        }


        function results_addition() {
        var var_results=var_one+var_two+var_three+var_four+var_five+var_six;
        if(var_results<=29){
            document.getElementById('choice1').value="Not all answers are correct";
        }
        else{
        if(var_results>=30){
        document.getElementById('choice1').value="All answers are correct";
        }
        else{
        document.getElementById('choice1').value="All answers are correct";
        }
        }
        }

</script>

<style>
    body {
    background-color: #ff0000;
    }

    div#grid {
        position: relative;
        width: 500px;
        height: 300px;
        margin-left: 50;
        margin-right: 50;
    }

    table {
        border-spacing: 0px;
        position: absolute;
        left: 40px;
        top: 40px;
        border-collapse: collapse;
        padding: 0px;
        margin: 0px;
    }

    td {
        border: 1px solid white;
        text-align: center;
        width: 160px;
        height: 110px;
        vertical-align: middle;
        align-content: stretch;
        padding: 5px;
        margin: 0px;
    }

    h2 {
        font-family: verdana, arial;
        text-align: center;
        color: white;
        font-size: 30px;
    }

    h3 {
        font-family: verdana, arial;
        text-align: center;
        color: white;
        font-size: 18px;
    }
</style>
</head>

<body>
    <div id="grid">
    <h2> Who Am I? </h2>
    <table>
    <tr>
    <td> <img id = "Zero" src = "Zeroblur.jpg"> </td>
    <td> <img id = "One" src = "Oneblur.jpg"> </td>
    <td> <img id = "Two" src = "Twoblur.jpg"> </td>
    </tr>
    <tr>
    <td> <img id = "Three" src = "Threeblur.jpg"> </td>
    <td> <img id = "Four" src = "Fourblur.jpg"> </td>
    <td> <img id = "Five" src = "Fiveblur.jpg"> </td>
    </tr>
    </table>
    </div>
    <br><br><br><br><br><br><br><br>
    <h3> I am a Rugby League Player. </h3>
    <h3> Click on me to reveal my identity! </h3>
    <br>
    <h3>Which Player am I</h3>
    <hr>
    <form action="">
    <h3>Player 1 </h3>
<center>
    <h3>  
    Shaun Johnson <INPUT TYPE="radio" NAME="Ra1" VALUE="0" OnClick="var_onea()">   
    Sonny Bill Williams <INPUT TYPE="radio" NAME="Ra1" VALUE="5" OnClick="var_oneb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 2 </h3>
<center>
    <h3>   
    Gareth Widdop <INPUT TYPE="radio" NAME="Ra2" VALUE="0" OnClick="var_twoa()">   
    Sam Tomkins <INPUT TYPE="radio" NAME="Ra2" VALUE="5" OnClick="var_twob()"> 
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 3 </h3>
<center>
    <h3>   
    James Graham <INPUT TYPE="radio" NAME="Ra3" VALUE="5" OnClick="var_threea()">   
    Sam Burgess <INPUT TYPE="radio" NAME="Ra3" VALUE="10" OnClick="var_threeb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 4 </h3>
<center>
    <h3>  
    Matthew Scott <INPUT TYPE="radio" NAME="Ra4" VALUE="5" OnClick="var_foura()">   
    Johnathon Thurston <INPUT TYPE="radio" NAME="Ra4" VALUE="10" OnClick="var_fourb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 5 </h3>
<center>
    <h3>  
    Neil Lowe <INPUT TYPE="radio" NAME="Ra5" VALUE="5" OnClick="var_fivea()">   
    Danny Brough <INPUT TYPE="radio" NAME="Ra5" VALUE="10" OnClick="var_fiveb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 6 </h3>
<center>
    <h3>  
    Mitch Garbutt  <INPUT TYPE="radio" NAME="Ra6" VALUE="5" OnClick="var_sixa()">   
    Ryan Hall <INPUT TYPE="radio" NAME="Ra6" VALUE="10" OnClick="var_sixb()">
    </h3>
</center>
    <br>
    <hr>
    <br>
<center>
    <INPUT TYPE="button" VALUE="Calculate" OnClick="results_addition()"> Your Score:
    <INPUT TYPE="text" id="choice1" NAME="choice1" VALUE="" SIZE=20> 
</center>
</form>
</body>
</html>


我是谁？
var imageone=document.getElementById（“零”）；
var imagetwo=document.getElementById（“一”）；
var imagethree=document.getElementById（“两”）；
var imagefour=document.getElementById（“三”）；
var imagefive=document.getElementById（“四”）；
var imagesix=document.getElementById（“五”）；
window.onload=init1；
函数init1（）{
var imageone=document.getElementById（“零”）；
imageone.onclick=showAnswerone；
}
函数showAnswerone（）{
var imageone=document.getElementById（“零”）；
imageone.src=“Zero.jpg”；
}
window.onload=init2；
函数init2（）{
var imagetwo=document.getElementById（“一”）；
imagetwo.onclick=showAnswertwo；
}
函数showAnswertwo（）{
var imagetwo=document.getElementById（“一”）；
imagetwo.src=“One.jpg”；
}
window.onload=init3；
函数init3（）{
var imagethree=document.getElementById（“两”）；
imagethree.onclick=showAnswerthree；
}
函数显示答案三（）{
var imagethree=document.getElementById（“两”）；
imagethree.src=“Two.jpg”；
}
window.onload=init4；
函数init4（）{
var imagefour=document.getElementById（“三”）；
imagefour.onclick=showAnswerfour；
}
函数showAnswerfour（）{
var imagefour=document.getElementById（“三”）；
imagefour.src=“Three.jpg”；
}
window.onload=init5；
函数init5（）{
var imagefive=document.getElementById（“四”）；
image.onclick=showAnswer5；
}
函数显示回答五（）{
var imagefive=document.getElementById（“四”）；
imagefive.src=“Four.jpg”；
}
window.onload=init6；
函数init6（）{
var imagesix=document.getElementById（“五”）；
imagesix.onClick=showAnswersix；
}
函数显示答案六（）{
var imagesix=document.getElementById（“五”）；
imagesix.src=“Five.jpg”；
}
函数submitForm（）
{
var一=0，var二=0，var三=0；
var四=0，var五=0，var六=0；
}
函数var_oneb（）{
var_one=5；
返回true；
}
函数var_onea（）{
var_one=0；
返回true；
}
函数var_twob（）{
var_two=5；
返回true；
}
函数var_twoa（）{
var_two=0；
返回true；
}
函数var_threeb（）{
var_三=5；
返回true；
}
函数var_threea（）{
var_三=0；
返回true；
}
函数var_fourb（）{
var_four=5；
返回true；
}
函数var_foura（）{
var_four=0；
返回true；
}
函数var_fiveb（）{
var_五=5；
返回true；
}
函数var_fivea（）{
var_五=0；
返回true；
}
函数var_sixb（）{
var_六=5；
返回true；
}
函数var_sixa（）{
var_六=0；
返回true；
}
函数结果_加法（）{
var var_结果=var_1+var_2+var_3+var_4+var_5+var_6；
如果（var_结果=30）{
document.getElementById（'choice1'）.value=“所有答案都正确”；
}
否则{
document.getElementById（'choice1'）.value=“所有答案都正确”；
}
}
}
身体{
背景色：#ff0000；
}
分区网格{
位置：相对位置；
宽度：500px；
高度：300px；
左边距：50；
右边距：50；
}
桌子{
边界间距：0px；
位置：绝对位置；
左：40px；
顶部：40px；
边界塌陷：塌陷；
填充：0px；
边际：0px；
}
运输署{
边框：1px纯白；
文本对齐：居中；
宽度：160px；
高度：110px；
垂直对齐：中间对齐；
对齐内容：拉伸；
填充物：5px；
边际：0px；
}
氢{
字体系列：verdana，arial；
文本对齐：居中；
颜色：白色；
字体大小：30px；
}
h3{
字体系列：verdana，arial；
文本对齐：居中；
颜色：白色；
字号：18px；
}
我是谁？









我是橄榄球联盟的球员。
点击我来显示我的身份！


我是哪个球员


玩家1
肖恩·约翰逊
桑尼·比尔·威廉姆斯




玩家2
加雷斯·维多普
萨姆·汤姆金斯




玩家3
詹姆斯·格雷厄姆
萨姆·伯吉斯




玩家4
马修·斯科特
约翰纳森·瑟斯顿




玩家5
尼尔·洛
丹尼·布鲁




玩家6
米奇·加巴特
瑞安·霍尔






你的分数：
window.onload = init1;
// ...
window.onload = init2;
// ...
// etc.

function init() {
  init1();
  init2();
  // etc.
};

window.onload = init;

// For just one event listener, this can work:
element.onclick = onClick;

// If you want to execute multiple methods when an event happens, you'll need:
element.addEventListener("click", doSomething);
element.addEventListener("click", doSomethingElse);