版权声明:本站所提供的文章资讯、软件资源、素材源码等内容均为本作者提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考,如有侵犯您的版权,请联系我,本作者将在三个工作日内改正。 https://blog.csdn.net/weixin_42323802/article/details/82784072
js 的三种书写的位置;
①内部书写;
②外链式;
③内行式;[必须使用事件触发才能调用JS语句];
<!--内链式 外联是,和外线是-->
<script type="text/javascript">
alert("使用内链式");
</script>
<script src="out.js"></script><!--使用外部引入-->
<!--使用第三种方法 行内式(不会主动触发,需要使用条件触发)-->
<input type="button" value="点击触发js行内式" onclick="alert('使用js的行内式点击触发函数')">
字符串解析转换;parseInt,parseFloat,isNaN(来判断换是否是number ,不是返回true,是返回false);
<script type="text/javascript">
var str="123.01asdf123";
var number = parseInt(str);
document.write(number+"<br/>");//123
var number1 = parseFloat(str);
document.write(number1+"<br/>");//123.01
document.write(isNaN(str)+"<hr/>");//是数字返回true
</script>
运行如下;
js 数组常用的方法;concat( ),reverse( ),sort( ),join( String str)是按照字符拼接字符串;
<!--concat ,reverse, join(),sort()-->
<script type="text/javascript">
var arr1 = [1, 3, 6, 7, 0];
var arr2 = [1, 34, 56, 2, 5];
var concat = arr1.concat(arr2);
document.write(concat+"<br/>");
var reverse = concat.reverse();
document.write(reverse+"<br/>");
var sort = reverse.sort();/*是按照字典顺序排序的*/
document.write("按照字典顺序排序:"+sort+"<br/>");
reverse.sort(function (a, b) { return a-b ;});
document.write("按照顺序排序:"+reverse+"<br/>");
var str = reverse.join("-");
document.write("使用分割符拼接字符串:"+str+"<hr/>");
</script>
运行;
数组的特点;
1,可以包含不同的method
2,可以装不同数据类型
3,长度可变
<!--js数组的特点;数组中可以装不同数据类型的数据-->
<script type="text/javascript">
var array = new Array(); /*array.length=0*/
var array1 = new Array(5); /*array1.length=5*/
var array2 = new Array(1, 2, 1, 2, 2, 1, 5);
var arr = [1, 1.0, true, "hello"];
for (var i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br/>");
}
</script>
运行;
js时间;tolaocalstring 按照本地格式化获取当前时间;newDate() 是获取当前时间;
<!--时间 tolocalstring-->
<script type="text/javascript">
document.write("本地时间:"+new Date()+"<br/>");
document.write("本地时间格式化:"+new Date().toLocaleString()+"<hr/>");
</script>
运行;
事件三要素:
- 事件源:被监听的html元素(就是这个事件加给谁),就是某个(某些)html标签
- 事件类型:某类动作,例如点击事件,移入移除事件,敲击键盘事件等
- 执行指令:事件触发后需要执行的代码,一般使用函数进行封装
语法格式:事件源.事件类型=执行指令
轮播图;
<head>
<meta charset="UTF-8">
<title></title>
<!--设置图片的显示-->
<style type="text/css">
div {
width: 600px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="tu">
<img src="../../img/01.jpg" width="100%" alt="tu" id="pic">
</div>
<!--使用加载函数-->
<script type="text/javascript">
window.onload;
var elementById = document.getElementById("pic");
var x = 1;
window.setInterval(function f() {
x++;
elementById.src = "../../img/0" + x + ".jpg";
//判断x
if (x == 8) {
x = 0;
}
}, 1000);
</script>
</body>
setInterval(timer)和clearInterval(timer)的使用;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mathRandom</title>
<style type="text/css">
body {
text-align: center;
}
</style>
<!--1,分别给input标签绑定setinterval ,clearinterval 单击事件
2,在h标签中设置内容innerHTML,为arr数组中的内容
3,清除时间clearinterval(timer)
-->
<script>
window.onload = function () {
//获取input数组标签,h标签的元素
var inputs = document.getElementsByTagName("input");
var h2 = document.getElementsByTagName("h2");
var arr = ["张三", "李四", "王五", "赵六", "田七", "大八", "九九"];
var timer;
//
inputs[0].onclick = function () {
window.clearInterval(timer);
timer = window.setInterval(function () {
var index = window.parseInt(Math.random() * arr.length);
h2[0].innerHTML = arr[index];//该处出现错误==
}, 10);
}
inputs[1].onclick = function () {
window.clearInterval(timer);
}
}
</script>
</head>
<body>
<h2>点击抽奖</h2>
<input type="button" value="点击开始">
<input type="button" value="点击停止">
</body>
</html>
运行效果;