随笔分类 - 前端 合集
摘要：源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM通过class属性设置样式</title> <style> .active{ background-color: red; } </style>
阅读全文
摘要：思路： 思路： * 1、设定一个imagesSrcList集合，存放图片存储路径 * 2、通过DOM获取img标签 * 3、通过DOM获取所有button按钮标签 * 4、循环遍历btns，设置onclick点击事件函数，更换图片路径 源码： <!DOCTYPE html> <html lang="
阅读全文
摘要：正则表达式可以用来匹配字符串。 通过正则表达式，可以实现字符串的截取或按规则替换和验证字符串内容。 例1:验证邮箱格式 // var reg = new RegExp("123");//创建正则表达式 // var reg = /123/;//简写 var str = "xiaohu@163.com
阅读全文
摘要：<script> var n =0; setInterval(function (){ console.log(n++); },1000); </script>
阅读全文
摘要：// 随机获取一个名字，打印在控制台上 var list = ["钢铁侠","绿巨人","美国队长","蜘蛛侠","雷神"]; var index = Math.floor(Math.random()*list.length); console.log(list[index]);
阅读全文
摘要：初始化一个空数组，判断下一个元素是否在当前数组中，不存在则添加到当前数组中。 // 数组去重 var arr = [12, 34, 34, 342, 345, 34, 123, 345, 45, 12] var newArr = arr.reduce(function (prev, next) {
阅读全文
摘要：// 获取数组中最大值 var arr = [134798, 3478973, 12, 345, 355, 425, 1342356, 3425566, 7908798] var max = arr.reduce(function (prev, next) { return Math.max(pre
阅读全文
摘要：将0当做reduce回调函数中的初始值，然后依次累加 // 数组求和 var arr = [1, 2, 3, 4, 5] var total = arr.reduce(function (prev, next) { return prev + next }, 0) console.log(total
阅读全文
摘要：思路，两者累加求和、累乘求积思路一样，如下代码套路： 累加求和 var x = 0; var i; for (i=1; i<=10000; i++) { x = x + i; } x; // 50005000 累乘求积 var x = 1; var i; for (i=1;i<11;i++){ x=
阅读全文
摘要：'use strict'; var height = parseFloat(prompt('请输入身高(m):')); var weight = parseFloat(prompt('请输入体重(kg):')); var bmi = weight/(height*height); console.l
阅读全文
摘要：效果展示： 代码演示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>技术交
阅读全文
摘要：效果展示： 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body, html{ width:
阅读全文
摘要：效果预览： 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } #app{ } #home{ wid
阅读全文
摘要：效果演示： 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> /*css初始化*/ body, div, ul,
阅读全文
摘要：效果演示： 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> body, ul, li { margin: 0;
阅读全文
摘要：效果展示： 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动模型</title> <style> #bodydiv{ width: 300px; height: 300px; border:
阅读全文
摘要：效果演示： 代码演示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <meta charset="utf-8" /> </head> <body> <p style="font-size:60px">
阅读全文
摘要：效果演示: 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <style> #list li { list-style-type: none; width: 100
阅读全文
摘要：效果演示： 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <style> #list li { list-style-type: none; width: 100
阅读全文
浙公网安备 33010602011771号