孔祥博的个人博客 http://www. Live for feeling more beautiful Mon, 07 Dec 2020 07:02:37 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.1.8 http://www./wp-content/uploads/2017/12/cropped-timg-32x32.jpg 孔祥博的个人博客 http://www. 32 32 三级联动vue实现 http://www./?p=3094 Thu, 22 Oct 2020 07:00:52 +0000 http://www./?p=3094 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> .div1 { width: 150px; height: 30px; line-height: 30px; } </style> </head> <body> <div id="example"> <select class="div1" v-model="prov"> <option v-for="option in arr" :value="option.name"> {{ option.name }} </option> </select> <select class="div1" v-model="city"> <option v-for="option in cityArr" :value="option.name"> {{ option.name }} </option> </select> <select class="div1" v-model="district" v-if="district"> <option v-for="option in districtArr" :value="option.name"> {{ option.name }} </option> </select> </div> <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript" src="/js/items.js"></script> <script> var vm = new Vue({ el: '#example', data: { arr: arrAll, prov: '厨房', city: '电路', district: '灯具', cityArr: [], districtArr: [] }, methods: { updateCity: function () { for (var i in this.arr) { var obj = this.arr[i]; if (obj.name == this.prov) { this.cityArr = obj.sub; break; } } this.city = this.cityArr[1].name; }, updateDistrict: function () { for (var i in this.cityArr) { var obj = this.cityArr[i]; if (obj.name == this.city) { this.districtArr = obj.sub; break; } } if (this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) { this.district = this.districtArr[1].name; } else { this.district = ''; } } }, beforeMount: function () { this.updateCity(); this.updateDistrict(); }, watch: { prov: function () { this.updateCity(); this.updateDistrict(); }, city: function () { this.updateDistrict(); } } }) </script> </body> </html>
var arrAll =
		[
			{name: "选择项目", sub: [{name: "请选择"}], type: 1},
			{
				name: "厨房",
				sub: [
					{name: "请选择", sub: []},
					{
						name: "电路",
						sub: [{name: "请选择"}, {name: "灯具"},{name: "电闸"},{name: "房屋停电"},{name: "开关"},{name: "排风扇"},{name: "插座"},{name: "线路"},],
						type: 0
					},{
						name: "电器",
						sub: [{name: "请选择"}, {name: "电磁炉"},{name: "油烟机"},{name: "热水器"},{name: "燃气灶"},{name: "微波炉"}],
						type: 0
					},{
						name: "家具",
						sub: [{name: "请选择"}, {name: "电热水壶"}],
						type: 0
					},{
						name: "家居",
						sub: [{name: "请选择"}, {name: "桌台"}],
						type: 0
					},{
						name: "疏通",
						sub: [{name: "请选择"}, {name: "地漏疏通"},{name: "洗池疏通"},{name: "管道疏通"}],
						type: 0
					},{
						name: "水暖",
						sub: [{name: "请选择"}, {name: "闸门"},{name: "水龙头"},{name: "水管"},{name: "主管道"},{name: "暖气"}],
						type: 0
					},{
						name: "锁类",
						sub: [{name: "请选择"}, {name: "机械锁"},{name: "门锁"}],
						type: 0
					},{
						name: "主体",
						sub: [{name: "请选择"}, {name: "窗户"}],
						type: 0
					},
				], type: 1
			},
			{
				name: "客厅",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "客厅卫生间",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "客厅阳台",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "卧室",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "卧室阳台",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "卧室卫生间",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
		]
]]>
动画相关整理 http://www./?p=3089 Thu, 22 Oct 2020 05:40:01 +0000 http://www./?p=3089 animation

animation是一个简写属性,用于设置六个动画属性:
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。infinite || forwards
animation-direction	规定是否应该轮流反向播放动画。

默认值:none 0 ease 0 1 normal

transition

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transform

none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换,使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换,使用 16 个值的 4x4 矩阵。	
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。	
translateX(x)	定义转换,只是用 X 轴的值。	测试
translateY(y)	定义转换,只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换,只是用 Z 轴的值。	
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。	
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)	定义 2D 旋转,在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。	
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

1、背对屏幕不可见:backface-visibility: hidden;

2、开启3d空间,给3d效果元素的父元素设置:transform-style: preserve-3d;

3、缩放: 元素缩放的系数,scale(宽度系数,高度的系数)   transform: scale(1.5,2);

4、斜切:skew(沿x轴斜切,沿y轴斜切)   transform: skew(0deg,0deg);

5、景深透视属性: 是一个近大远小的效果,视觉比较合理的取值范围800px-1500px
                             给效果元素的父元素设置该属性   perspective: 1000px;

6、z轴的位移:正值向屏幕外,负值向屏幕里   transform: translateZ(30px);

]]>
金钱校验 完美公式 http://www./?p=3084 Mon, 12 Oct 2020 08:59:27 +0000 http://www./?p=3084 money: (rule, value, callback) => { value = value ? value.toString().replace(/,/g, '') : '' if (value && !/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) { // eslint-disable-next-line standard/no-callback-literal callback('请输入正确的金额,精度不超过小数点后两位') } else { callback() } }, ]]> svg4 http://www./?p=3062 Mon, 12 Oct 2020 05:29:51 +0000 http://www./?p=3062 基本图形
polyline 折线
-points 空格或者逗号

polygon 多边形

path 路径
-d 路径
M起始点 L后续点 Z自动闭合
H水平绘制 V垂直绘制 A
M50 100H200
-C S Q T

大写是绝对坐标小写是相对坐标
A命令绘制弧形
X半径
Y半径
角度
弧长
-0小弧 1大弧
方向
-0逆时针 1顺时针
终点X坐标
终点Y坐标 ]]>
svg3 http://www./?p=3049 Mon, 12 Oct 2020 02:15:51 +0000 http://www./?p=3049 全部改写成动态数据渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        height: 100vh;
    }
    </style>
    <script type="text/javascript">
    window.onload = () => {
        let svgNS = 'http://www.w3.org/2000/svg'
        let body = document.getElementsByTagName('body')[0]

        // 中心坐标
        let centerX = 600
        let centerY = 480

        let data = {
            centerNode: { text: '大厂' },
            otherNode: [
                { x: 400, y: 400, text: '字节' },
                { x: 200, y: 500, text: '阿里' },
                { x: 800, y: 700, text: '腾讯' },
                { x: 350, y: 700, text: '百度' },
                { x: 650, y: 300, text: '快手' },
                { x: 950, y: 450, text: '滴滴' }
            ]
        }


        let fragment = document.createDocumentFragment()
        let oSvg = createTag('svg', { 'xmlns': svgNS, 'width': '100%', 'height': '100%' })

        function addLine(item) {
            let g1 = createTag('g', { 'style': 'cursor:pointer;' })
            let line1 = createTag('line', { 'x1': item.x, 'y1': item.y, 'x2': centerX, 'y2': centerY, 'stroke': 'black', 'stroke-width': '1' })
            let line11 = createTag('line', { 'x1': item.x, 'y1': item.y, 'x2': centerX, 'y2': centerY, 'stroke': 'transparent', 'stroke-width': '6' })
            let rect1 = createTag('rect', { 'width': '20', 'height': '20', 'x': (centerX + item.x) / 2 - 10, 'y': (centerY + item.y) / 2 - 10, 'rx': '5', 'fill': '#ccc', 'stroke': 'black', 'stroke-width': '1' })
            let text1 = createTag('text', { 'x': (centerX + item.x) / 2, 'y': (centerY + item.y) / 2 + 6, 'font-size': '16', 'text-anchor': 'middle' })
            text1.innerHTML = '?'
            g1.appendChild(line1)
            g1.appendChild(line11)
            g1.appendChild(rect1)
            g1.appendChild(text1)
            oSvg.appendChild(g1)
        }

        function addOtherTag(item) {
            let g2 = createTag('g', { 'style': 'cursor:pointer;' })
            let circle2 = createTag('circle', { 'r': '30', 'cx': item.x, 'cy': item.y, 'fill': 'white', 'stroke': 'blue', 'stroke-width': '2' })
            let text2 = createTag('text', { 'x': item.x, 'y': item.y + 8, 'font-size': '16', 'text-anchor': 'middle' })
            text2.innerHTML = item.text
            g2.appendChild(circle2)
            g2.appendChild(text2)
            oSvg.appendChild(g2)
        }

        function addTag() {
            let g3 = createTag('g', { 'style': 'cursor:pointer;' })
            let circle3 = createTag('circle', { 'r': '50', 'cx': centerX, 'cy': centerY, 'fill': 'white', 'stroke': 'red', 'stroke-width': '2' })
            let text3 = createTag('text', { 'x': centerX, 'y': centerY + 8, 'font-size': '16', 'text-anchor': 'middle' })
            text3.innerHTML = data.centerNode.text
            g3.appendChild(circle3)
            g3.appendChild(text3)
            oSvg.appendChild(g3)
        }

        // 其他⚪和连线  
        data.otherNode.forEach((item, index) => {
            addLine(item)
            addOtherTag(item)
        })
        
        // 添加中心⚪
        addTag()
        fragment.appendChild(oSvg)
        body.appendChild(fragment)
    }

    function createTag(svgElm, attrObj) {
        let domObj = document.createElementNS('http://www.w3.org/2000/svg', svgElm)
        for (let item in attrObj) {
            domObj.setAttribute(item, attrObj[item])
        }
        return domObj
    }
    </script>
</head>

<body>
</body>

</html>

均匀分布各个○形

注意Math.sin里面传的需是弧度

// 中心坐标
        let centerX = 600
        let centerY = 480

        let data = {
            centerNode: { text: '大厂' },
            otherNode: [
                { text: '字节' },
                { text: '阿里' },
                { text: '腾讯' },
                { text: '百度' },
                { text: '快手' },
                { text: '滴滴' }
            ]
        }

        let circleNum = data.otherNode.length // 圆形数量
        console.log('圆形数量',circleNum)
        let angleNum = 360/circleNum   // 每个圆形占的角度
        console.log('圆形角度',angleNum)
        let othR = 160

        for(let i=0; i<circleNum; i++) {
            console.log(i)
            let y = Math.sin(i*angleNum*Math.PI/180)*othR + centerY
            let x = Math.cos(i*angleNum*Math.PI/180)*othR + centerX
            console.log(x,y)
            data.otherNode[i].x = x
            data.otherNode[i].y = y
        }
// 弹性公式
function startMove(elm,sr,er) {
        let nowR = sr 
        let overR = er
        elm.speed = 0     
        clearInterval(elm.timer)
        elm.timer = setInterval(()=>{
            elm.speed+= (overR-nowR)/7  // 弹性系数 速度更新1
            elm.speed*= 0.75   // 摩擦系数  速度更新2
            // console.log(elm.speed)
            if(Math.abs(overR-nowR)<=1 && Math.abs(elm.speed)<=1){
                clearInterval(elm.timer)
                elm.setAttribute('r',overR)
            }else{
                nowR+=elm.speed
                console.log(nowR)
                elm.setAttribute('r',nowR)
            }
        },30)
    }

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        height: 100vh;
    }
    </style>
    <script type="text/javascript">
    window.onload = () => {
        let svgNS = 'http://www.w3.org/2000/svg'
        let body = document.getElementsByTagName('body')[0]

        // 中心坐标
        let centerX = 600
        let centerY = 480

        let data = {
            centerNode: { text: '大厂' },
            otherNode: [
                { text: '字节' },
                { text: '阿里' },
                { text: '腾讯' },
                { text: '百度' },
                { text: '快手' },
                { text: '滴滴' }
            ]
        }

        let circleNum = data.otherNode.length // 圆形数量
        console.log('圆形数量', circleNum)
        let angleNum = 360 / circleNum // 每个圆形占的角度
        console.log('圆形角度', angleNum)
        let othR = 160

        for (let i = 0; i < circleNum; i++) {
            console.log(i)
            let y = Math.sin(i * angleNum * Math.PI / 180) * othR + centerY
            let x = Math.cos(i * angleNum * Math.PI / 180) * othR + centerX
            console.log(x, y)
            data.otherNode[i].x = x
            data.otherNode[i].y = y
        }



        let fragment = document.createDocumentFragment()
        let oSvg = createTag('svg', { 'xmlns': svgNS, 'width': '100%', 'height': '100%' })

        function addLine(item) {
            let g1 = createTag('g', { 'style': 'cursor:pointer;', 'class': 'lineStyle' })
            let line1 = createTag('line', { 'x1': item.x, 'y1': item.y, 'x2': centerX, 'y2': centerY, 'stroke': 'black', 'stroke-width': '1' })
            let line11 = createTag('line', { 'x1': item.x, 'y1': item.y, 'x2': centerX, 'y2': centerY, 'stroke': 'transparent', 'stroke-width': '6' })
            let rect1 = createTag('rect', { 'width': '20', 'height': '20', 'x': (centerX + item.x) / 2 - 10, 'y': (centerY + item.y) / 2 - 10, 'rx': '5', 'fill': '#ccc', 'stroke': 'black', 'stroke-width': '1' })
            let text1 = createTag('text', { 'x': (centerX + item.x) / 2, 'y': (centerY + item.y) / 2 + 6, 'font-size': '16', 'text-anchor': 'middle' })
            text1.innerHTML = '?'
            g1.appendChild(line1)
            g1.appendChild(line11)
            g1.appendChild(rect1)
            g1.appendChild(text1)
            oSvg.appendChild(g1)
        }

        function addOtherTag(item) {
            let g2 = createTag('g', { 'style': 'cursor:pointer;', 'class': 'circleStyle' })
            let circle2 = createTag('circle', { 'r': 30, 'cx': item.x, 'cy': item.y, 'fill': 'white', 'stroke': 'blue', 'stroke-width': '2' })
            let text2 = createTag('text', { 'x': item.x, 'y': item.y + 8, 'font-size': '16', 'text-anchor': 'middle' })
            text2.innerHTML = item.text
            g2.appendChild(circle2)
            g2.appendChild(text2)
            oSvg.appendChild(g2)
        }

        function addTag() {
            let g3 = createTag('g', { 'style': 'cursor:pointer;'})
            let circle3 = createTag('circle', { 'r': '50', 'cx': centerX, 'cy': centerY, 'fill': 'white', 'stroke': 'red', 'stroke-width': '2' })
            let text3 = createTag('text', { 'x': centerX, 'y': centerY + 8, 'font-size': '16', 'text-anchor': 'middle' })
            text3.innerHTML = data.centerNode.text
            g3.appendChild(circle3)
            g3.appendChild(text3)
            oSvg.appendChild(g3)
        }

        data.otherNode.forEach((item, index) => {
            addLine(item)
            addOtherTag(item)
        })
        // 添加中心⚪
        addTag()

        fragment.appendChild(oSvg)
        body.appendChild(fragment)

        bindTag()

    }

    function createTag(svgElm, attrObj) {
        let domObj = document.createElementNS('http://www.w3.org/2000/svg', svgElm)
        for (let item in attrObj) {
            domObj.setAttribute(item, attrObj[item])
        }
        return domObj
    }

    function bindTag() {
        let aLine = document.querySelectorAll('.lineStyle')
        let aCircle = document.querySelectorAll('.circleStyle')
        for (var i = 0; i < aLine.length; i++) {
            (function(i) {
                aLine[i].onmouseenter = function() {
                    this.getElementsByTagName('line')[0].setAttribute('stroke','blue')
                    this.getElementsByTagName('rect')[0].setAttribute('fill','orange')
                }
                aLine[i].onmouseleave = function() {
                    this.getElementsByTagName('line')[0].setAttribute('stroke','black')
                    this.getElementsByTagName('rect')[0].setAttribute('fill','#ccc')
                }
            })(i)
        }

        for(let i =0 ; i < aCircle.length; i++) {
            aCircle[i].onmouseenter = () => {
                startMove(aCircle[i].getElementsByTagName('circle')[0], 30, 40)
                let preNode = aCircle[i].previousElementSibling
                preNode.getElementsByTagName('line')[0].setAttribute('stroke','blue')
                preNode.getElementsByTagName('rect')[0].setAttribute('fill','orange')
            }
            aCircle[i].onmouseleave = () => {
                startMove(aCircle[i].getElementsByTagName('circle')[0], 40, 30)
                let preNode = aCircle[i].previousElementSibling
                preNode.getElementsByTagName('line')[0].setAttribute('stroke','black')
                preNode.getElementsByTagName('rect')[0].setAttribute('fill','#ccc')
            }
        }

    }

    function startMove(elm,sr,er) {
        let nowR = sr 
        let overR = er
        elm.speed = 0
        clearInterval(elm.timer)
        elm.timer = setInterval(()=>{
            elm.speed+= (overR-nowR)/7
            elm.speed*= 0.75
            // console.log(elm.speed)
            if(Math.abs(overR-nowR)<=1 && Math.abs(elm.speed)<=1){
                clearInterval(elm.timer)
                elm.setAttribute('r',overR)
            }else{
                nowR+=elm.speed
                console.log(nowR)
                elm.setAttribute('r',nowR)
            }
        },30)
    }

    </script>
</head>

<body>
</body>

</html>
]]>
svg2 http://www./?p=3033 Sun, 11 Oct 2020 13:00:43 +0000 http://www./?p=3033 <svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;"> <g style="cursor: pointer;"> <circle r="30" cx="100" cy="100" fill="none" stroke="blue" stroke-width="2"/> </g> <g style="cursor: pointer;"> <line x1="100" y1="100" x2="300" y2="180" stroke="black"></line> <rect width="20" height="20" x="190" y="130" rx="5" fill="white" stroke="black"></rect> <text x="200" y="146" font-size="16" text-anchor="middle">?</text> </g> <g style="cursor: pointer;"> <circle r="50" cx="300" cy="180" fill="none" stroke="red" stroke-width="2"/> </g> </svg>
<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;">
        <g style="cursor: pointer;">
           <line x1="100" y1="100" x2="300" y2="180" stroke="black" stroke-width="1"></line>
           <line x1="100" y1="100" x2="300" y2="180" stroke="none" stroke-width="4"></line>
           <rect width="20" height="20" x="190" y="130" rx="5" fill="#ccc" stroke="black" stroke-width="1"></rect> 
           <text x="200" y="146" font-size="16" text-anchor="middle">?</text>
        </g>
        <g style="cursor: pointer;">
           <circle r="30" cx="100" cy="100" fill="white" stroke="blue" stroke-width="2"/>
           <text x="100" y="108" font-size="16" text-anchor="middle">小王</text>    
        </g>
        <g style="cursor: pointer;">
           <circle r="50" cx="300" cy="180" fill="white" stroke="red" stroke-width="2"/> 
           <text x="300" y="188" font-size="16" text-anchor="middle">小李</text>
        </g>
    </svg>
创建元素

createElementNS
- 两个参数
- 命名空间,标签名
<script type="text/javascript">
        window.onload = () => {
            let svgNS = 'http://www.w3.org/2000/svg'
            let body = document.getElementsByTagName('body')[0]
            let oSvg = document.createElementNS(svgNS, 'svg')
            oSvg.setAttribute('xmlns', svgNS)
            oSvg.setAttribute('width', '100%')
            oSvg.setAttribute('height', '100%')
            body.appendChild(oSvg)
        }
</script>
封装一个createTag函数 来创建元素和属性
// 传入标签名,属性对象
function createTag(svgElm,attrObj) {
            let domObj = document.createElementNS('http://www.w3.org/2000/svg',svgElm)
            for(let item in attrObj){
                domObj.setAttribute(item, attrObj[item])
            }
            return domObj
        }
window.onload = () => {
            let svgNS = 'http://www.w3.org/2000/svg'
            let body = document.getElementsByTagName('body')[0]
            let fragment = document.createDocumentFragment()
            let oSvg = createTag('svg',{'xmlns':svgNS, 'width':'100%', 'height':'100%'})

            let g1 = createTag('g',{'style':'cursor: pointer;'})
            let line1 = createTag('line', {'x1':'100','y1':'100','x2':'300','y2':'180','stroke':'black','stroke-width':'1'})
            let line11 = createTag('line', {'x1':'100','y1':'100','x2':'300','y2':'180','stroke':'none','stroke-width':'4'})
            let rect1 = createTag('rect',{'width':'20','height':'20','x':'190','y':'130','rx':'5','fill':'#ccc','stroke':'black','stroke-width':'1'})
            let text1 = createTag('text',{'x':'200','y':'146','font-size':'16','text-anchor':'middle'})
            text1.innerHTML = '?'
            g1.appendChild(line1)
            g1.appendChild(line11)
            g1.appendChild(rect1)
            g1.appendChild(text1)
            oSvg.appendChild(g1)
            fragment.appendChild(oSvg)
            body.appendChild(fragment)
        }
成功改写成js创建模式
]]>
svg1 http://www./?p=3016 Sun, 11 Oct 2020 12:03:20 +0000 http://www./?p=3016 svg是基于xml的技术

svg命名空间 xmlns=”http://www.w3.org/2000/svg”

在html中引入svg

<img src="/html/xx.svg">
<div style="height:200px;width:200px; background:url(/html/xxx.svg) no-repeat"
<iframe src="/html/xxx.svg"></iframe>
//直接引svg
<svg xmlns="http://www.w3.org/2000/svg">
</svg>

基本图形:

circle
-cx cy r 横坐标 纵坐标 半径
-fill stroke stroke-width transparent none 填充颜色 边框颜色 边框宽度
-style 样式 style="fill:black;stroke:red;"

rect
-width height x y 宽度 高度 左上角坐标
-rx ry 圆角

line
-x1 y1 x2 y2
- stroke-opacity 线的透明度

<g>标签 里面的属性要是全部元素都具备的才可以 比如stroke
是一个容器(分组)标签,用来组合元素的
例子: 做个靶心 共用属性 transfrom="translate(100,100)"
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        height: 100vh;
    }
    </style>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;">
        <g id="g1" fill="white" stroke="black" stroke-width="2" transform="translate(200,200)">
            <circle r="100"/>
            <circle r="80"/>
            <circle r="60"/>
            <circle r="40"/>
            <circle r="20"/>
        </g>
        <circle r="5" cx="200" cy="200" fill="red" />
    </svg>
</body>
</html>
text 文字
x y text-anchor
font-size
text-anchor="middle" start end

image
x y width height
xlink:href
<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;">
        <circle r="80" cx="200" cy="200" fill="transparent" stroke="black" stroke-width="2"/>
        <text x="200" y="208" font-size="16px" text-anchor="middle" fill="red">我了个操</text>
    </svg>

]]>
Node5 服务器相关配置 http://www./?p=2986 Sat, 10 Oct 2020 02:54:24 +0000 http://www./?p=2986 const http = require('http') let server = http.createServer() server.on('request',(req,res)=>{ res.end('hello') }) server.listen(3000,'192.168.0.106',()=>{ console.log('running...') })
if(req.url.startsWith('/query') && req.method == "POST")
const http = require('http')
const path = require('path')
const fs = require('fs')

let readFile = (url,res) => {
	fs.readFile(path.join(__dirname,'www',url),'utf8',(err,fileContent)=>{
		if(err){
			res.end('server error')
		}else{
			res.end(fileContent)
		}
	})
}

http.createServer((req,res)=>{
	if(req.url.startsWith('/index')){
		readFile('index.html',res)
	}else if(req.url.startsWith('/about')){
		readFile('about.html',res)
	}else if(req.url.startsWith('/list')){
		readFile('list.html',res)
	}else{
		res.writeHead(200,{
			'Content-Type':'text/plain;charset=utf8'
		})
		res.end('页面被狗狗叼走了')
	}
}).listen(3000,()=>{
	console.log('running...')
})
const http = require('http')
const path = require('path')
const fs = require('fs')
const mime= require('./mime.json')

http.createServer((req,res)=>{
	fs.readFile(path.join(__dirname,req.url),(err,fileContent)=>{
		if(err){
			// 没有找到对应文件
			res.writeHead(404,{
				'Content-Type':'text/plain;charset=utf8'
			})
			res.end('页面被狗叼走了')
		}else{
			let dtype='text/html'
			// 获取请求文件的后缀
			let ext = path.extname(req.url)
			if(mime[ext]){
				dtype = mime[ext]
			}
			if(dtype.startsWith('text')){
				dtype+=';charset=utf8'
			}
			res.writeHead(200,{
				'Content-Type': dtype
			})
			res.end(fileContent)
		}
	})
}).listen(3000,()=>{
	console.log('running')
})
const http = require('http')
const path = require('path')
const fs = require('fs')
const mime= require('./mime.json')

exports.staticServer = (req,res,root)=>{
	fs.readFile(path.join(root,req.url),(err,fileContent)=>{
		if(err){
			// 没有找到对应文件
			res.writeHead(404,{
				'Content-Type':'text/plain;charset=utf8'
			})
			res.end('页面被狗叼走了')
		}else{
			let dtype='text/html'
			// 获取请求文件的后缀
			let ext = path.extname(req.url)
			if(mime[ext]){
				dtype = mime[ext]
			}
			if(dtype.startsWith('text')){
				dtype+=';charset=utf8'
			}
			res.writeHead(200,{
				'Content-Type': dtype
			})
			res.end(fileContent)
		}
	})
}



// 文件2
const ss = require('./xx.js')
http.createServer((req,res)=>{
	ss.staticServer(req,res,path.join(__dirname))
}).listen(3000,()=>{
	console.log('runnging...')
})
//get

/*
	get参数处理
*/
const url = require('url')

let str = 'http://www.baidu.com/abc/qqq?flag=123&keyword=java'
let ret = url.parse(str,true)
console.log(ret.query.keyword)

let obj = {
	protocol: 'http:',
	slashes: true,
	auth: null,
	host: 'www.baidu.com',
	port: null,
	hostname: 'www.baidu.com',
	hash: null,
	search: '?flag=123&keyword=java',
	query: 'flag=123&keyword=java',
	pathname: '/abc/qqq',
	path: '/abc/qqq?flag=123&keyword=java',
	href: 'http://www.baidu.com/abc/qqq?flag=123&keyword=java'
}

let ret1 = url.format(obj)
console.log(ret1)
//post

/*
	post参数处理
*/

const querystring = require('querystring')

// parse方法的作用就是把字符串转化成对象
// let param = 'username=list&password=123'
let param = 'foo=bar&abc=xyz&abc=123'
let obj = querystring.parse(param)

console.log(obj)

// stringify的作用就是把对象转换成字符串
let obj1 = {
	flag: '123',
	abc: ['hello','hi']
}
let str1 = querystring.stringify(obj1)
console.log(str1)
]]>
Node4 服务器配置 http://www./?p=2982 Sat, 10 Oct 2020 01:52:49 +0000 http://www./?p=2982 hhh.js

/*
	动态网站开发
*/
const http = require('http')
const path = require('path')
const fs = require('fs')
const querystring = require('querystring')
const scoreData = require('./scores.json')

http.createServer((req,res)=>{

	// 查询成绩的入口地址 /query
	if(req.url.startsWith('/query') && req.method == 'GET'){
		fs.readFile(path.join(__dirname,'index.html'),'utf8',(err,content)=>{
			if(err){
				res.writeHead(500,{
					'Content-Type':'text/plain;charset=utf8'
				})
				res.end('服务器错误,请与管理员联系')
			}
			res.end(content)
		})
	}else if(req.url.startsWith('/score') && req.method == 'POST'){
		// 获取成绩的结果
		let pdata = ''
		req.on('data',(chunk)=>{
			pdata+=chunk
		})
		req.on('end',()=>{
			let obj = querystring.parse(pdata)
			let result = scoreData[obj.code]
			fs.readFile(path.join(__dirname,'result.html'),'utf8',(err,content)=>{
				if(err){
					res.writeHead(500,{
						'Content-Type':'text/plain;charset=utf8'
					})
					res.end('服务器错误,请与管理员联系')
				}
				content = content.replace('$$chinese$$',result.chinese)
				content = content.replace('$$math$$',result.math)
				content = content.replace('$$english$$',result.english)
				content = content.replace('$$summary$$',result.summary)
				res.end(content)
			})
		})
	}


}).listen(3000,()=>{
	console.log('running......')
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查询成绩</title>
</head>
<body>
	<form action="http://localhost:3000/score" method="POST">
		请输入考号:<input type="text" name="code">
		<input type="submit" name="查询">
	</form>	
</body>
</html>

result.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>查询结果</title>
</head>

<body>
    <div>
        <ul>
            <li>语文:$$chinese$$</li>
            <li>数学:$$math$$</li>
            <li>外语:$$english$$</li>
            <li>综合:$$summary$$</li>
        </ul>
    </div>
</body>

</html>

scores.json

{
    "no123":
    {
        "chinese": "100",
        "math": "140",
        "english": "149",
        "summary": "289"
    },
    "no124":
    {
        "chinese": "120",
        "math": "120",
        "english": "119",
        "summary": "189"
    },
    "no125":
    {
        "chinese": "130",
        "math": "140",
        "english": "109",
        "summary": "239"
    }
}
]]>
node3 包管理 http://www./?p=2979 Sat, 10 Oct 2020 01:47:29 +0000 http://www./?p=2979 /* npm 常用命令 1、安装包 npm install -g 包名称 全局安装 npm install 包名称 本地安装 npm uninstall -g 包名称 全局卸载 npm uninstall 包名称 本地卸载 npm update -g 包名称 更新操作 安装包的时候可以指定版本 npm install -g 包名称@版本号 --save // 生产环境依赖 --save-dev // 开发环境依赖 npm install --production 安装生产环境依赖 npm install 安装生产和开发的全部环境 */ ]]>