2019-12-27 第十五天!!

字符串处理方法

var str = '2019-12-27';

var arr = str.split('-');//将-切掉['2019','12','27']

var arr2 = str.split('');//将每个字符分开['2','0','1','9','1','2','2','7']

var str2 = '#div1';

var str3 = '.div1';

var str4 = 'str2.charAt(0)';//#

if (str4 == '#'){

console.log('id选择器');

}

var str5 = 'Microsoft Yahei';

var num = str5.indexOf('Yahei');//10

var num2 = str5.indexOf('xihei');//-1

var str6 = str5.substring(10,15);//从10开始从15结束 包括开始不包括结束Yahei

var str6 = str5.substring(10);//从10开始到结尾Yahei

console.log(str6.toUpperCase());//全转大写YAHEI

console.log(str6.toLowerCase());//全转小写 yahei

字符串反转

1、split字符串转成数组

2、reverse数组反转

3、join数组转成字符串

var sTr = '123asd7988asdfe21';

var str2 = sTr.split('').reverse().join('');//12efdsa8897dsa321

console.log(str2);

定时器弹框

setTimeout只执行一次的定时器

clearTimeout 关闭只执行一次的定时器

setInterval 反复执行的定时器

clearInterval 关闭反复执行的定时器

.pop{

width: 400px;

height: 300px;

background-color: #fff;

border: 1px solid #000;

固定定位

position: fixed;

左上角位于页面中心

left: 50%;

top: 50%;

让div向左偏移半个宽度、向上偏移半个高度,使div位于页面中心

margin-left: -200px;

margin-top: -150px;

弹窗在最上面

z-index: 9999;

}

遮罩样式

.mask{

position: fixed;

width: 100%;

height: 100%;

background-color: #000;

left: 0;

top: 0;

设置透明度30%

opacity: 0.3;

filter: alpha(opacity=30);兼容低版本IE

遮罩在弹窗的下面,在网页所有内容的上面

z-index: 9990;

}

.pop_con{

display: none;默认不显示,用定时器显示

}

</style>

<script type="text/javascript">

window.onload = function(){

var pop = document.getElementById('pop');

var shutoff = document.getElementById('shutoff');

setTimeout  (function (){

pop.style.display = 'block';//显示弹框和遮罩

},3000);开启定时器的简写方式:调用匿名函数

function showPop(){

pop.style.display = 'none';//关闭弹框和遮罩

}

}

</script>

</head>

<body>

<h1>首页标题</h1>

<p>页面内容</p>

<a href="http://www.baidu.com">百度网</a>

<div class="pop_con" id="pop">

<div class="pop">

<h3>提示信息!</h3>

<a href="#" id="shutoff">关闭</a>

</div>

<div class="mask"></div>

</div>

</body>

定时器的基本用法

1,只执行一次的定时器

var timer = setTimeout(function () {

      alert('hello');

   },3000);

 2,清除只执行一次的定时器

   clearTimeout(timer);

3,一直执行两秒的定时器

   var timer2 = setInterval(function () {

      alert('hihi!!');

   },2000);

4,清除一直(反复)执行两秒的定时器

clearInterval(timer2);

定时器动画

.box{

         width:100px;

         height:100px;

         background-color:gold;

         position:fixed;

         left:20px;

         top:20px;

}

window.onload = function(){

         var box = document.getElementById('box');

         var left = 20;

         setInterval(function () {

            left++;

            box.style.left = left + 'px';

            当left大于600时停止动画

            if (left > 600){

               clearInterval(timer)

}

         },30);

}

<div class = 'box' id = 'box'></box>

var oBox = document.getElementById('box');

var now = new Date();

console.log(now);//Fri Dec 27 2019 14:48:17 GMT+0800 (中国标准时间)

var year = now.getFullYear();//2019

var month = now.getMonth() + 1;//12(0-11)

var date = now.getDate();//27

var week = now.getDay();//5 0-6 星期日为0

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

console.log(hour + ':' +minute +':' + second + ':');//14:55:24

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

推荐阅读更多精彩内容