websocket专题-4-websocket我遇到的问题

导语:知识重在分享

前提:做好事情需要你懂里面的基本知识(javascript怎么用你都不知道,那你在咋写?)

其次:你需要有个懂前端的同学或者朋友可以去询问(毕竟你不是写前端的/前端的知识懂的不是那样的透彻),在此感谢我强哥!帮了很大的忙。

接下来遇到的问题:

页面获取元素的值:

1.不同的标签获取值得方式不同

如input,div :$("#bb").val(),$("#cc").html()  //我懂得不是太多只是举个例子

2.样式变换,button点击之后变颜色:

<style>/*添加属性*/

.normalBtn.foulHandleBtn{

background: red;

}

</style>

<script>

//点击button变换颜色

function foulHandle(btn){

$(btn).toggleClass("foulHandleBtn");

}

</script>

3.时间走停

timer=setInterval("clock.move()",1000);

clearInterval(timer);

clearTimeout(timer);

4.websocket传输数据

将页面上的数据传输到另一个页面上,很明显页面上有多条数据那么要分装成一个json传过去才行(我思考的方法),用json = JSON.stringify({

red:document.getElementById("red").innerHTML})

通过websocket传到另一个页面塞到页面上,此处要将string转化为obj点出里面的内容。

jsonObject = JSON.parse(obj)//如果取matchTime jsonObject.matchTime

$("#blue").html(jsonObject.blue);

$("#red").html(jsonObject.red);

完成了

5.时钟(下面是一个小demo)

var clock=new clock();

/*指向计时器的指针*/

var timer;

window.onload=function(){

timer=setInterval("clock.move()",1000);

}

function clock(){

/*s是clock()中的变量,非var那种全局变量,代表剩余秒数*/

this.s=20;

this.move=function(){

/*每被调用一次,剩余秒数就自减*/

this.s=this.s-1;

/*输出前先调用exchange函数进行秒到分秒的转换,因为exchange并非在主函数window.onload使用,因此不需要进行声明*/

document.getElementById("timerText").innerHTML=exchange(this.s);

if(this.s == 10){

remind.play();

}

if(this.s == 0){

startOrEnd.play();

clearTimeout(timer);

}

}

}

function exchange(time){

/*javascript的除法是浮点除法,必须使用Math.floor取其整数部分*/

this.m=Math.floor(time/60);

/*存在取余运算*/

this.s=(time%60);

var m;

var s = this.s + "";

if(s.length < 2){

s = "0" + s;

}

this.text=this.m+":"+s;

//        alert(this.text);

/*传过来的形式参数time不要使用this,而其余在本函数使用的变量则必须使用this*/

return this.text;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,845评论 18 139
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,092评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,814评论 2 17
  • 来源:PM圈子 作为一名程序员你是否经常被要求在同一时间完成多个deadline?你是否经常被要求干与专业不相干的...
    小声讲故事阅读 320评论 0 0
  • 看到小区里面几十棵玉兰树(这些树来到小区已经八九年了,同一时间移栽过来的),发现经过移栽后,经过八九年的时间,它们...
    花与熙阅读 128评论 0 0