如何用纯js实现点击“记住用户名”按钮,刷新之后用户名依旧在页面的效果?

JavaScript031

如何用纯js实现点击“记住用户名”按钮,刷新之后用户名依旧在页面的效果?,第1张

用纯js实现点击“记住用户名”按钮,刷新之后用户名依旧在页面的效果方法如下:

1.登录成功之后,把登录信息加密后保存在cookie里面。

2.然后建一个js文件,在这个文件里面做用户是否已登录的判断!如果登录了就直接显示该页面,如果没登录,就跳转回登录页面。

3.这个js文件在登录后才能看到的页面都做引用。

cocos js 做出按钮选中效果示例:

一,首先使用cocos新建一个Cocos2d-js的新项目,然后再cocostudio中创建一个场景,在场景中添加三个按钮分别设置三态的图片

二,打开编辑器,实现代码如下:

var HelloWorldLayer = cc.Layer.extend({

ctor:function () {

this._super()

//导入cocostudio中拼好的界面

mainscene = ccs.load(res.MainScene_json).node

this.addChild(mainscene)

this.teamButton = ccui.helper.seekWidgetByName(mainscene,"Button_0")

var btn2 = ccui.helper.seekWidgetByName(mainscene,"Button_1")

var btn3 = ccui.helper.seekWidgetByName(mainscene,"Button_2")

//先默认设置一个按钮为选中状态   this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT)

this.teamButton.setEnabled(false)

var teamInfo = this.teamButton

this.teamButton.addTouchEventListener(this.selectedBtn1,this)

btn2.addTouchEventListener(this.selectedBtn2,this)

btn3.addTouchEventListener(this.selectedBtn3,this)

return true

},

selectedBtn1: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender)

cc.log("==========商店界面")

}

},

selectedBtn2: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender)

cc.log("==========卡牌界面")

}

},

selectedBtn3: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender)

cc.log("==========战斗界面")

}

},

callBack: function (sender) {

if (this.teamButton == sender){

return

}else{

this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_NORMAL)

this.teamButton.setEnabled(true)

sender.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT)

sender.setEnabled(false)

this.teamButton = sender

}

},

})

var HelloWorldScene = cc.Scene.extend({

onEnter:function () {

this._super()

var layer = new HelloWorldLayer()

this.addChild(layer)

}

})

三,运行就可以查看界面,点击不同的按钮显示不同的输出结果

[Log] ==========商店界面 (CCDebugger.js, line 331)

[Log] ==========卡牌界面 (CCDebugger.js, line 331)

[Log] ==========战斗界面 (CCDebugger.js, line 331)

用css3更简单

首先定义一个闪烁的-webkit-animation 的name为twinkling,效果是透明度从0到1

@-webkit-keyframes twinkling{

/*透明度由0到1*/

0%{

opacity:0/*透明度为0*/

}

100%{

opacity:1/*透明度为1*/

}

}

然后设置需要闪烁的button的样式:

button{

-webkit-animation: twinkling 1s infinite ease-in-out

}

其中twinkling 为上面定义的,时间为1s,动画无限次,动画效果是ease-in-out