js相关操作(一)
js进行字符串脱敏
//脱敏
function substring(str){
if(typeof str == 'string'){ //参数为字符串类型
var start = parseInt(str.length /2 /2);
var end = parseInt(str.length / 2 / 2 * 3);
var ret = str.substring(start,end); //提取字符串下标之间的字符。
var retStr = '';
for (var i =0;i;i++){
retStr += '*';
}
return str.replace(ret,retStr); //字符串中用字符替换另外字符，或替换一个与正则表达式匹配的子串。
}
}js键盘相关事件
某个键盘的键被按下：onkeydown
某个键盘的键被按下或按住：onkeypress
某个键盘的键被松开：onkeyup
click触发：
$(".btn-submit").click(function(){
login();
});
键盘回车触发：
$("html").die().live("keydown",function(event){
if (event.keyCode == 13){
login();
}
})
//键盘回车 登录
$('input').keypress(function (e) {
//e.which是按键的值
if (e.which == 13) {
login();
}
});文本域动态显示还剩多少字--一
备注：
: : checkMaxInput()checkMaxInput()checkMaxInput()checkMaxInput()resetMaxmsg()(objmaxLen) {
(obj == || obj == undefined || obj == ) {
}
(maxLen == || maxLen == undefined || maxLen == ) {
maxLen = }
strResult$obj = (obj)newid = $obj.() + (obj.value.length > maxLen) { obj.value = obj.value.substring(maxLen)strResult = + newid + + (maxLen - obj.value.length) + }
{
strResult = + newid + + (maxLen - obj.value.length) + }
$msg = $(+ newid)($msg.length == ) {
$obj.after(strResult)}
{
$msg.html(strResult)}
}
resetMaxmsg() {
$().remove()}文本域动态显示还剩多少字--二
js-获取随机数.note剩余可输入600字((){
$().on((){
txtval = $().val().lengthconsole.log(txtval)str = parseInt(-txtval)console.log(str)(str > ){
$().html(+str+)}{
$().html()$().val($().val().substring())}
})})下拉框改变事件
//下拉框改变触发事件
$(document).ready(function () {
$("#sel_one").change(function () {
alert("测试！");
});
});清空文本框，并获取焦点
html：
js：
//清空并获取焦点
$('#TxtID').val("").focus();
$('#TxtID').val(""）：即给 这个文本框赋值 = ""；
focus():获取光标焦点获取 鼠标点击的 ID 或者 元素
获取当前鼠标点击的Id：
$(document).click(function (e) {
var v_id = $(e.target).attr('id');
}）；
或者
获取指定Id元素的 id值
var v_id = $('#YesBut').attr('id');
或者
获取点击事件的 id值
$('#YesBut').click(function () {
var v_id = $(this).attr('id');
alert("ID:" + v_id);
});纯js-淡入淡出切换背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3全屏背景图片缩小渐变代码 </title>
<style type="text/css">
*{margin:0;padding:0;}
.slideshow {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slideshow-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 16s;
animation-duration: 16s;
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3;
}
.slideshow-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.slideshow-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.slideshow-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}
@-webkit-keyframes kenburns-1 {
0% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
98.4375% {
opacity: 0;
-webkit-transform: scale(1.21176);
transform: scale(1.21176);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-1 {
0% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
98.4375% {
opacity: 0;
-webkit-transform: scale(1.21176);
transform: scale(1.21176);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes kenburns-2 {
23.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes kenburns-2 {
23.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-3 {
48.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes kenburns-3 {
48.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-4 {
73.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-4 {
73.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style>
</head>
<body>
<!-- 你可以添加个多“.slideshow-image”项目, 记得修改CSS -->
<div class="slideshow">
<div class="slideshow-image" style="background-image: url('img/600-300-1.jpg')"></div>
<div class="slideshow-image" style="background-image: url('img/12.jpg')"></div>
<div class="slideshow-image" style="background-image: url('img/13.jpg')"></div>
<div class="slideshow-image" style="background-image: url('img/11.jpg')"></div>
</div>
</body>
</html>js页面跳转的一些方法
<script type="text/javascript">
function herfs() {
window.location.href = "doy-1.ashx";
}
</script>
--------------------------点击左边连接 右边页面会跳转，但整个页面不动-----------------------------
-------js部分-------
<script type="text/javascript">
//当点击 id=ULone 下面的 a标签时， id=IFone标签的跳转链接会变成 this=ULone 下的 a 标签的连接
$(function () {
$("#ULone a").click(function () {
$("#IFone").attr("src", $(this).attr("href"));
return false;
});
});
</script>
-------html部分--------
<div class="Dtwo">
<ul id="ULone">
<li><a href="信息列表.aspx">列表信息</a></li>
<li><a href="后台_增.aspx">增</a></li>
<%--<li><a href="后台_删.aspx">删</a></li>
<li><a href="后台_改.aspx">改</a></li>--%>
</ul>
</div>
<div class="Dthree">
//frameborder="no":去除边框
<iframe frameborder="no" id="IFone" src="信息列表.aspx"></iframe>
</div>本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link
- 上一篇： js相关操作(二)
- 下一篇： css的一些应用(三)
请先登录后发表评论
- 最新评论
- 总共0条评论
