JS04(时钟效果、倒计时发送验证码、 5秒钟之后返回首页、小米手机、字符串位置、检查字符串长度)
时钟效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .clock { width: 600px; height: 600px; margin:50px auto; background: url(images/clock.jpg) no-repeat; position: relative; } .clock div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .h { background: url(images/hour.png) no-repeat center center; } .m { background: url(images/minute.png) no-repeat center center; } .s { background: url(images/second.png) no-repeat center center; } </style> </head> <body> <div class="clock"> <div class="h" id="hour"></div> <div class="m" id="minute"></div> <div class="s" id="second"></div> </div> </body> </html> <script> var hour = document.getElementById("hour"); var minute = document.getElementById("minute"); var second = document.getElementById("second"); // 开始定时器 var s = 0,m = 0, h = 0, ms = 0; setInterval(function() { // 内容就可以了 var date = new Date(); // 得到最新的时间 ms = date.getMilliseconds(); // 现在的毫秒数 s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟 h = date.getHours() % 12 + m / 60 ; //console.log(h); //旋转角度 // 一圈 360 ° 一共有 60 秒 每秒 6 ° 现在是 s秒 second.style.WebkitTransform = "rotate("+ s*6 +"deg)"; // 变化 旋转 deg 度 minute.style.WebkitTransform = "rotate("+ m*6 +"deg)"; hour.style.WebkitTransform = "rotate("+ h*30 +"deg)"; second.style.MozTransform = "rotate("+ s*6 +"deg)"; // 变化 旋转 deg 度 minute.style.MozTransform = "rotate("+ m*6 +"deg)"; hour.style.MozTransform = "rotate("+ h*30 +"deg)"; },100); </script>
倒计时发送验证码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text"/> <button id="btn">点击发送短信</button> </body> </html> <script> var btn = document.getElementById("btn"); var count = 5; // 数据的 10 var timer = null; // 定时器的名字 btn.onclick = function() { clearInterval(timer); // 先清除掉原来的定时器 // alert(11); this.disabled = true; //alert(this); // this 指向的是 btn var that = this; // 把 btn 对象 给 that var _this = this; timer = setInterval(sendTextMessage,1000); // 开启定时器 名字 timer function sendTextMessage() { count--; //this.innerHTML = "还剩余"+count+"秒"; // alert(this); // this 指向的是 定时器 window //alert(that); if(count >= 0 ) { that.innerHTML = "还剩余"+count+"秒"; } else { that.innerHTML = "重新发送短信"; that.disabled = false; clearInterval(timer); // 清除定时器 count = 5; } } } </script>
5秒钟之后返回首页
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"></div> </body> </html> <script> var demo = document.getElementById("demo"); var count = 5; var speed = 1000; setTimeout(goIndexPage,speed); // 1秒钟之后去执行 goIndexPage这个函数 function goIndexPage() { //alert(arguments.callee); count--; demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>"; if(count <= 0) { // 如果 count 小于 0 就到了时间了 我们应该跳转页面 window.location.href = "http://www.baidu.com"; } else { setTimeout(arguments.callee,speed); // 递归调用 自己调用自己 } } </script>
小米手机
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .xiaomi { width: 512px; height: 400px; border: 1px solid #f00; margin: 100px auto; overflow: hidden; position: relative; } .xiaomi span { position: absolute; left: 0; width: 100%; height: 200px; cursor: pointer; } .up { top: 0; } .down { bottom: 0; } #pic { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="xiaomi"> <img src="mi.png" alt="" id="pic"/> <span class="up" id="picUp"></span> <span class="down" id="picDown"></span> </div> </body> </html> <script> function $(id) { return document.getElementById(id);} var num = 0; // 控制图片的top值 var timer = null; // 定时器名称 $("picUp").onmouseover = function(){ // alert(11); clearInterval(timer); timer = setInterval(function(){ num -= 3; num >= -1070 ? $("pic").style.top = num + "px" : clearInterval(timer); },30); } $("picDown").onmouseover = function(){ clearInterval(timer); timer = setInterval(function(){ num++; num < 0 ? $("pic").style.top = num + "px" : clearInterval(timer); },30); } $("picUp").parentNode.onmouseout = function() { clearInterval(timer); } </script>
字符串位置
<script>
var txt = "abcdefg";
var txt1 = "今天是星期天";
alert(txt.charAt(5));
alert(txt1.charAt(3));
alert(txt.charCodeAt(0)); //code码
alert(txt1.charCodeAt(3));
</script>
检查字符串长度
<script>
var txt = "what are you 弄啥咧!好的";
console.log(txt.length);
function getStringLength(str) {
var len = 0; //存储总长度
var c = 0; // 存储每一个编码
for(var i=0;i<str.length;i++)
{
c = str.charCodeAt(i);
//alert(c);
if(c>=0 && c<=127)
{
len++;
}
else
{
len += 2;
}
}
return len;
}
console.log(getStringLength(txt));
</script>
