题目：在页面中接收一个用户输入的数字，并判断该数是否是质数。
<script type="text/javascript">
/*
质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。
*/
const num = prompt('请输入一个大于1的整数:');
//判断这个值是否合法
if (num <= 1) {
alert('该值不合法！');
} else {
//先用flag标志位，来保存当前的数的状态
//默认当前num是质数
let flag = true;
//判断num是否是质数
//获取2-num之间的数
for (let i = 2; i < num; i++) {
//console.log(i);
//判断num是否能被i整除
if (num % i == 0) {
//一旦发现：如果num能被i整除，则说明num一定不是质数，
//此时：设置flag为false，然后跳出 for 循环
flag = false;
break;
}
}
//如果num是质数则输出
if (flag) {
alert(num + '是质数！！！');
} else {
alert('这个不是质数');
}
}
</script>
题目：打印 1~100 之间的所有质数
<script type="text/javascript">
/*
* 打印出1-100之间所有的质数
*/
//打印2-100之间所有的数
for (let i = 2; i <= 100; i++) {
//创建一个布尔值，用来保存结果，默认i是质数
let flag = true;
//判断i是否是质数
//获取到2-i之间的所有的数
for (let j = 2; j < i; j++) {
//判断i是否能被j整除
if (i % j == 0) {
//如果进入判断则证明i不是质数,修改flag值为false
flag = false;
}
}
//如果是质数，则打印i的值
if (flag) {
console.log(i);
}
}
</script>
题目：99 乘法表
<script type="text/javascript">
/*
* 1.打印99乘法表
* 1*1=1
* 1*2=2 2*2=4
* 1*3=3 2*3=6 3*3=9
* 1*4=4 2*4=8 3*4=12 4*4=16
* ....9*9=81
*
* 2.打印出1-100之间所有的质数
*/
//创建外层循环，用来控制乘法表的高度
for (let i = 1; i <= 9; i++) {
//创建一个内层循环来控制图形的宽度
for (let j = 1; j <= i; j++) {
document.write('<span>' + j + '*' + i + '=' + i * j + '</span>');
}
//输出一个换行
document.write('<br />');
}
</script>
题目：判断101-200之间有多少个素数，并输出所有素数（只能被1和它本身整除的自然数为素数
var count=0;
for(var i=101;i<200;i+=2){//偶数能被2整除，肯定不是素数
for(var j=2;j<=i;j++){
if(i%j==0 && i!=j) break;//结束内层循环，外层的i肯定不是素数
else if(i%j==0){//或者条件写 i==j都行
console.log(i);//打印该素数
count++;
}
}
}
console.log( count);//count=21
题目：打印字符串的占位长度
提示：一个英文占一个位置，一个中文占两个位置。
思路：判断该字符是否在 0-127 之间（在的话是英文，不在是非英文）。
<script>
// sort(); 底层用到了charCodeAt();
var str = 'I love my country!我你爱中国！';
//需求：求一个字符串占有几个字符位。
//思路；如果是英文，站一个字符位，如果不是英文占两个字符位。
//技术点：判断该字符是否在0-127之间。（在的话是英文，不在是非英文）
alert(getZFWlength(str));
alert(str.length);
//定义方法：字符位
function getZFWlength(string) {
//定义一个计数器
var count = 0;
for (var i = 0; i < string.length; i++) {
//对每一位字符串进行判断，如果Unicode编码在0-127，计数器+1；否则+2
if (string.charCodeAt(i) < 128 && string.charCodeAt(i) >= 0) {
count++;
} else {
count += 2;
}
}
return count;
}
</script>
题目：将一个正整数分解质因数。例如：输入90,打印出90=233*5
/*
对n进行分解质因数，应先找到一个最小的质数k，然后按下述步骤完成：
1.如果这个质数恰等于n，则说明分解质因数的过程已经结束，打印出即可。
2.如果n不等于k，k能被n整除，则应打印出k的值，并用n除以k的商,作为新的正整数n,重复执行第一步。
提示：如果一个自然数能写成两个自然数的乘积，那么这两个自然数就叫作原来那个数的因数。
*/
function divide(num){
if(typeof num != 'number'){
console.log("Please input one number");
return;
}
var result=num+"="
var k=2;
while(k!=num){
if(num%k==0){
result+=k+"*";
num=num/k;
k=1;//因为if后面有k++，之后起始值还是k=2
}
k++;
}
result+=k;
console.log(result);
}
divide(90);
divide(9);
题目：求任意两个正整数的最大公约数(GCD)和最小公倍数(LCM)
function deal(num1,num2){
num1=parseInt(num1);
num2=parseInt(num2);
var a=num1,b=num2,c=0;
while(b!=0){
c=a%b;//c为两个数的余数
a=b;//被除数作为新的除数
b=c;//余数作为新的被除数
}
var gcd=a;//此时的除数就是最大公约数
var lcm=num1*num2/gcd;//最小公倍数
console.log(num1+"和"+num2+"的最大公约数是"+gcd+",最小公倍数是"+lcm);
}
deal(25,10);
题目：求1000以内的完全数（若一个自然数，恰好与除去它本身以外的一切因数的和相等，这种数叫做完全数。）
例如，6=1+2＋3
28=1＋2＋4＋7＋14
496=1+2+4+8＋16+31+62＋124
先计算所选取的整数a(a的取值1~1000)的因数，将各因数累加于m，若m等于a，则可确认a为完全数。
//1000以内求完全数
var result="";
for(var i=1;i<1000;i++){
var sum=0;
//循环求因子，并且累加
for(var j=1;j<=i/2;j++){
if(i%j==0) sum+=j;
}
//判断因子之和是否等于数字本身
if(sum==i) result+=i+"\t";
}
console.log(result);
题目：计算累加阶乘
//方法一：
function addAndMul(num){
var addResult = 0;
var str = ''; //就是拼接的字符串 1!+2!+3!+4!+5!+6! =
for(var i=1;i<=num;i++){
//拼接字符串
str += i == num?i+'!=':i+'!+';
//计算i的阶乘
var mulResult = 1;
for(var j=i;j>0;j--){
mulResult *= j;
}
addResult += mulResult;
}
var result = str + addResult;
console.log(result);
}
addAndMul(6);
题目："smyhvaevaesmyh"查找字符串中所有 m 出现的位置。
var str2 = 'smyhvaevaesmyh';
for (var i = 0; i < str2.length; i++) {
//如果指定位置的符号=== "o"
//str2[i]
if (str2.charAt(i) === 'm') {
console.log(i);
}
}
题目：判断一个字符串中出现次数最多的字符，统计这个次数
<script>
var str2 = 'smyhvaevaesmyhvae';
//定义一个json，然后判断json中是够有该属性，如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
var json = {};
for (var i = 0; i < str2.length; i++) {
//判断：如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
var key = str2.charAt(i);
if (json[key] === undefined) {
json[key] = 1;
} else {
json[key] += 1;
}
}
console.log(json);
console.log('----------------');
//获取json中属性值最大的选项
var maxKey = '';
var maxValue = 0;
for (var k in json) {
// if(maxKey == ""){
// maxKey = k;
// maxValue = json[k];
// }else{
if (json[k] > maxValue) {
maxKey = k;
maxValue = json[k];
}
// }
}
console.log(maxKey);
console.log(maxValue);
</script>
题目：生成 [x, y]之间的随机整数
/*
* 生成两个整数之间的随机整数，并且要包含这两个整数
*/
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10);
随机点名
/*
* 生成两个整数之间的随机整数，并且要包含这两个整数
*/
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const arr = ['许嵩', '邓紫棋', '毛不易', '解忧邵帅'];
const index = getRandom(0, arr.length - 1); // 生成随机的index
console.log(arr[index]); // 随机点名
题目：模拟日历
要求每天打开这个页面，都能定时显示当前的日期。
代码实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style>
div {
width: 800px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px 'simsun';
}
</style>
</head>
<body>
<div></div>
<script>
//模拟日历
//需求：每天打开这个页面都能定时显示年月日和星期几
function getCurrentDate() {
//1.创建一个当前日期的日期对象
const date = new Date();
//2.然后获取其中的年、月、日和星期
const year = date.getFullYear();
const month = date.getMonth();
const hao = date.getDate();
const week = date.getDay();
// console.log(year+" "+month+" "+hao+" "+week);
//3.赋值给div
const arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const div = document.getElementsByTagName('div')[0];
return '今天是：' + year + '年' + (month + 1) + '月' + hao + '日 ' + arr[week];
}
const div = document.getElementsByTagName('div')[0];
div.innerText = getCurrentDate();
</script>
</body>
</html>
实现效果：
题目：发布会倒计时
实现思路：
-
设置一个定时器，每间隔1毫秒就自动刷新一次div的内容。
-
核心算法：输入的时间戳减去当前的时间戳，就是剩余时间（即倒计时），然后转换成时分秒。
代码实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style>
div {
width: 1210px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px 'simsun';
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.getElementsByTagName('div')[0];
var timer = setInterval(() => {
countDown('2022/02/03 11:20:00');
}, 1);
function countDown(myTime) {
var nowTime = new Date();
var future = new Date(myTime);
var timeSum = future.getTime() - nowTime.getTime(); //获取时间差：发布会时间减去此刻的毫秒值
var day = parseInt(timeSum / 1000 / 60 / 60 / 24); // 天
var hour = parseInt((timeSum / 1000 / 60 / 60) % 24); // 时
var minu = parseInt((timeSum / 1000 / 60) % 60); // 分
var sec = parseInt((timeSum / 1000) % 60); // 秒
var millsec = parseInt(timeSum % 1000); // 毫秒
//细节处理：所有的时间小于10的时候，在前面自动补0，毫秒值要补双0（比如如，把 8 秒改成 08 秒）
day = day < 10 ? '0' + day : day; //day小于10吗？如果小于，就补0；如果不小于，就是day本身
hour = hour < 10 ? '0' + hour : hour;
minu = minu < 10 ? '0' + minu : minu;
sec = sec < 10 ? '0' + sec : sec;
if (millsec < 10) {
millsec = '00' + millsec;
} else if (millsec < 100) {
millsec = '0' + millsec;
}
// 兜底处理
if (timeSum < 0) {
div.innerHTML = '距离苹果发布会还有00天00小时00分00秒000毫秒';
clearInterval(timer);
return;
}
// 前端要显示的文案
div.innerHTML = '距离苹果发布会还有' + day + '天' + hour + '小时' + minu + '分' + sec + '秒' + millsec + '毫秒';
}
</script>
</body>
</html>
实现效果：
Moment.js
Moment.js 是一个轻量级的JavaScript时间库，我们可以利用它很方便地进行时间操作，提升开发效率。
- 中文官网：http://momentjs.cn/
使用举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script>
// 按照指定的格式，格式化当前时间
console.log(moment().format('YYYY-MM-DD HH:mm:ss')); // 打印结果举例：2020-06-12 16:38:38
console.log(typeof moment().format('YYYY-MM-DD HH:mm:ss')); // 打印结果：string
// 按照指定的格式，格式化指定的时间
console.log(moment('2020/06/12 18:01:59').format('YYYY-MM-DD HH:mm:ss')); // 打印结果：2020-06-12 18:01:59
// 按照指定的格式，获取七天后的时间
console.log(moment().add(7, 'days').format('YYYY-MM-DD hh:mm:ss')); // 打印结果举例：2020-06-19 04:43:56
</script>
</body>
</html>
题目：翻转数组
const arr = [10, 20, 30, 40, 50]; // 原始数组
const newArr = []; // 翻转后的数组
for (let i = 0; i < arr.length; i++) {
newArr[i] = arr[arr.length - i - 1];
}
console.log(JSON.stringify(newArr));
题目：冒泡排序
思路：
1.比较相邻的元素。如果第一个比第二个大，就需要互相交换。
2.对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
3.针对所有的元素重复以上的步骤，除了最后一个。
4.持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
const arr = [20, 10, 50, 30, 40];
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(JSON.stringify(arr));
题目：选择排序
思路： 第一次从待排序的数组元素中选出最小的一个元素，存放在序列的起始位置，然后再从剩余 的未排序元素中寻找到最小元素，然后放到已排序的序列的末尾。以此类推，直到全部待排序的数 据元素的个数为零。选择排序是不稳定的排序方法。
let arr=[15,32,6,3,46,2,14,5,1];
let selectSort=(arr)=>{
for(i=0;i<arr.length-1;i++){
let temp=i;
for(j=i+1;j<arr.length;j++){
//当前项<前一项 arr[j]表示当前项 arr[temp]前一项
if(arr[j]<arr[temp]){
let swap = arr[j];
arr[j]=arr[temp];
arr[temp]=swap;
}
}
}
return arr;
}
console.log(selectSort(arr));
题目：插入排序
思路：
插入算法把要排序的数组分成两部分：第一部分包含了这个数组的所有元素，但将最后一个元素
除外（让数组多一个空间才有插入的位置），而第二部分就只包含这一个元素（即待插入元素）。在
第一部分排序完成后，再将这个最后元素插入到已排好序的第一部分中。
插入排序的基本思想是：每步将一个待排序的记录，按其值的大小插入前面已经排序的数据中适
当位置上，直到全部插入完为止。
let arr=[12,5,3,7,8,1,6,4];
let insertSort=(arr)=>{
for(i=0;i<arr.length-1;i++){ //n-1个数已经排好序
for(j=i+1;j>0;j--){ //n个数插入到前面的有序数列中
if(arr[j]>arr[j-1]){ //后一项小于前一项，需要交换位置
let temp=arr[j];
arr[j]=arr[j-1];
arr[j-1]=temp;
}
}
}
return arr
}
console.log(insertSort(arr));
题目：数组最大差值
Array.prototype.outputMaxPrice = function outputMaxPrice (array) {
/* 求一组数中最大值和最小值直接使用内置对象函数Math中的min（）和max（）方法即可。
注意，apply方法的第二个参数必须是一个数组，第二个参数用来替换原函数的参数
apply用于更改this指向，但这道题我们是不需要的，我们只需要将math.max及math.min应用到数组上即可 */
const item1 = Math.max.apply( null, array );
const item2 = Math.min.apply( null, array );
// const item1 = Math.max(10,5,11,7,8,9);
// const item2 = Math.min(10,5,11,7,8,9);
return item1 - item2;
}
const array = new Array;//创建实例
var arr = [10,5,11,7,8,9]
var result = array.outputMaxPrice (arr) // 6
console.log(result);
题目：字符串去重
<script>
var str="aaabccdeeeeeeff";
var str1=str.split("");
var a=[];
for(i=0;i<str1.length;i++) {
a.push(str1[i]);
var count = 1;
for (k = i; k < str1.length - 1; k++) {
if (str1[i] == str1[k + 1]) {
count++;
str1.splice(k + 1, 1);
k--;
}
}
}
console.log(a);
题目：将数组中的数字按照从小到大排序
let arr = [5, 2, 11, 3, 4, 1];
// 自定义排序规则：升序排列
let result = arr.sort((a, b) => a - b);
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
题目：将数组从小到大排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let dataList = [
{
title: '品牌鞋子，高品质低价入手',
publishTime: 200,
},
{
title: '不是很贵，但是很暖',
publishTime: 100,
},
{
title: '无法拒绝的美食，跟我一起吃',
publishTime: 300,
},
];
console.log('排序前的数组：' + JSON.stringify(dataList));
// 将dataList 数组，按照 publishTime 字段，从小到大排序。（会改变原数组）
dataList.sort((a, b) => parseInt(a.publishTime) - parseInt(b.publishTime));
console.log('排序后的数组：' + JSON.stringify(dataList));
</script>
</body>
</html>
打印结果：
排序前的数组：[
{"title":"品牌鞋子，高品质低价入手","publishTime":200},
{"title":"不是很贵，但是很暖","publishTime":100},
{"title":"无法拒绝的美食，跟我一起吃","publishTime":300}
]
排序后的数组：[
{"title":"不是很贵，但是很暖","publishTime":100},
{"title":"品牌鞋子，高品质低价入手","publishTime":200},
{"title":"无法拒绝的美食，跟我一起吃","publishTime":300}
]
map 方法：
题目：有一个已知的数组 arr1，我要求让 arr1 中的每个元素的值都加 10，这里就可以用到 map 方法。
const arr1 = [1, 3, 6, 2, 5, 6];
const arr2 = arr1.map(item => {
return item + 10; //让arr1中的每个元素加10
});
console.log(arr2); // 数组 arr2 的值：[11, 13, 16, 12, 15, 16]
题目：将 A 数组中某个属性的值，存储到 B 数组中
const arr1 = [
{ name: '千古壹号', age: '28' },
{ name: '许嵩', age: '32' },
];
// 将数组 arr1 中的 name 属性，存储到 数组 arr2 中
const arr2 = arr1.map(item => item.name);
// 将数组 arr1 中的 name、age这两个属性，改一下“键”的名字，存储到 arr3中
const arr3 = arr1.map(item => ({
myName: item.name,
myAge: item.age,
})); // 将数组 arr1 中的 name 属性，存储到 数组 arr2 中
console.log('arr1:' + JSON.stringify(arr1));
console.log('arr2:' + JSON.stringify(arr2));
console.log('arr3:' + JSON.stringify(arr3));
打印结果：
arr1:[{"name":"千古壹号","age":"28"},{"name":"许嵩","age":"32"}]
arr2:["千古壹号","许嵩"]
arr3:[{"myName":"千古壹号","myAge":"28"},{"myName":"许嵩","myAge":"32"}]
map 的应用场景，主要就是以上两种。
filter()方法
题目：找出数组 arr1 中大于 4 的元素，返回一个新的数组
let arr1 = [1, 3, 6, 2, 5, 6];
let arr2 = arr1.filter(item => {
if (item > 4) {
return true; // 将arr1中大于4的元素返回，组成新的数组
}
return false;
});
console.log(JSON.stringify(arr1)); // 打印结果：[1,3,6,2,5,6]
console.log(JSON.stringify(arr2)); // 打印结果：[6,5,6]
题目：获取对象数组 arr1 中指定类型的对象，放到数组 arr2 中
const arr1 = [
{ name: '许嵩', type: '一线' },
{ name: '周杰伦', type: '退居二线' },
{ name: '邓紫棋', type: '一线' },
];
const arr2 = arr1.filter((item) => item.type == '一线'); // 筛选出一线歌手
console.log(JSON.stringify(arr2));
题目：splice()练习：数组去重
//创建一个数组
const arr = [1, 2, 3, 2, 2, 1, 3, 4, 2, 5];
//去除数组中重复的数字
//获取数组中的每一个元素
for (let i = 0; i < arr.length; i++) {
/*获取当前元素后的所有元素*/
for (let j = i + 1; j < arr.length; j++) {
//console.log("---->"+arr[j]);
//判断两个元素的值是否相等
if (arr[i] == arr[j]) {
//如果相等则证明出现了重复的元素，则删除j对应的元素
arr.splice(j, 1);
//当删除了当前j所在的元素以后，后边的元素会自动补位
//此时将不会再比较这个元素，我们需要再比较一次j所在位置的元素
//使j自减
j--;
}
}
}
console.log(arr);
题目：join() 练习
问题：将一个字符串数组输出为|分割的形式，比如“千古|宿敌|素颜”。使用两种方式实现。
方式 1：（不推荐）
var arr = ['千古', '宿敌', '素颜'];
var str = arr[0];
var separator = '|';
for (var i = 1; i < arr.length; i++) {
str += separator + arr[i]; //从第1个数组元素开始，每个元素前面加上符号"|"
}
console.log(str);
输出结果：
不推荐这种方式，因为：由于字符串的不变性，str 拼接过多的话，容易导致内存溢出（很多个 str 都堆放在栈里）。
方式 2：（推荐。通过 array 数组自带的 api 来实现）
var arr = ['千古', '宿敌', '素颜'];
console.log(arr.join('|'));
结果：
题目：reverse() 练习
题目：将一个字符串数组的元素的顺序进行反转，使用两种种方式实现。提示：第 i 个和第 length-i-1 个进行交换。
方式 1：
function reverse(array) {
var newArr = [];
for (var i = array.length - 1; i >= 0; i--) {
newArr[newArr.length] = array[i];
}
return newArr;
}
方式 2：（算法里比较常见的方式）
function reverse(array) {
for (var i = 0; i < array.length / 2; i++) {
var temp = array[i];
array[i] = array[array.length - 1 - i];
array[array.length - 1 - i] = temp;
}
return array;
}
题目：编写一个方法去掉一个数组中的重复元素
// 编写一个方法 去掉一个数组的重复元素
var arr = [1, 2, 3, 4, 5, 2, 3, 4];
console.log(arr);
var aaa = fn(arr);
console.log(aaa);
//思路：创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加了。
function fn(array) {
var newArr = [];
for (var i = 0; i < array.length; i++) {
//开闭原则
var bool = true;
//每次都要判断新数组中是否有旧数组中的值。
for (var j = 0; j < newArr.length; j++) {
if (array[i] === newArr[j]) {
bool = false;
}
}
if (bool) {
newArr[newArr.length] = array[i];
}
}
return newArr;
}
题目：喇叭花数是一个三位数，其每一位数字的阶乘之和恰好等于它本身，即abc＝a! + b! + c!，其中abc表示一个三位数。请找出所有的喇叭花数。
// 递归函数：计算一个数的阶乘
function factorial(n) {
// 递归出口：如果计算1的阶乘，就不用递归了
if (n == 1) return 1;
// 开始递归：如果当前这个 n 不是1，就返回 n * (n-1)!
return n * factorial(n - 1);
}
// 穷举法，从100到999遍历，寻找喇叭花数
for (let i = 100; i <= 999; i++) {
// 将数字i转为字符串
const i_str = i.toString();
// abc分别表示百位、十位、个位
const a = Number(i_str[0]);
const b = Number(i_str[1]);
const c = Number(i_str[2]);
// 根据喇叭花数的条件进行判断
if (factorial(a) + factorial(b) + factorial(c) == i) {
console.log(i);
}
}
题目：斐波那契数列
斐波那契数列是这样一个数列：1、1、2、3、5、8、13、21、34......最早是由意大利数学家斐波那契开始研究的。它的规律是：下标为0和1的项，值为1；从下标为2的项开始，每一项等于前面两项之和。
提问：请找出斐波那契数列的前10项。
// 递归函数：返回斐波那契数列中下标为n的那一项的值
function fib(n) {
// 下标为0和1的项，值为1
if (n == 0 || n == 1) return 1;
// 从下标为2的项开始，每一项等于前面两项之和
return fib(n - 1) + fib(n - 2);
}
// 循环语句：打印斐波那契数列的前10项
for (let i = 0; i < 15; i++) {
console.log(fib(i));
}
题目：1-100 之间 逢7过 数字中包含7 或者 7的倍数都要跳过
for(var i = 1;i <= 100;i++){
// 不属于 7的倍数 & i/10的余数为7的 展示数据 将 i/10 转换为int，余数都为整数，并且全不等来判断
if(i % 7 != 0 && i % 10 != 7 && parseInt (i / 10) !== 7){
console.log(i);
continue;
}
题目：匀速动画的封装：每间隔30ms，移动盒子10px
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box1 {
margin: 0;
padding: 5px;
height: 300px;
background-color: #ddd;
position: relative;
}
button {
margin: 5px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 195px;
top: 40px;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 0;
top: 150px;
}
</style>
</head>
<body>
<div class="box1">
<button>运动到 left = 200px</button>
<button>运动到 left = 400px</button>
<div class="box2"></div>
<div class="box3"></div>
</div>
<script>
var btnArr = document.getElementsByTagName("button");
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
//绑定事件
btnArr[0].onclick = function () {
//如果有一天我们要传递另外一个盒子，那么我们的方法就不好用了
//所以我们要增加第二个参数，被移动的盒子本身。
animate(box2, 200);
animate(box3, 200);
}
btnArr[1].onclick = function () {
animate(box2, 400);
animate(box3, 400);
}
//【重要】方法的封装：每间隔30ms，将盒子向右移动10px
function animate(ele, target) {
//要用定时器，先清除定时器
//一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突
//我们可以把定时器本身，当成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
//目标值如果大于当前值取正，目标值如果小于当前值取负
var speed = target > ele.offsetLeft ? 10 : -10; //speed指的是步长
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
//移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了
//因为步长有正有负，所有转换成绝对值来比较
if (Math.abs(val) < Math.abs(speed)) { //如果val小于步长，则直接到达目的地；否则，每次移动一个步长
ele.styl e.left = target + "px";
clearInterval(ele.timer);
} else {
ele.style.left = ele.offsetLeft + speed + "px";
}
}, 30)
}
</script>
</body>
</html>
题目：根据浏览器的可视宽度，给定不同的背景的色
函数封装：获取浏览器的宽高（可视区域）
//函数封装：获取屏幕可视区域的宽高
function client() {
if (window.innerHeight !== undefined) {
//ie9及其以上的版本的写法
return {
"width": window.innerWidth,
"height": window.innerHeight
}
} else if (document.compatMode === "CSS1Compat") {
//标准模式的写法（有DTD时）
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
} else {
//没有DTD时的写法
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
//上面的封装好的方法
<script src="tools.js"></script>
<script>
//需求：浏览器每次更改大小，判断是否符合某一标准然后给背景上色。
// // >960红色，大于640小于960蓝色，小于640绿色。
window.onresize = fn; //页面大小发生变化时，执行该函数。
//页面加载的时候直接执行一次函数，确定浏览器可视区域的宽，给背景上色
fn();
//封装成函数，然后指定的时候去调用和绑定函数名
function fn() {
if (client().width > 960) {
document.body.style.backgroundColor = "red";
} else if (client().width > 640) {
document.body.style.backgroundColor = "blue";
} else {
document.body.style.backgroundColor = "green";
}
}
</script>
</body>
</html>