html js怎么实现点击一个图标变色，比如说图标是❤，点击之后变成红心。

JavaScript020

html js怎么实现点击一个图标变色，比如说图标是❤，点击之后变成红心。,第1张

这个再编程中，很常见，也有很多种写法，介绍两种。

1.图标用img标签显示，再img标签点击后，更改img的src属性，改变图标，将原来的空心换成红心的图片。

2.图标用css控制，设置background-image显示空心的背景图片，这里图片最好是png的，点击后换成红心的图片。

无论哪种，注意记录用户的点击行为，下次进去后直接显示红心的图标。比如百度app的点赞，要记录用户再哪个帖子点赞了，下次该用户再查看这个帖子的时候，默认显示点赞后的图标。

function Card()

{

this.suit=["方块","红心","黑桃","梅花"]

this.face=["A","1","2","3","4","5","6","7","8","9","10","J","Q","K","小王","大王"]

this.setSuit=function()

{

return this.suit[Math.round(Math.random()*3)]

}

this.setFace=function()

{

return this.face[Math.round(Math.random()*15)]

}

this.updateSuit=this.setSuit()

this.updateFace=this.setFace()

}

你那断代码之所以会报错因为

this.updateSuit=setSuit()

this.updateFace=setFace()

setSuit和setFace函数不存在

在函数内部声明函数如果加了this.这个东西就等于java中写了一个方法

比如:public void fun(){}

如果不加this.的函数就等于java中的静态方法，如:public static void fun(){}

this.updateSuit = setSuit()这句话的意思就是把当前属性的值赋为执行setSuit函数的返回值

而上面说了，加了this.的函数声明为对象方法，而你这是调用静态方法语法，所以就调用不到这个方法，会报 setSuit is not defined 这个错误，说这个方法未定义。