怎样用angular js给按钮添加提示音

怎样用angular js给按钮添加提示音,第1张

js代码如下:

<script type="text/javascript">

var app = angular.module("tip",[])

app.controller("bucTipController",function(){

})

.directive("bucButton",function(){

return {

restrict : 'E',

replace : true,

scope : {

myTitle : "@",

id : "@",

tipTitle : "@"

},

template : "<button class='bucSelectedButton bucSelected' ng-click='clicked()' ng-mouseover = 'mouseover()' ng-mouseout = 'mouseout()'>{{myTitle}}\

<div style='border:1px solid #dcdcdcborder-radius:6pxwidth:autoheight:20pxline-height:20pxposition:absolutetop:-40pxpadding:5pxwhite-space:nowrapbackground-color:#fafafadisplay:nonecolor:#000left:20px' class='tip'>{{tipTitle}}\

<span style='position:absolutetop:25pxleft:10pxbackground-color:#fafafaborder:1px solid #dcdcdcwidth:10pxheight:10pxtransform:rotate(45deg)border-left:noneborder-top:none'>\

</span>\

</div>\

</button>",

link : function(scope,elem,attrs) {

scope.mouseover = function(){

$(".tip").show()

}

scope.mouseout = function(){

$(".tip").hide()

}

scope.clicked = function(){

elem.toggleClass("bucSelectedHover")

$(".tip").hide()

}

}

}

})

</script>

具体如下:

1. 首先我们点击打开如图所示的qq后,并点击左下角的“更多”选项,

2. 接着在d出如图所示的菜单选项中选择点击进入“设置”,

3. 然后在设置页面中,我们需要点击如图所示的“声音”一栏选项,

4. 接着在声音设置中,我们很轻易的可以发现如图所示的“设置提示音”,并点击进入设置,

5. 现在如图所示便会d出个设置提示音的窗口,我们便可以根据不同分组内容进行设置不同的提示音,

6. 接着在如下图的文件夹中便可以进行选择不同的声音来做提示音,也可以通过自己合成来制作属于自己的提示音,

7. 最后我们需要注意的一点就是不能点击勾选如图所示的“关闭所有声音”不然我们将听不见任何声音。

<HTML>

<HEAD>

<script type="text/javascript" src="http://t.libdd.com/js/libs/jquery/jquery-1.7-latest.js"></script>

</HEAD>

<BODY>

<div>声音</div>

<audio id="music" src="" autoplay="autoplay">

</audio>

<input type="button" value="立即" onclick="play_click()">

</BODY>

<script>

function play_click(){

var div = document.getElementById('music')

div.src="mi.mp3"

}

</script>

</HTML>

这样试试


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11832243.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存